首页 建站教程 WEB前端 正文

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

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。 具体实现方法如下:找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码 .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中position:fixed如何实现相对于父级定位

css中position:fixed如何实现相对于父级定位

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生...
WEB前端 2023.02.12 0 668
评论列表
乐屋
不错
2021-11-01 22:06:56 回复
lihaining
不错,学习
2021-02-24 21:20:25 回复
umtheme
@lihaining欢迎常来
2021-02-28 10:10:16 回复

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持