生成一段下雨天的html动画代码
时间: 2023-11-14 11:48:40 浏览: 157
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下雨天动画</title>
<style>
body {
background-color: #9dc3e6;
}
.raindrop {
position: absolute;
background-color: #b7d7f0;
border-radius: 50%;
animation-name: drop;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.raindrop:nth-child(1) {
left: 10%;
top: 5%;
animation-delay: 0.5s;
}
.raindrop:nth-child(2) {
left: 20%;
top: 10%;
animation-delay: 1s;
}
.raindrop:nth-child(3) {
left: 30%;
top: 7%;
animation-delay: 1.5s;
}
.raindrop:nth-child(4) {
left: 40%;
top: 3%;
animation-delay: 2s;
}
.raindrop:nth-child(5) {
left: 50%;
top: 8%;
animation-delay: 2.5s;
}
.raindrop:nth-child(6) {
left: 60%;
top: 6%;
animation-delay: 1s;
}
.raindrop:nth-child(7) {
left: 70%;
top: 2%;
animation-delay: 2s;
}
.raindrop:nth-child(8) {
left: 80%;
top: 9%;
animation-delay: 0.5s;
}
.raindrop:nth-child(9) {
left: 90%;
top: 4%;
animation-delay: 1.5s;
}
@keyframes drop {
0% {
transform: translateY(-50px) scale(0.5);
opacity: 0;
}
50% {
transform: translateY(200px) scale(1);
opacity: 1;
}
100% {
transform: translateY(400px) scale(0.5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
</body>
</html>
阅读全文