老师为什么我的动不了
来源：2-14 项目作业
慕瓜9075555
2020-02-28 16:23:45
<!DOCTYPE html>
<html>
<head>
<title>rabbit</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<!-- main -->
<div class="main">
<!-- 天空 -->
<div class="sky">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 草地 -->
<div class="grass">
<!-- 兔子 -->
<img src="rabbit.png">
</div>
</div>
</body>
</html>
————————————————————————————————
/*全局变量*/
*{
margin: 0;
padding: 0;
}
/*main*/
.main{
width: 100%;
height: 700px;
}
/*天空*/
.sky{
position: relative;
width: 100%;
height: 60%;
background: linear-gradient(rgb(196, 228, 253),rgba(196, 228, 253,0));
}
/*草地*/
.grass{
position: relative;
width: 100%;
height: 40%;
background: linear-gradient(rgba(148, 190, 89,0),rgb(148, 190, 89));
}
/*兔子*/
.grass img{
height: 150px;
width: 150px;
position: absolute;
bottom: 50px;
right: 200px;
}
/*云*/
.sky div{
position: absolute;
background: white;
border-radius: 50%;
}
/*第一块云*/
.sky div:nth-child(1){
height: 60px;
width: 60px;
top:-10px;
animation: one 25s ease 10s infinite;
}
.sky div:nth-child(1)::before{
position: absolute;
content: "";
display: block;
height: 30px;
width: 110px;
top: 25px;
left: -40px;
background: white;
border-radius: 15px 15px;
}
.sky div:nth-child(1):after{
position: absolute;
content: "";
display: block;
height: 30px;
width: 50px;
top: 20px;
left: -30px;
background: white;
border-radius: 15px 15px;
transform: rotate(50deg);
}
/*第二块云*/
.sky div:nth-child(2){
height: 50px;
width: 50px;
top:10px;
animation: two 10s ease 6s infinite;
opacity: .9;
}
.sky div:nth-child(2)::before{
position: absolute;
content: "";
display: block;
height: 25px;
width: 95px;
top: 20px;
left: -35px;
background: white;
border-radius: 12.5px 12.5px;
}
.sky div:nth-child(2):after{
position: absolute;
content: "";
display: block;
height: 25px;
width: 45px;
top: 15px;
left: -25px;
background: white;
border-radius: 12.5px 12.5px;
transform: rotate(50deg);
}
/*第三块云*/
.sky div:nth-child(3){
height: 50px;
width: 50px;
top:30px;
animation: three 15s ease 10s infinite;
opacity: .6;
}
.sky div:nth-child(3)::before{
position: absolute;
content: "";
display: block;
height: 25px;
width: 95px;
top: 20px;
left: -35px;
background: white;
border-radius: 12.5px 12.5px;
}
.sky div:nth-child(3):after{
position: absolute;
content: "";
display: block;
height: 25px;
width: 45px;
top: 15px;
left: -25px;
background: white;
border-radius: 12.5px 12.5px;
transform: rotate(50deg);
}
/*第四块云*/
.sky div:nth-child(4){
height: 50px;
width: 50px;
top: 50px;
animation: four 13s ease 5s infinite;
opacity: .8;
}
.sky div:nth-child(4)::before{
position: absolute;
content: "";
display: block;
height: 25px;
width: 95px;
top: 20px;
left: -35px;
background: white;
border-radius: 12.5px 12.5px;
}
.sky div:nth-child(4):after{
position: absolute;
content: "";
display: block;
height: 25px;
width: 45px;
top: 15px;
left: -25px;
background: white;
border-radius: 12.5px 12.5px;
transform: rotate(50deg);
}
/*第五块云*/
.sky div:nth-child(5){
height: 30px;
width: 30px;
top: 100px;
animation: five 3s ease 10s infinite;
opacity: .6;
}
.sky div:nth-child(5)::before{
position: absolute;
content: "";
display: block;
height: 15px;
width: 55px;
top: 11px;
left: -20px;
background: white;
border-radius: 7.5px 7.5px;
}
.sky div:nth-child(5):after{
position: absolute;
content: "";
display: block;
height: 15px;
width: 25px;
top: 10px;
left: -13px;
background: white;
border-radius: 7.5px 7.5px;
transform: rotate(50deg);
}
/*动画效果*/
@keyframes one{
form{
right: 10%;
}
to{
right: 100%;
}
}
@keyframes two{
form{
right: -100px;
}
to{
left: -100px;
}
}
@keyframes three{
form{
right: -100px;
}
to{
left: -100px;
}
}
@keyframes four{
form{
right: -100px;
}
to{
left: -100px;
}
}
@keyframes five{
form{
right: -100px;
}
to{
left: -100px;
}
}
1回答
-
同学你好，是动画的问题：
起始应该是from，而form是表单，所以动画没有生效；位置上可以再调整下，动画从最右侧飘出来而不是突然出现
内容从页面右侧飘出水平方向上会有滚动条，可以设置超出隐藏：
自己再测试下，如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题