css实现图片闪光效果
1.这个效果是看到京东商城上的一个下效果，原本的思路是
用js控制一个图片在某张需要闪光的图片上重复出现，但是
网上找了一些资料，竟然是用css写的，真是太帅了！！！
2.原理：在需要闪光的图片前添加before 属性；内容为空；
宽为200px,高为100%，left：-150px,overflow:hiddden;
background属性设置为渐变；颜色看自己需要；transform-skewX(-25deg)
然后为before的content设置过渡动画：{left：150%,transiton：150px 1s ease 0s}
就可以了；
3：参考代码如下：
img{width:800px;height:450px;margin:0 auto;}
.img { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.img:before{ content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg)
}
.img:hover:before { left: 150%; transition: left 1s ease 0s; }
<div>
<a href="#" class="img">
<img src="img/1.jpg" alt="风景"/>
</a>
</div>
最新文章
- 开源镜像源（转自[tanghuimin0713的博客]）
- zabbix3.0安装之图形界面显示异常【server】
- java提高篇（二四）-----HashSet
- LeetCode: Unique Paths 解题报告
- 编译Firebird的源码
- margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架
- 如何在Objective-C中实现链式语法？
- XmlDocument 转换为xml字符串
- ecshop常用的一些变量
- python之函数用法isinstance()
- UVa 10375 选择与除法（唯一分解定理）
- Java中的Scanner类
- Spring演示及总结
- echarts固定柱子宽度(barWidth)
- jsonp: js跨域
- Android 中怎么重新启动APP或系统
- 笔记-git-git服务器安装及配置
- Linq语法和C#6.0
- python三大器
- Window下安装Gradle并在IDEA中配置