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博客搜索:标题关键字。以获取最新全部资料 ❤
第三方平台不会及时更新本文最新内容。如果发现本文资料不全,可访问本人的Java博客搜索:标题关键字。以获取最新全部资料 ❤