高大上纯CSS给网站LOGO添加扫光效果

模板云资源网站老彭最近发现很多网站的logo有一个扫光的特效,开始还以为是flash效果,后来研究了下发现基本上都是用 :before 选择器实现的扫光效果,现在把代码和实现方式分享出来,觉得好看的可以在自己的站点上试一试。

这个html结构

<div class=”logo-wrapper“>
<a href=”https://www.mb173.com/”>
<img class=”logo regular tap-logo” src=”https://www.mb173.com/wp-content/uploads/2020/06/1591236690-96d6f2e7e1f705a.png” data-dark=”” alt=”模板云资源网”>
</a>
</div>

 

Logo扫光效果实现方式:

1、用 CSS3 伪元素 :bfore 或 :after 添加一扫光层;

2、用 transform:rotate(-45deg) 旋转 45 度;

3、@ keyframes 规则来控制扫光效果的起始位置和结束位置;

4、用 CSS 控制位置和动画时间等。

Logo扫光效果CSS样式:

CSS
.logo-wrapper {
position:relative;
overflow:hidden;
margin: 6px 0 0 10px;
transition-duration: .3s;
}
.logo-wrapper:before{
content:””;
position: absolute;
left: -665px;
top: -460px;
width: 200px;
height: 20px;
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 4s ease-in 0s infinite;
-o-animation: searchLights 4s ease-in 0s infinite;
animation: searchLights 4s ease-in 0s infinite;
}
@-webkit-keyframes searchLights {
0,75% { left: -100px; top: 0; }
100% { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
0,75% { left: -100px; top: 0; }
100% { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
0,75% { left: -100px; top: 0; }
100% { left: 120px; top: 100px; }
}
@keyframes searchLights {
0,75% { left: -100px; top: 0; }
100% { left: 120px; top: 100px; }
}

将红色部分替换成你自己的class类

需要注意的几点:

1、:before 选择器在被选元素的内容前面插入内容。

2、可以使用 content 属性来指定要插入的内容。

3、所有主流浏览器都支持 :before选择器。

4、: before在IE8中运行,必须声明 <!DOCTYPE> 。

 

点击下载demo

1、本站绝大部分资源为我站原创,部分资源来源于用户上传和网络,如有侵权请邮件联系站长!
2、分享目的仅供大家学习和交流,请不要用于商业用途!
3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4、如有链接无法下载、失效或广告,请联系管理员处理!
5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

eyou仿站-易优仿站-cms模板定制-模板免费下载-素材下载 » 高大上纯CSS给网站LOGO添加扫光效果

发表评论

低价模板,快速仿站,会员免费下载

立即查看 低价仿站