首页 建站教程 WEB前端 正文

如何通过css3给自己网站logo添加闪光效果

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。 具体实现方法如下:找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码/*首先我们需要给logo的盒子设置相对定位,设置宽高,并超出部分隐藏*/ .logo{ position: relative; width: 360p...

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。 具体实现方法如下:

找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码

/*首先我们需要给logo的盒子设置相对定位,设置宽高,并超出部分隐藏*/
.logo{
    position: relative;
    width: 360px;
    height: 60px;
    overflow: hidden;
}

/*再给logo元素伪类before添加样式*/
.logo:before {
    content: "";
    position: absolute;/*添加绝对定位属性*/
    top: 0;
    width: 260px;
    height: 60px;
    transform: rotate(-45deg);/*设置旋转角度*/
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8), rgba(255,255,255,0));
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8), rgba(255,255,255,0));
    /* Standard syntax */
    background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8), rgba(255,255,255,0));
    animation: logoAni 1s 0s linear infinite;/*添加css动效,1s代表一秒执行完,0s表示不延迟,linear表示执行效果由慢到快,infinite表示循环播放*/
}

/*再给定义的logoAni设置动画帧样式,从开始到结束的位置,可根据自己的图宽度进行设置*/
@keyframes logoAni {
0% {
    left: -50px;
    }
100% {
    left: 250px;
    }
}

注:.logo 是我网站logo盒子的类名,大家用自己的或根据自己网站实际logo图片盒子层就行

演示效果及DEMO附件下载:

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/174.html

相关推荐

CSS心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 2348
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的css3效果,有需要的可以直接引用:1.悬浮时放大:.one{transition:All 0.4s&nb...
WEB前端 2023.09.13 0 2201
评论列表
乐屋
不错
2021-11-01 22:06:56 回复
lihaining
不错,学习
2021-02-24 21:20:25 回复
umtheme
@lihaining欢迎常来
2021-02-28 10:10:16 回复

感谢您的支持