易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画

作者：matrix 被围观: 3,479 次 发布时间：2013-10-16 分类：Wordpress 兼容并蓄 零零星星 | 3 条评论 »

看到易迅网的右侧、下方商品都有的一种效果，原本以为是JS什么的，找了大半天才知道是css3的效果。

DEMO下载:

http://www.400gb.com/file/28915416

http://pan.baidu.com/share/link?shareid=3180343884&uk=3238236832

关键的css代码：

@-webkit-keyframes aniBlink{from{left:-60px}to{left:550px}}/*aniBlink动画执行区域*/  
.TU a:before{content:'';position:absolute;width:30px;height:200px;/*aniBlink动画斜线宽度和高度*/  
top:0;left:-60px;/*aniBlink动画斜线初始停留位置*/  
overflow:hidden;  
background:-webkit-gradient(linear,left top,rightright top,color-stop(0%,rgba(255,255,255,0)),  
color-stop(50%,rgba(255,255,255,0.4)),color-stop(100%,rgba(255,255,255,0)));  
/*linear（线性渐变）*/  
-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}/*skewX：定义一个X轴的2D 倾斜*/  
.TU  :hover a:before{-webkit-animation:aniBlink 0.3s ease-out forwards} /*aniBlink动画执行的时间0.3s*/  

说明：.TU为包含图片class（任意命名）的外面一层class（命名为.TU）。

例如：

 <div class="TU">  
<div class="y">  
 <a href="https://www.hhtjim.com" target="_blank" title="易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画 - HHTjim.Com" >  
<img src="https://static.hhtjim.com/wp-content/uploads/2015/bcsfile/20130326192035.jpg" width="505" height="134"></a>  
</div></div>  

aniBlink为动画名称。如要修改，确保第一和第九行相同。

空间坐标系是以窗口右上角为原点，从左到右为X轴正方向，从上到下为Y轴正方向，垂直屏幕向外为Z轴正方向进行建系。

基本上都注释了。还有其他不知道的可参考度娘。

效果，就那中间的白条东跑西跑的：chrome、safari、firefox都看到效果，IE10不行！其余须自测。

参考：

http://www.w3cplus.com/content/css3-gradient

http://www.mxria.com/css3/c20120121810.htm

CSS3效果在线编辑工具