logo扫光特效,网站logo扫光特效纯代码可调节速度 WordPress美化教程 - 汇站网

#精品
logo扫光特效,网站logo扫光特效纯代码可调节速度 WordPress美化教程

2021-04-30 0 1,178

将以下代码加到你的网站 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://www.miuiy.com/logo1.png alt="艺创博客"/>a h1>  

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

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

完成以上操作就行啦。

转载请注明:汇站网 » logo 扫光特效,网站 logo 扫光特效纯代码可调节速度 WordPress 美化教程

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

免责 声明

本资源仅用于个人 学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价 购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务 !
 4.  本站所有资源的展示图片和信息不代表本站的立场 !本站只是储蓄平台及搬运
 5.  下载者禁止在服务器和虚拟机下进行搭建运营,本站 所有资源不支持联网运行!只允许调试,参考和研究!!!!
 6.  未经原版权作者许可,禁止用于任何 商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 7.  为尊重作者版权,请在下载24小时 内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 8.  若资源侵犯了您的合法权益, 请持 您的版权证书和相关原作品信息来信通知我们请来信     通知我们 我们会及时删除,给您带来的不便,我们深表歉意!
 9.  如下载链接失效、广告或者压缩包 问题请联系站长处理!
 10.  如果你也有好源码或者教程,可以 发布到网站,分享有金币奖励和额外收入!
 11.  本站资源售价只是赞助,收取费用 仅维持本站的日常运营所需!
 12.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 13.  更多详情请点击查看

汇站网 WordPress logo扫光特效,网站logo扫光特效纯代码可调节速度 WordPress美化教程 https://www.huizhanii.com/168.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
  随机评论   表情   下载本站到电脑桌面


表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
登录后评论
联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com