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

logo盒子的类名改成自己的就行

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

在元素之前添加一个新内容

/*表示在元素之前添加一个新内容*/
.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;
    }
}

第二种完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<style>

.logo-site,.logo-sites {
    position: relative;
    float: left;
    margin: 18px 0 0 5px;
    max-height: 50px;
    overflow: hidden
}

.logo-site img,.logo-sites img {
    width: auto;
    max-height: 50px
}

.logo-small img {
    float: left;
    width: 45px;
    max-height: 45px;
    margin: 2px 10px 0 0
}

.clear-small {
    margin: 0 0 0 55px
}

@media screen and (max-width:1025px) {
    .logo-site,.logo-sites {
        float: none;
        text-align: center;
        margin: 5px 0 0 30px
    }

    .logo-box .logo-site,.logo-box .logo-sites {
        float: left;
        text-align: left
    }

    .logo-small {
        vertical-align: middle;
        margin: 9px 5px 0 0
    }

    .logo-small img {
        float: none;
        width: 15px;
        max-height: 15px
    }
}

@keyframes searchLights {
    0% {
        left: -100px;
        top: 0
    }

    to {
        left: 120px;
        top: 100px
    }
}

.site-title {
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 700;
    padding: 0 0 2px 0
}

.site-title img,.logo-small img {
    font-size: 0;
    transition-duration: .5s
}

.site-name {
    font-size: 3px!important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

@media screen and (min-width:1025px) {
    .logo-site:before {
        content: "";
        position: absolute;
        left: -665px;
        top: -460px;
        width: 250px;
        height: 15px;
        background-color: rgba(255,255,255,.5);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: searchLights 1s ease-in 1s infinite;
        -o-animation: searchLights 1s ease-in 1s infinite;
        animation: searchLights 1s ease-in 1s infinite
    }

    .logo-site img,.logo-sites img {
        transition-duration: .5s
    }
}

</style>

</head>
<body >
<div class="logo-site"><img width="150" src="https://pic.kuaizhan.com//g3/88/82/c450-46b7-422f-a1ab-1508d630e10715.png" alt="" /></div>
</body>
</html>