5朵白云设置相同的帧动画?如何实现？

来源：2-14 项目作业

Moeykuang

2019-12-29 04:01:48

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Homework</title>
    <link rel="stylesheet" href="CSS/Homework.css">
</head>
<body>
    <!-- 天空 -->
    <div class="sky">
        <!-- 云 -->
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="cloud cloud3"></div>
        <div class="cloud cloud4"></div>
        <div class="cloud cloud5"></div>
    </div>
    <!-- 草坪 -->
    <div class="grass">
        <!-- 兔子 -->
        <img src="image/rabbit.png">
    </div>
</body>
</html>

CSS

    *{
	margin: 0;
	padding: 0;
}
html,body{
	height: 100%;
}
/* 天空的渐变 */
.sky{
	width: 100%;
	height: 60%;
	overflow: hidden;
	position: relative;
	background: webkit-linear-gradient(0deg, rgba(196, 228, 253, 0), rgba(196, 228, 253, 1));
	background:        linear-gradient(0deg, rgba(196, 228, 253, 0), rgba(196, 228, 253, 1));
}
/* 草坪的渐变 */
.grass{
	width: 100%;
	height: 40%;
	position: relative;
	background: webkit-linear-gradient(0deg, rgba(148, 190, 89, 1), rgba(148, 190, 89, 0));
	background:        linear-gradient(0deg, rgba(148, 190, 89, 1), rgba(148, 190, 89, 0));
}
/* 兔子 */
.grass img{
	width: 300px;
	height: 300px;
	position: absolute;
	right: 200px;
	bottom: 50px;
}
/* 云 */
.sky .cloud{
	width: 200px;
	height: 200px;
	position: absolute;
	border-radius: 50% 50%;
	background-color: #fff;
}
.sky .cloud::before{
	content: "";
	display: block;
	width: 350px;
	height: 110px;
	border-radius: 55px;
	background-color: #fff;
	transform: translate(-125px, 80px);
}
.sky .cloud::after{
	content: "";
	display: block;
	width: 180px;
	height: 140px;
	border-radius: 70px;
	background-color: #fff;
	transform: rotate(40deg) translate(-120px, 30px);
}
/* 5朵云的大小和位置 */
.sky .cloud1{
	top: 90px;
	opacity: .8;
	transform: scale(.9);
	animation: cloud1 linear 8s infinite;
}
.sky .cloud2{
	top: -40px;
	opacity: .7;
	transform: scale(.7);
	animation: cloud2 linear 14s infinite;
}
.sky .cloud3{
	top: 220px;
	opacity: .7;
	transform: scale(.6);
	animation: cloud3 linear 13.5s infinite;
}
.sky .cloud4{
	top: 210px;
	right: -200px;
	opacity: .6;
	transform: scale(.4);
	animation: cloud4 linear 18s 3s infinite;
}
.sky .cloud5{
	top: -45px;
	right: -240px;
	opacity: .8;
	transform: scale(.5);
	animation: cloud5 linear 12s 3s infinite;
}
/* 5朵云的动画 */
@keyframes cloud1{
	from {left:100%;}
	to   {left:-20%;}
}
@keyframes cloud2{
	from {left:75%;opacity: 0;}
	10%  {opacity: .7;}
	to   {left:-16%;}
}
@keyframes cloud3{
	from {left:88%;opacity: 0;}
	10%  {opacity: .7;}
	to   {left:-16%;}
}
@keyframes cloud4{
	from {left:100%;}
	to   {left:-10%;}
}
@keyframes cloud5{
	from {left:115%;}
	to   {left:-15%;}
}

写回答

1回答