兔子的定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="sky"> <div class="clouds"></div> <div class="clouds"></div> <div class="clouds"></div> <div class="clouds"></div> <div class="clouds"></div> </div> <div class="grass"> <img src="rabbit.png"> </div> </body> </html>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.sky{
width:100%;
height:60%;
position:relative;
background:-webkit-linear-gradient(rgb(196, 228, 253) 40%,rgba(196, 228, 253,0));
}
.grass{
position:relative;
width:100%;
height:40%;
background:-webkit-linear-gradient(rgba(148, 190, 89,0) 20%,rgb(148, 190, 89));
}
.sky>.clouds{
position:absolute;
width:100px;
height:100px;
background:#fff;
border-radius:50%;
}
.sky>.clouds::before{
content:'';
width:70px;
height:70px;
position:absolute;
background:#fff;
left:-30px;
top:30px;
border-radius:50%;
}
.sky>.clouds::after{
width:90px;
height:70px;
position:absolute;
background:#fff;
content:'';
left:50%;
top:30%;
border-radius:50%;
}
.sky>.clouds:nth-child(1){
top:50px;
left:750px;
transform:scale(0.8,0.8);
}
.sky>.clouds:nth-child(2){
top:10px;
left:550px;
transform:scale(0.7,0.7);
opacity:0.9;
}
.sky>.clouds:nth-child(3){
top:100px;
left:650px;
transform:scale(0.6,0.6);
opacity:0.7;
}
.sky>.clouds:nth-child(4){
top:80px;
right:350px;
transform:scale(0.4,0.4);
opacity:0.5;
}
.sky>.clouds:nth-child(5){
top:10px;
right:250px;
transform:scale(0.5,0.5);
}
img{
transform:scale(0.1);
position:absolute;
right:200px;
bottom:50px;
}兔子要怎么定位啊，我的代码没问题啊，怎么兔子跑到天上了
1
收起
正在回答
1回答
建议给兔子设置宽度和高度，不要设置transform:scale()缩放
希望可以帮到你！
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星