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 02 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php之curl设置超时实例
2014/11/03 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
简单实现php上传文件功能
2017/09/21 PHP
php实现记事本案例
2020/10/20 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python Series从0开始索引的方法
2018/11/06 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
golang/python实现归并排序实例代码
2020/08/30 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
环保宣传语大全
2015/07/13 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
创业计划书之酒店
2019/08/30 职场文书