本文最后更新于2018年11月11日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,一起讨论各种问题!

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

代码说明

该css代码,作用于classpost-itemh2标签下的a标签,当鼠标滑过,即:hover时,指定了半径为20px的边框,背景色为#6f9fc7,字体颜色为#fff,执行links动作,后面的参数为时间;@-webkit-keyframes规定了links执行的具体动作;可以参看参考本站首页的文章标题,鼠标滑过特效!

如果你想给自己网站某元素加入这种特效,只需替换.post-item h2 a为锁需要特效的元素即可,下面展示了本文css的特效!!!

这里是本站的鼠标抖动特效

CSS代码如下

.post-item h2 a:hover {
    border-radius: 20px;
    background: #6f9fc7;
    color: #fff;
    -webkit-animation: links .2s 2
}
@-webkit-keyframes links {
    0% {
        -webkit-transform: rotate(-2deg)
    }
    100% {
        -webkit-transform: rotate(2deg)
    }
}