使用css动画给自己网站添加一个动态闪光logo

　　今日公司UI小姐姐浏览某网页，看到网页logo的闪光效果，然后建议我也可以给网站做一个，我看了下效果，之前也在部分网站看到过，效果也不错，今天就用c3动画给大家分享一个，先看效果如下

　　首先，我们需要找到自己网站logo外面套的盒子，给添加下方css代码，.logo是我网站logo盒子的类名，大家用自己的就行

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

　　接着，我们继续下方css代码

[lv]

/*表示在元素之前添加一个新内容*/
.logo :before {
    content: "";
    /*添加绝对定位属性*/
    position: absolute;
    top: 0;
    /*自行设置闪光的宽高*/
    width: 160px;
    height: 15px;
    /*设置旋转角度*/
    transform: rotate(-45deg);
    /*设置颜色与透明度，.5表示透明度为50%*/
    background: rgba(255, 255, 255, .5);
    /*使用c3动画，1s代表一秒执行完，0s表示不延迟，linear表示执行效果由慢到快，infinite表示循环播放*/
    animation: logogif 1s 0s linear infinite;
}
/*下面是设置动画关键帧，从开始到结束的位置，可根据自己的图宽度设置*/
@keyframes logogif {
    0% {
        left: 0px;
    }
    100% {
        left: 360px;
    }
}

[/lv]