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绘制圆角矩形的简单示例
Sep 28 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
js面向对象的写法
2016/02/19 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Python实现的文本编辑器功能示例
2017/06/30 Python
Python优先队列实现方法示例
2017/09/21 Python
python3调用R的示例代码
2018/02/23 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
电子专业毕业生自荐信
2014/05/25 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
React配置子路由的实现
2021/06/03 Javascript
Java并发编程之Executor接口的使用
2021/06/21 Java/Android