首页 » 建站手册 » 为你的网站加入鼠标滑过抖动样式

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

谷歌已收录,更新于2019年07月14日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

前言

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

typecho预览

代码说明

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

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

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)
        }
    }

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 2 条评论

  1. 眼福博客 眼福博客说道:

    眼福博客来访,流量大涨

    1. 枂下 枂下说道:

      多谢支持!!!

最近动态查看

    利用短代码实现了文章正文任意位置插入[googleads],前端自动变为谷歌广告。这样,文章过长时,可以随意插入广告了。
返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫