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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
两个php日期控制类实例
2014/12/09 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
C语言中break与continue的区别
2012/07/12 面试题
Java编程面试题
2016/04/04 面试题
JSF界面控制层技术
2013/06/17 面试题
会计应聘求职信范文
2013/12/17 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
全神贯注教学反思
2014/02/03 职场文书
学校门卫岗位职责
2014/03/16 职场文书
中药学专业求职信
2014/05/31 职场文书
Go语言编译原理之变量捕获
2022/08/05 Golang