代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<div style="display: flex;">
<div class="box blink1 "></div>
<div class="box blink2 "></div>
<div class="box blink3 "></div>
</div>
<div class="box-2">
<div class="box-content"></div>
</div>
<style>
.box-2{
position: relative;
width: 800px;
height: 50px;
}
.box-content{
position: absolute;
left: 0;
width: 50px;
height: 50px;
animation: 5s moveRightLeft 0s infinite;
background-color: burlywood;
}
@keyframes moveRightLeft{
0% {
left:0px;
}
50% {
left: 750px;
}
100%{
left: 0px;
}
}
.box{
width: 150px;
height: 35px;
background-color: blueviolet;
margin-left: 5px;
}
.blink1 {
animation: 3s opacity2 0s infinite;
}
.blink2 {
animation: 3s opacity2 0s infinite;
animation-delay: 1s;
}
.blink3 {
animation: 3s opacity2 0s infinite;
animation-delay: 2s;
}
@keyframes opacity2 {
0% {
opacity: 0
}
100% {
opacity: 1;
}
}
</style>
</body>
</html>
大有博文