如何通过css3给博客logo添加闪光效果

通过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;
    }
}

原文链接：https://www.umtheme.com/web/174.html
DEMO附件下载：174.zip

版权说明：文章[非商业性质]，有大量文章来源网络各处，本站只做收集，侵权联系删除。