为你的网站加入鼠标滑过抖动样式

4
(2)

又是旧站的文章,再搬运一篇过来。本文属于CSS动画特效,短短的几行代码就可以实现鼠标滑过某区域,特定元素抖动的特效。

为你的网站加入鼠标滑过抖动样式

站长闲下来的时候,就四处逛逛网站,顺便扒点其他网站的代码,比如htmlcssjs;都是站长通过f12或者view-source扒到的,有些代码很容易就能扒到,有些很难,比如今天分享的这个,扒了得半小时,才找到css具体代码!支持所有网站,wordpress、typecho、hexo等等之类的。

有可能当时太菜,扒代码不太熟练吧。然后,顺便,今天再修改下代码,发出来供各位参考。

代码说明

该css代码,作用于class为item-content下的h2标签,当鼠标滑过class为item的区域,即.item:hover时,执行links动作,后面的参数为时间;@-webkit-keyframes规定了links执行的具体动作;可以参看参考本站首页的文章标题,鼠标滑过特效!

如果你想给自己网站某元素加入这种特效,只需替换.item及.item-content h2为所需要特效的元素即可

CSS代码如下

    .item:hover .item-content h2 {
        -webkit-animation: links .2s 2
    }
    @-webkit-keyframes links {
        0% {
            -webkit-transform: rotate(-2deg)
        }
        100% {
            -webkit-transform: rotate(2deg)
        }
    }

具体效果如下:

为你的网站加入鼠标滑过抖动样式

共计2人评分,平均4

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

旧站文章,作者:古哥,如若转载,请注明出处:https://iymark.com/website/css-diy-hover-shake.html

发表评论

登录后才能评论
分享本页
返回顶部