模仿playnext网站hover后抖动的效果

    偶然情况下看到了playnext网站,对于前端菜鸟来说,其图标抖动的效果十分亮眼。

    最开始是打算研究其CSS样式看是怎么实现的,但是。。。在看过CSS样式表后,都在一排。。看之前要花大量时间去排版,于是决定自己研究。

    加之最近想攻克CSS3中的动画keyframes,于是就做了下。最初版式用原生JS实现的,后来尝试用jQuery实现,后来更加了解了jQuery后,又简化了jQuey代码。只适配了火狐浏览器,大家可以视情况完善浏览器支持,原理就是定义一个class(我这里取得名字叫shake),让其拥有抖动的动画,接着通过js把鼠标经过的地方添加上该class(.shake)。代码如下:




    
    111
    


    


你可能感兴趣的:(模仿playnext网站hover后抖动的效果)