关注公众号
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://y.goolibao.com/content/uploadfile/tpl_options//logoimg.png" alt="" /></div>
</body>
</html>
版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
