<!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>动画风景图</title>
<style>
.border{
width:900px;
height:600px;
border:3px solid black;
background:rgb(139, 195, 241);
margin:100px auto;
position:relative;
overflow: hidden;
}
.cloud{
width:100px;
height:100px;
position:absolute;
top:15px;
left:30px;
animation:run1 3s linear infinite alternate;
}
@keyframes run1{
from{
left:30px;
}
to{
left:500px;
}
}
.cloud1{
width: 65px;
height: 49px;
background: white;
border-radius: 50%;
position: absolute;
top: 24px;
left: 0px;
}
.cloud2{
width: 100px;
height: 71px;
background: white;
border-radius: 50%;
position: absolute;
top: 0px;
left: 20px;
}
.cloud3{
width: 70px;
height: 50px;
background: white;
border-radius: 50%;
position: absolute;
top: 24px;
left: 79px;
}
.mountain1{
width: 300px;
height: 300px;
background: green;
border-radius: 85px;
transform: rotate(53deg);
position: absolute;
bottom: -128px;
left: 0px;
}
.mountain2{
width: 500px;
height: 500px;
background: green;
border-radius: 85px;
transform: rotate(49deg);
position: absolute;
bottom: -260px;
left: 170px;
}
.mountain3{
width: 300px;
height: 300px;
background: green;
border-radius: 85px;
transform: rotate(53deg);
position: absolute;
bottom: -128px;
right: 0px;
}
.sun{
width:100px;
height:100px;
background:yellow;
border-radius:50%;
position:absolute;
top:10px;
left:700px;
animation:run2 3s linear;
}
@keyframes run2{
0%{
top:410px;
left:-100px;
}
25%{
top:300px;
left:100px;
}
50%{
top:380px;
left:220px;
}
75%{
top:200px;
left:380px;
}
100%{
top:10px;
left:700px;
}
}
.windmill{
width: 100px;
height: 160px;
position: absolute;
bottom: 130px;
right: 150px;
}
.one{
width:10px;
height:100px;
background: rgb(222,184,153);
position: absolute;
bottom: 21px;
left:36px;
}
.windmill-head{
width: 70px;
height: 70px;
position: absolute;
top:0px;
left:5px;
animation:run3 1s linear infinite;
}
.two{
width:10px;
height: 70px;
background:white;
border-radius:50%;
position:absolute;
top:0px;
left:27px;
}
.three{
width:10px;
height: 70px;
background:white;
border-radius:50%;
transform: rotate(90deg);
position:absolute;
top:0px;
left:27px;
}
@keyframes run3{
form{
transform:rotate(90deg);
}
to{
transform:rotate(360deg);
}
}
.plant{
width: 100px;
height: 100px;
position: absolute;
top:103px;
right:-100px;
animation:run4 3s linear infinite;
}
.plant-head{
width: 100px;
height: 24px;
border-radius: 38px 50px 12px 12px;
background: white;
position: absolute;
top: 50px;
}
.plant-body{
width: 81px;
height: 16px;
border-radius: 50%;
background: white;
position: absolute;
top: 53px;
left: 0px;
transform: rotate(63deg);
}
@keyframes run4{
from{
right:-100px;
}
to{
right:1000px;
}
}
</style>
</head>
<body>
<div class="border">
<div class="cloud">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
</div>
<div class="sun"></div>
<div class="plant">
<div class="plant-head"></div>
<div class="plant-body"></div>
</div>
<div class="windmill">
<div class="one"></div>
<div class="windmill-head">
<div class="two"></div>
<div class="three"></div>
</div>
</div>
<div class="mountain1"></div>
<div class="mountain2"></div>
<div class="mountain3"></div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
