功能介绍
如果您正在使用日主题系列,这是非常简单的,进入后台-外观-自定义-额外CSS,然后添加以下代码 ,如果您要用与其他主题也是可以的,只不过是有点麻烦而已,首先需要找到你使用的主题中的样式文件,再使用F12控制台选择logo查看一下对应的Class。
效果展示
白天黑夜
美化代码
/**logo扫光日间**/ .logo-wrapper:after { content: ""; position: absolute; width: 150px; height: 10px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: blink 1s ease-in 1s infinite; animation: blink 1s ease-in 1s infinite; } /**logo扫光夜间**/ .dark-open .logo-wrapper:after { content: ""; position: absolute; width: 150px; height: 10px; background-color: rgba(41,48,66,1); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -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;} }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。