轩枫阁

首页 / Web前端 / CSS / 百度音乐专辑图闪光效果CSS3实现分享

百度音乐专辑图闪光效果CSS3实现分享

前段阵子看到百度音乐的这个效果,觉得不错哟~

在学习CSS3之前,还不知道怎么实现的,现在想起来,so easy~

大家可以先去浏览下效果:http://music.baidu.com/

TCDM(1EKG7B~B6UD_UI[F{J

 

其实就是在图片的上层,添加一层白色半透明的层,hover的时候,结合CSS3的动画实现透明层位置平滑移动效果。

这时候可以先浏览下我写的demo:www.xuanfengge.com/demo/201308/baidumusic,然后再看下代码

CSS代码

HTML代码

skewx是在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变,然后hover的时候,设置0.2s的动画时间。

同时因为图像是有链接的,所以在透明层i标签使用了cursor:pointer,不然会等闪光划过之后,才能看见手指状。

当然了,CSS3 的效果嘛,IE低版本肯定不支持了。其实也可以做,这恐怕又得结合JS了~

327/470
329/470

相关阅读

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子