ripro主题Logo加闪光效果 WordPress教程

作者 : 源码小能手 本文共1449个字,预计阅读时间需要4分钟 发布时间: 2020-12-13 共136人阅读

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

ripro主题Logo加闪光效果 WordPress教程-1

需要修改文件分别为:

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

/*
* 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 #4f8af1; 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;}

常见问题FAQ

源码是否可商用?
否。源码来源于网络,如需商用请购买正版!
现在加入源码智库,