css3实现动画
2020-07-14 本文已影响0人
一枚小菜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
<img src="https://img.kaikeba.com/91247101219102knom.png" alt="">
<span></span>
</p>
</body>
<style>
p img {
width: 50%;
vertical-align: middle;
border-style: none;
}
p {
width: 200px;
height: 60px;
background: url(https://img.kaikeba.com/91247101219102vdgj.png) no-repeat;
background-size: 100% 100%;
line-height: 40px;
position: relative;
left: 50%;
cursor: pointer;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
text-align: center;
}
/*infinite无限循环*/
p span {
width: 60px;
height: 42px;
position: absolute;
background: url(https://img.kaikeba.com/91247101219102dleq.png) no-repeat;
background-size: 100% 100%;
left: 53%;
animation: lxt 1s linear infinite;
-moz-animation: lxt 1s linear infinite;
-webkit-animation: lxt 1s linear infinite;
}
@keyframes lxt {
0% {
left: 10%;
opacity: .1;
}
20% {
left: 23%;
opacity: .8;
}
50% {
left: 33%;
opacity: 1;
}
70% {
left: 43%;
opacity: .8;
}
100% {
left: 63%;
opacity: .1;
}
}
</style>
</html>
效果
