<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
.wrap { | |
width: 350px; | |
height: 150px; | |
border: 5px solid #000; | |
border-radius: 40px; | |
margin: 100px auto; | |
display: flex; | |
justify-content: space-evenly; | |
align-items: center; | |
} | |
.wrap div { | |
width: 100px; | |
height: 100px; | |
border-radius: 50%; | |
animation: change .6s linear 1s infinite alternate; | |
} | |
.wrap div:nth-child(1) { | |
background-color: tomato; | |
} | |
.wrap div:nth-child(2) { | |
background-color: yellow; | |
animation-delay: 1.2s; | |
} | |
.wrap div:nth-child(3) { | |
background-color: green; | |
animation-delay: 1.4s; | |
} | |
/* 1 - 0.5 - 1.2 */ | |
@keyframes change { | |
0% { | |
transform: scale(1); | |
} | |
50% { | |
transform: scale(.5); | |
} | |
100% { | |
transform: scale(1.2); | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="wrap"> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</body> | |
</html> |
帧动画-红绿灯
最新推荐文章于 2023-05-13 23:13:14 发布