仿灯光闪过效果

最新推荐文章于 2022-12-26 16:30:37 发布

产品椒麻鸡

最新推荐文章于 2022-12-26 16:30:37 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/qq_37986229/article/details/73863250

版权

以下就是仿照灯光闪过的效果，突出标题文字这样的功能做的一个动画，希望可以帮助你

<!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>