首页 建站教程 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附件下载:

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

打赏
海报

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

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

相关推荐

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

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

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。具体实现方法如下:找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码/*首先我们需...

WEB前端 2021.01.14 0 232

纯css简单实现角标样式

纯css简单实现角标样式

纯css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg...

WEB前端 2020.10.16 0 665

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 347

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 375

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持