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

作者:Matrix 被围观: 1,764 次 发布时间:2013-10-16 分类:wordpress建站 兼容并蓄 拷贝型 零零星星 | 3 条评论 »

NOTICE:这是一个创建于 1152 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

DEMO下载:

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

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

关键的css3代码:

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

说明:.TU为包含图片class(任意命名)的外面一层class(命名为.TU)。

例如:

  1.  <div class="TU">  
  2. <div class="y">  
  3.  <a href="http://www.hhtjim.com" target="_blank" title="易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画 - HHTjim.Com" >  
  4. <img src="http://www.hhtjim.com/wp-content/uploads/2015/bcsfile/20130326192035.jpg" width="505" height="134"></a>  
  5. </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效果在线编辑工具

本文固定链接:http://www.hhtjim.com/css-3-yi-xun-net-gradient-ramp-animation-effects-the-mouse-slip-appear-white-diagonal-lines.html
Matrix
本文章由 Matrix 于2013年10月16日发布在wordpress建站, 兼容并蓄, 拷贝型, 零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画-HHTjim'S 部落格
关键字:,

有3 条评论 »

  1. 牛逼思维 牛逼思维 2013-10-27 16:27:09 +0800#2

    渐变要写好长的css,找些在线生成工具比较快

  2. xilouqingzhu xilouqingzhu 2013-10-17 9:20:45 +0800#1

    真能折腾...我一直担心效果太多会导致本来不快的速度更慢

    • Matrix Matrix Moderator 2013-10-17 10:20:24 +0800

      先练手   
      以后好自己修改主题 :mrgreen:

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!