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实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
jQuery实现简单聊天室
2020/02/08 jQuery
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python如何实现内容写在图片上
2018/03/23 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python标记语句块使用方法总结
2019/08/05 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
数学国培研修感言
2014/02/13 职场文书
企业宣传标语
2014/06/09 职场文书
商务信函英语问候语
2015/11/10 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
Golang jwt身份认证
2022/04/20 Golang
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS