子比主题-logo扫光效果

效果预览

效果看本站logo效果即可

美化步骤

主题设置 -> 全局&功能 -> 自定义代码

将以下css代码，复制到自定义CSS样式中即可

.navbar-brand {
 position: relative;
 overflow: hidden;
 max-height: 60px;
}
/**伪元素法生成长条**/
.navbar-brand::before {
 content: "";
 position: absolute;
 width: 150px;
 height: 10px;
 background-color: rgba(255, 255, 255, 0.5);
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-animation: blink 1s ease-in 1s infinite alternate;
 /**动画名，持续，加速，循环，逆播放**/
 animation: blink 1s ease-in 1s infinite alternate;
}

@-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;}
}

感谢您的来访，获取更多精彩文章请收藏本站。