易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画
2023-06-13 09:11:05 时间
易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画
作者:matrix 被围观: 2,854 次 发布时间:2013-10-16 分类:Wordpress 兼容并蓄 零零星星 | 3 条评论 »
这是一个创建于 3242 天前的主题,其中的信息可能已经有所发展或是发生改变。
看到易迅网的右侧、下方商品都有的一种效果,原本以为是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
相关文章
- android+制作开机动画,Android 开机动画制作详解
- js动画和css3动画_js控制css动画
- CSS3 动画 animation
- 这是一篇很好的互动式文章,Framer Motion 布局动画
- CSS动画与GPU
- KeyShot Pro for mac(3D渲染和动画制作软件)
- r语言绘制动态统计图:绘制世界各国的人均GDP,出生时的预期寿命和人口气泡图动画动态gif图|附代码数据
- 属性动画原理解析详解手机开发
- pm25首页css3天气场景动画效果代码详解编程语言
- Linux系统比肩专业软件,制作神奇动画(linux动画制作)
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
- 分享 8个超炫酷的纯 CSS3 动画源码
- 动画演示10个超有趣的Linux命令【转】
- js动画效果打开层关闭层
- Jquery自定义动画概述及示例
- VC++实现输出GIF到窗体并显示GIF动画的方法