CSS实现的一闪而过的图片闪光效果


Posted in HTML / CSS onApril 23, 2014

只需要两个HTML元素和一个CSS变换,我就能创造出我自己的闪光效果。让我们来实现它!

呈现光泽图片

下面就是这张Addy在他博客上使用的图片:

CSS实现的一闪而过的图片闪光效果CSS实现的一闪而过的图片闪光效果

比我需要的要大一些,但你可以把它裁剪一些。

注意:左边的那张是纯白色的,所以看不到,两张图在CSS代码中都要用到。

HTML代码

制作这种闪光效果,需要有两个元素:一个外框架,另一个内部元素用来呈现光泽。我这里使用了A标签和SPAN标签:

复制代码
代码如下:

<a href="/" class="logo lazy "><span></span></a>

HTML代码总是最简单的。

CSS代码

A元素的样式很简单,溢出的部分要隐藏,保证光泽的正常显示,最后设置元素的长宽:

复制代码
代码如下:

a.logo {
display: block;
background: url("logo.png") 0 0 no-repeat;</p> <p> height: 70px;
width: 91px;
overflow: hidden;
}

负责光泽的SPAN元素也十分简单;设置它的长宽和背景位置就行了:
复制代码
代码如下:

a.logo span {
display: block;
background: url("shine.png") -60px -80px no-repeat; </p> <p> transition-property: all;
transition-duration: .8s;</p> <p> height: 70px;
width: 91px;
}

最后一步是设置鼠标悬停时的动作:
复制代码
代码如下:

a.logo:hover span {
background-position: 100px 100px;
}

因为脸部是弧线形,这里做了一些特殊处理,我用border-radius将内部的SPAN变成了椭圆形:
复制代码
代码如下:

a.logo span {
border-radius: 50%;
}

这就是当鼠标悬停时光泽一闪而过的效果了,非常简单!

用这样少的代码创造出这么炫的效果,完全值得放在网站上。很多年前我们都需要使用JavaScript工具库才能完成这样的效果——而现在轻松的只需要几行CSS代码。希望你们也觉得这个效果很有趣,你可以换成你的头像试一下!

HTML / CSS 相关文章推荐
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 #HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 #HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 #HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 #HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 #HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 #HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
You might like
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
七年级作文之雪景
2019/11/18 职场文书