最新公告
  • 欢迎您光临玖居暗巷,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 【WordPress美化】Logo扫光特效,网站logo扫光特效纯代码可调节速度

    【WordPress美化】Logo扫光特效,网站logo扫光特效纯代码可调节速度 最后编辑:2020-05-02

    将以下代码加到你的网站css文件里面,随意,只要能引用的css就行了,wordpress用户加在style.css里面。

    .site-title:before{/*这里第一句看原理解释*/content: ""; position: absolute; width: 150px; height: 10px; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);/*角度倾斜45*/-webkit-animation: blink 1s ease-in 1s infinite;/*光扫过去的时间,自己修改,可以加快*/animation: blink 1s ease-in 1s infinite;/*光扫过去的时间,自己修改,可以加快*/} @-webkit-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;}}@-o-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;}}@-moz-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;}}@keyframes blink { from {left: -100px;top: 0;} to {left: 320px;top: 0;}}
    

     

    (必看)原理解释
    给大家解释一下代码,不看可能不会扫(WordPress柒比贰主题可以忽略,因为博主也是。)

    找到你的logo所处的div,然后找到他的class,如这个实例:

    <h1 class="yuanli pos-a">< a src=https://jiuqing97.top/wp-content/uploads/2020/01/1579594683-13a6b27c17c4008.png alt="玖居暗巷"/>a h1> 
    

     

    看到yuanli那个class了吗?你的应该只是命名不一样,然后再css里面添加上面的css,然后第一句写法就应该用如下的

    .yuanli:before{/*这里第一句看原理解释*/content: "";
    

     

    完成以上操作就行啦。

    猜你喜欢

    猜你在找

    ①本站资源仅用于学习和交流,勿用于商业。切勿私自传播于网络,将会追究法律责任。
    ②本站其他资源来源网络或者用户投稿,供学习交流之用。如有侵权请联系删除。
    ③如有链接无法下载、失效或广告,请联系管理员处理!
    ④本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    ⑤如果你也有好源码或者教程,可以到审核区发布,分享有本站专属货币奖励和额外收入!
    ⑥如遇到加密压缩包,默认解压密码为"jiuqing97.top",如遇到无法解压的请联系管理员!

    玖居暗巷 » 【WordPress美化】Logo扫光特效,网站logo扫光特效纯代码可调节速度

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于网页模版、APP源码等类型的资源,文章内用于介绍的图片通常并不包含在对应可供下载资源包内。这些相关商业资源需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些文件也是这种情况,但部分资源会在资源包内有一份下载链接清单。
    玖居暗巷
    一个高级程序员模板开发平台
    • 2020-01-29Hi,初次和大家见面了,请多关照!

    Leave a Reply