以下就是仿照灯光闪过的效果,突出标题文字这样的功能做的一个动画,希望可以帮助你
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #333;
}
.shade{
top: 200px;
left: 100px;
position: relative;
width: 722px;
height: 240px;
overflow: hidden;
}
.shade>div:first-child{
width: 722px;
height: 240px;
position: absolute;
background: url(beltbg.png) no-repeat;
}
.shade>div:last-child{
position: absolute;
transform-origin:0 0;
left: -300px;
width: 40px;
height: 400px;
transform:rotate(-45deg);
overflow: hidden;
/* border: 1px solid #fff; */
animation: myfirst 1.5s forwards;
}
.shade>div:last-child div{
transform-origin:0 0;
width: 722px;
height: 240px;
-webkit-filter:brightness(10);
opacity: 0.9;
transform:rotate(45deg);
animation: myfirst2 1.5s forwards;
background: url(beltbg.png) no-repeat 200px;
}
@keyframes myfirst
{
from {
left: -300px;
}
to {
left: 700px;
}
}
@keyframes myfirst2
{
from {
background-position: 300px 0;
}
to {
background-position: -700px 0;
}
}
</style>
</head>
<body>
<div class="shade">
<div></div>
<div>
<div>
</div>
</div>
</div>
</body>
</html>