兔子定位问题
/*整体设置*/
*{
width: 100%;
padding: 0;
margin:0;
}
/*蓝天样式*/
.sky{
height: 50vh;
background:-webkit-linear-gradient(top,rgba(196, 228, 253,1) 0%,rgba(255, 255, 255,1) 100%);
background:-moz-linear-gradient(top,rgba(196, 228, 253,1) 0%,rgba(255, 255, 255,1) 100%);
background:-o-linear-gradient(top,rgba(196, 228, 253,1) 0%,rgba(255, 255, 255,1) 100%);
background:linear-gradient(top,rgba(196, 228, 253,1) 0%,rgba(255, 255, 255,1) 100%);
position: relative;
}
/*草地样式*/
.grass{
height: 50vh;
background:-webkit-linear-gradient(top,rgba(255, 255, 255,1) 0%,rgba(148, 190, 89,1) 100%);
background:-moz-linear-gradient(top,rgba(255, 255, 255,1) 0%,rgba(148, 190, 89,1) 100%);
background:-o-linear-gradient(top,rgba(255, 255, 255,1) 0%,rgba(148, 190, 89,1) 100%);
background:linear-gradient(top,rgba(255, 255, 255,1) 0%,rgba(148, 190, 89,1) 100%);
position: relative;
}
/*云朵*/
.cloud{
width: 100px;
height: 30px;
border-radius: 15px;
background: rgba(255,255,255,1);
position:absolute;
top: 50px;
left: 100%;
}
.cloud:before,.cloud:after{
content: "";
width: 50px;
height: 40px;
border-radius: 50px;
position: absolute;
transform:rotate(30deg);
background: rgba(255,255,255,1);
top: -5px;
left: 5px;
}
.cloud:after{
content: "";
width: 60px;
height: 60px;
border-radius: 50%;
top: -25px;
left: 30px;
}
.no1{
animation:fly 12s linear infinite;
opacity: 0.7;
transform:scale(1);
}
.no2{
animation:fly 10s linear infinite;
opacity: 0.7;
transform:scale(1.2);
top: 90px;
}
.no3{
animation:fly 11s linear infinite;
opacity: 0.8;
transform:scale(0.9);
top: 130px;
}
.no4{
animation:fly 12s linear 2s infinite;
opacity: 1;
transform:scale(0.8);
top: 55px;
}
.no5{
animation:fly 16s linear 1s infinite;
opacity: 0.6;
transform:scale(0.7);
top: 100px;
}
@keyframes fly{
0%{
right: 0px;
}
100%{
left: -100%;
}
}
/*图片设置*/
.grass img.rabbit{
position: absolute;
transform:scale(0.1);
right:200px;
bottom: 50px;
}想问下为什么缩放scale后兔子定位跑到了窗口上方？
62
收起
正在回答 回答被采纳积分+1
5回答
JERRYR00
2017-02-11 11:45:46
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rabbit</title> <link rel="stylesheet" type="text/css"href="css/style.css"> </head> <body> <section> <div class="cloud no1"></div> <div class="cloud no2"></div> <div class="cloud no3"></div> <div class="cloud no4"></div> <div class="cloud no5"></div> </section> <section> <img src="image/rabbit.png" class="rabbit"> </section> </body> </html>
JERRYR00
2017-02-11 11:44:00
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rabbit</title> <link rel="stylesheet" type="text/css"href="css/style.css"> </head> <body> <section> <div class="cloud no1"></div> <div class="cloud no2"></div> <div class="cloud no3"></div> <div class="cloud no4"></div> <div class="cloud no5"></div> </section> <section> <img src="image/rabbit.png"> </section> </body> </html>
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星