首页 建站教程 WEB前端 正文

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

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

通过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附件下载:

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

打赏
海报

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

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

相关推荐

纯css实现列表自动添加序号

纯css实现列表自动添加序号

我们写样式代码时偶尔会用到数字排行榜的设计,按序号罗列排名,例如:优美mipCms主题中的热门/热评排行:如果用li元素配合list-s...
WEB前端 2021.07.18 0 851
Js简单实现复制指定内容到粘贴板

Js简单实现复制指定内容到粘贴板

通过以下代码,点击按钮可直接把input或者textarea里的值复制到粘贴板里,此方法不依赖jquery框架,实现简单粗暴希望对大家有所帮助。<!DOCTYPE html>...
WEB前端 2021.04.14 0 1102
Js实现双击鼠标自动滚动页面效果

Js实现双击鼠标自动滚动页面效果

主要介绍了Js实现双击鼠标自动滚动页面的示例代码,在特定的页面也许可以用的的上例如小说或一些资讯类型的网站,需要的朋友可以试一试。操作比较简单把以下代码加在网站的页面中,就可以实现双击鼠标实现自动滚屏...
WEB前端 2021.03.15 0 1154
评论列表
lihaining
不错,学习
2021-02-24 21:20:25 回复
umtheme
@lihaining欢迎常来
2021-02-28 10:10:16 回复

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持