为什么云动不起来

来源：2-15 作业题

慕仙0201785

2018-12-01 07:31:07

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--BACKGROUND-->
<div class="main">
<!--clouds-->
<div class="sky">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div class="earth"></div>
</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}

html,body{
	height: 100%;
}

/*background*/
.main{
	position: relative;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(rgb(196, 228, 253) 0%, #fff 60%,  rgb(148, 190, 89)100%);
	background: -moz-linear-gradient(rgb(196, 228, 253) 0%, #fff 60%,  rgb(148, 190, 89)100%);
	background: -ms-linear-gradient(rgb(196, 228, 253) 0%, #fff 60%,  rgb(148, 190, 89)100%);
	background: -o-linear-gradient(rgb(196, 228, 253) 0%, #fff 60%,  rgb(148, 190, 89)100%);
	background: linear-gradient(rgb(196, 228, 253) 0%, #fff 60%,  rgb(148, 190, 89)100%);
	z-index: 1;
}

/*cloud01*/
.x1{
	position: absolute;
    top: 70px;
    left: 35%;
	background: #ffffff;
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	transform: translate(0px,0px);
	animation: move-1 5s ease-out 6s infinite;
}

/*cloud02*/
.x2{
	position: absolute;
	top: 70px;
    left: 80%;
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	transform: translate(0px,0px);
	animation: move-2 5s ease-out 6s infinite;
}

/*cloud03*/
.x3{
	position: absolute;
	top: 150px;
    left: 47%;
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	transform: translate(0px,0px);
	animation: move-3 5s ease-out 6s infinite;
}

/*大cloud*/
.x4{
	position: absolute;
	top: -25px;
    left: 60%;
	transform: scale(1.3);
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	transform: translate(0px,0px);
	animation: move-4 5s ease-out 5s infinite;
}

/*小cloud*/
.x5{
	position: absolute;
	top: 60px;
    left: 75%;
	transform: scale(0.7);
	background: rgb(255,255,255);
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	transform: translate(0px,0px);
	animation: move-5 5s ease-out 5s infinite;
}

/*cloud样式*/
.cloud{
	position: relative;
	width: 200px;
	height: 60px;
	border-radius: 200px;
	background: #fff;
	margin-left: 65%;
}

.cloud:before,.cloud:after{
	position: absolute;
	position: absolute;
	top: -15px; left: 10px;
	width: 100px; height: 80px;
	content: '';
	transform: 100px;
	border-radius: 100px;
	background: #fff;
}

.cloud:after{
	top: -55px;
	right: 15px;
	left: auto;
	width: 120px;
	height: 120px;
	background: #fff;
}

@keytimes move-1 {
	0% {transform: translate(0px,0px);}
	50% {transform: translate(-1280px,0px);}
	100% {transform: translate(0px,0px);}
}

@keytimes move-2 {
	0% {transform: translate(0px,0px);}
	50% {transform: translate(-1550px,0px);}
	100% {transform: translate(0px,0px);}
}

@keytimes move-3 {
	0% {transform: translate(0px,0px);}
	50% {transform: translate(-1550px,0px);}
	100% {transform: translate(0px,0px);}
}

@keytimes move-4 {
	0% {transform: translate(0px,0px);}
	50% {transform: translate(-1550px,0px);}
	100% {transform: translate(0px,0px);}
}

@keytimes move-5{
	0% {transform: translate(0px,0px);}
	50% {transform: translate(-1550px,0px);}
	100% {transform: translate(0px,0px);}
}

写回答

1回答