网站logo-图片自动出现一道白色闪光划过
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.logo-site {
position: relative;
width: 255px;
overflow: hidden;
}
.logo-site:before{
content:"";
position: absolute;
/*注意这里top和left，让白光移动到图片左上角，
后续的划过动画也是依靠这两个属性*/
left: -800px;
top: -460px;
/*定义白光的宽高*/
width: 350px;
height: 30px;
/*使用渐变来实现白光*/
background: -webkit-linear-gradient(left, rgba(255, 255, 255, .05) 20%, rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%);
background: linear-gradient(left, rgba(255, 255, 255, .05) 20%,rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%);
/*旋转角度，你也可以调整*/
-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;
-moz-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 1s ease-in 1s infinite;
}
@-webkit-keyframes searchLights {
0% { left: -250px; top: 0; }
to { left: 200px; top: 200px; }
}
@-o-keyframes searchLights {
0% { left: -250px; top: 0; }
to { left: 200px; top: 200px; }
}
@-moz-keyframes searchLights {
0% { left: -250px; top: 0; }
to { left: 200px; top: 200px; }
}
@keyframes searchLights {
0% { left: -250px; top: 0; }
to { left: 120px; top: 200px; }
}
</style>
</head>
<body>
<div class="logo-site">
<img src="img/test.png" alt="风景"/>
</div>
</body>
</html>
页:
[1]