CSS效果 展示:

我可以闪光哦

CSS代码 WordPress代码

注意 下文替换的是你前端标签内class指定的内容哦 下文是logo-wrapper

    /*
      本CSS 仅适配长度200的图片,如果自己Logo变化,自行根据我的注释修改。
    */
        /* 如果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: 200px;
            /* 闪光的宽度 */
            height: 8px;
            /* 闪光的颜色*/
            background-color: rgba(255,255,255,.5);
            /* 闪光旋转的角度 负值是 向右旋转 正值 则反过来*/
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            /* 闪光运行的时间 */
            -webkit-animation: searchLights 1.2s ease-in 1s infinite;
            animation: searchLights 1.2s ease-in 1s infinite;
        }
        /* 以图片横轴中心为原点 从左到右划过。假设图片长度是200px 就是扫的路径是:-100px 到100px 具体效果按需调整哦 */
        @-webkit-keyframes searchLights {
            0% { left: -100px; top: 0; }
            to { left: 75px; top: 0; }
        }
特殊说明:
上述文章均是作者实际操作后产出。烦请各位,请勿直接盗用!转载记得标注原文链接:www.zanglikun.com
第三方平台不会及时更新本文最新内容。如果发现本文资料不全,可访问本人的Java博客搜索:标题关键字。以获取全部资料 ❤