不显示不知道什么问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5css作业</title>
<link rel="stylesheet" type="text/css" href="css/sssss.css">
</head>
<body>
<div class="top">
<div class="cloud box1"></div>
<div class="cloud box2"></div>
<div class="cloud box3"></div>
<div class="colud box4"></div>
<div class="colud box5"></div>
</div>
<div class="bottom">
<div class="rabbit">
<img src="img/rabbit.png">
</div>
</div>
</body>
</html>
/*天空草地的样式*/
.top{
height: 60vh;
position: relative;
-webkit-background:linear-gradient(rgb(196,228,253),rgb(255,255,255));
-moz-background:linear-gradient(rgb(196,228,253),rgb(255,255,255));
-o-background:linear-gradient(rgb(196,228,253),rgb(255,255,255));
background: linear-gradient(rgb(196,228,253),rgb(255,255,255));
}
.bottom{
height: 40vh;
position: relative;
-webkit-background: linear-gradient(rgb(255,255,255),rgb(148,190,89));
-moz-background: linear-gradient(rgb(255,255,255),rgb(148,190,89));
-o-background: linear-gradient(rgb(255,255,255),rgb(148,190,89));
background: linear-gradient(rgb(255,255,255),rgb(148,190,89));
}
/*rabbit*/
.rabbit{
width: 300px;
height: 300px;
position: absolute;
bottom: 50px;
right: 200px;
}
.rabbit img{
width: 100%;
height: 200%;
}
/*cloud样式*/
.cloud{
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
}
.clocud:before{
content: '';
width: 180px;
height: 45px;
display: absolute;
display: block;
top: 45px;
left: -60px;
border-radius: 45px;
background-color: #fff;
}
.clocud:abter{
height: 45px;
width: 90px;
content: " ";
display:block;
position: absolute;
top: 40px;
left: -50px;
border-radius: 45px;
transform: rotate(-125deg);
background-color: #fff;
}
/*box的动画及缩放*/
.top > div{
position: absolute;
}
.box1{
top: 10px;
opacity: 0.7;
transform: scale(0.6);
animation: one 7s ease-in infinite;
}
.box2{
top: 150px;
opacity: 0.7;
transform: scale(0.6);
animation: two 8s ease-in infinite;
}
.box3{
top: 80px;
opacity: 1;
transform: scale(0.8);
animation: three 6s ease-in infinite;
}
.box4{
top: 130px;
opacity: 0.6;
transform: scale(0.4);
animation: four 10s ease-in infinite;
}
.box5{
top: 10px;
opacity: 0.7;
transform: scale(0.6);
animation: five 9s ease-in infinite;
}
@keyframes one{
form{
right: -120px;
}
to{
right: 150%;
}
}
@keyframes tow{
form{
right: -120px;
}
to{
right: 150%;
}
}
@keyframes three{
form{
right: -400px;
}
to{
right: 150%;
}
}
@keyframes form{
from{
right: -120px;
}
to{
right: 150%;
}
}
@keyframes five{
form{
right: -120px;
}
to{
right: 150%
}
}
正在回答
你好同学 ，老师这边测试，页面是可以显示的，不显示具体指的什么？是同学那边整个页面都不显示，还是说绘制的圆形不显示或者其他？请同学再详细描述一下，以便老师准确高效的进行解答。
祝学习愉快 ，望采纳。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星