前段阵子看到百度音乐的这个效果，觉得不错哟~
在学习CSS3之前，还不知道怎么实现的，现在想起来，so easy~
大家可以先去浏览下效果：http://music.baidu.com/。
其实就是在图片的上层，添加一层白色半透明的层，hover的时候，结合CSS3的动画实现透明层位置平滑移动效果。
这时候可以先浏览下我写的demo：www.xuanfengge.com/demo/201308/baidumusic，然后再看下代码
CSS代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.arc_img{ width: 160px; height: 160px; position: relative; display: block; overflow: hidden; margin:200px auto; box-shadow: 0 0 10px #FFF; } .light{ cursor:pointer; position: absolute; left: -100px; top: 0; width: 160px; height: 160px; background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); transform: skewx(-25deg); -o-transform: skewx(-25deg); -moz-transform: skewx(-25deg); -webkit-transform: skewx(-25deg); } .arc_img:hover .light{ left:120px; -moz-transition:0.2s; -o-transition:0.2s; -webkit-transition:0.2s; transition:0.2s; } |
HTML代码
|
1 2 3 4 5 6 |
<div class="arc_img"> <a href="#"> <img src="test.png" alt="LEE图库"> </a> <i class="light"></i> </div> |
skewx是在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变，然后hover的时候，设置0.2s的动画时间。
同时因为图像是有链接的，所以在透明层i标签使用了cursor:pointer，不然会等闪光划过之后，才能看见手指状。
当然了，CSS3 的效果嘛，IE低版本肯定不支持了。其实也可以做，这恐怕又得结合JS了~
暂无评论