站点logo添加扫光效果
下面这段代码是我们修改主题文件的主要代码,我们需要将其添加到主题的样式表中,一般情况下是添加到主题的主样式表中,对于大多数主题来说为style.css文件,但是部分主题可能不调用这个文件,比如我所使用的主题其主样式文件为main.css,所以我是将代码放在了该文件里。同时我们需要根据自己的主题将代码中的 .site-logo 修改为当前主题的Logo元素选择器名称,比如对于其他主题修改为 .logo 或者f12查看即可。
/**logo扫光效果CSS**/ .site-logo{ position: relative; overflow: hidden; float:left; max-height: 50px; }
.site-logo:before { content: ""; position: absolute; width: 150px; height: 10px; background-color: rgba(255, 255, 255, 0.5);
-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;} }
@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。大家可以根据自己需要调整上面代码中的参数以适应自己的站点logo。
注意:对于部分自适应的主题需要把下面这段代码去掉:
.site-logo{ position: relative; overflow: hidden; float:left; max-height: 50px; }
修改完成后大家就可以通过刷新网站首页查看效果了,有些时候可能无法立即查看到修改后的效果,不必担心,这多半是由于网页缓存或使用CDN服务等的关系,你可以通过清楚浏览器缓存、刷新CDN或者暂时停用下CDN来快速查看到效果。
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:3.147.64.212,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/add-a-sweeping-effect-to-the-site-logo.html
文章链接:https://www.ooize.com/add-a-sweeping-effect-to-the-site-logo.html
订阅
登录
0 评论