当前位置:奉上博客 » 站长之家 » 正文

7b2主题美化-如何实现logo扫光 附教程

添加CSS代码

/*电脑版手机不显示*/
 @media screen and (min-width: 768px) {
    /*Logo添加闪光效果*/
    .logo {
        position: relative;
        font-size:2em;
        font-weight:700;
        line-height:39px;
        overflow:hidden;
        margin:0;
    }
    .logo::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 1.5s ease-in 1.5s infinite;
        animation: searchLights 1.5s ease-in 1.5s infinite;
    }
    @-webkit-keyframes searchLights {
        0% {
            left: -90px;
            top: 0;
        }
        to {
            left: 90px;
            top: 0;
        }
    }

相关文章