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中的5个有趣的新技术
Apr 02 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 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
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
理解javascript异步编程
2016/01/27 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python字典简介以及用法详解
2016/11/15 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
党课培训心得体会
2014/09/02 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS