RiPro美化教程之Logo添加扫光效果

作者 : 阿夜 本文共584个字,预计阅读时间需要2分钟 发布时间: 2020-05-4 共192人阅读

最近看到很多的网站LOGO都有个闪光的效果,适合所有网站,下面把代码分享给大家……

登录自己的网站后台,在RiRro主题设置找到顶部设置然后再选择自定义CSS样式代码,添加以下CSS代码就可以了。

如果找不到也可以放在主题模板文件中的header.php文件当中。

/*LOGO 过光效果*/
.logo-wrapper {
    position: relative;
    font-size:2em;
    font-weight:700;
    line-height:39px;
    overflow:hidden;
    margin:0;
}
.logo-wrapper::before{
    content:"";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
@-webkit-keyframes searchLights {
    0% { left: -90px; top: 0; }
    to { left: 90px; top: 0; }
}
①本站所有资源免费,收取的费用仅是人工测试和服务器日常费用,请须知。
②本站资源仅用于学习和交流,勿用于商业。切勿私自传播于网络,将会追究法律责任。
③本站其他资源来源网络或者用户投稿,供学习交流之用。如有侵权请联系删除。
④因本站所有商品具有可复制性,一经出售概不退款。
⑤如遇到加密压缩包,默认解压密码为"aaym.net",如遇到无法解压的请联系管理员!
AA源码网 » RiPro美化教程之Logo添加扫光效果

常见问题FAQ

RiPro美化包支持最新版本吗?
RiPro美化包支持永久更新!
游客模式购买后还能再免费下载吗?
游客模式在您未清理浏览器缓存的前提下最多保留7天购买记录,7天内再次下载不收费的。这里建议您注册用户后购买可长期保存购买记录。
这里购买的资源有后门吗?保证绝对没有漏洞吗?
AA源码网保证每一份资源都是经过测试后发布的,基本可以减少99%的问题和可能存在的后门等。

发表评论