子比主题添加logo闪光代码logo闪光代码

我们浏览子比主题网站时经常会看到一些网站的LOGO带有扫光效果,像光线扫过一样,看上去比较美观。

下面我就分享一下代码和教程

代码如下:

/* logo扫光 */
        .navbar-brand {
            position: relative;
            overflow: hidden;
            margin: 0px 0 0 0px;
        }

        .navbar-brand:before {
            content: "";
            position: absolute;
            left: -665px;
            top: -460px;
            width: 200px;
            height: 15px;
            background-color: rgba(255, 255, 255, .5);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation: searchLights 6s ease-in 0s infinite;
            -o-animation: searchLights 6s ease-in 0s infinite;
            animation: searchLights 6s ease-in 0s infinite;
        }

        @-moz-keyframes searchLights {
            50% {
                left: -100px;
                top: 0;
            }

            65% {
                left: 120px;
                top: 100px;
            }
        }

        @keyframes searchLights {
            40% {
                left: -100px;
                top: 0;
            }

            60% {
                left: 120px;
                top: 100px;
            }

            80% {
                left: -100px;
                top: 0px;
            }
        }

复制代码,进入wp后台找到自定义代码,复制代码进去,就OK了,超级简单;

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论