ripro主题Logo加闪光效果

作者 : 官方 本文共1470个字,预计阅读时间需要4分钟 发布时间: 2019-10-7 共488人阅读

最近看到很多的网站logo都有个闪光的效果,怎么做的呢?小编也研究了下,适合所有网站,下面把代码分享大家……

需要修改文件分别为:

文件你看哪个位置方便分别可加在主题设置css里也可以放在\ripro\assets\css\diy.css

[rihide]/*
* 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;
}
.ripro-dark .logo-wrapper::before{
content:””;
position: absolute;
width: 150px;
height: 10px;
background-color: rgba(25, 22, 22, 0.55);
-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; }
}

#help h2,#down h2{ font-size:18px; line-height:54px; color:#323232; border-bottom:2px solid #4.8af1; width:150px; font-weight:normal;}
#help dt{cursor:pointer; color:#353535; font-size:18px;margin-bottom:20px; }
#help dd{ display:none;color:#767676; font-size:14px; padding:10px; border-radius:5px; background:#f0f0f0; margin-bottom:20px;margin-bottom:20px; line-height:25px; letter-spacing:1px;}
#help dt,#help dd{ margin-left:40px; position:relative;}
#help dt i,#help dd i{background:url(https://img.srcdict.com/ico.png) no-repeat; width:30px; height:30px; display:block; position:absolute; left:-40px; top:0px;}
#help dd i{background-position: 0 -35px;}[/rihide]

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"AIQIYIC.CN",如遇到无法解压的请联系管理员!

艾奇资源网 » ripro主题Logo加闪光效果

常见问题FAQ

美化包支持最新版本吗?
艾奇资源最新美化支持永久更新!

发表评论