为什么scale没效果？平移的方式对吗？
来源：2-14 项目作业
慕仰3297879
2019-12-27 17:29:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>project</title>
<style>
*{
padding: 0;
margin:0;
}
.sky{
width: 100%;
height: 630px;
background-color: rgb(196, 228, 253);
background: linear-gradient(rgb(196, 228, 253) 30%, #fff 100%);
}
.grass{
width: 100%;
height: 491px;
background-color: rgb(148, 190, 89);
background: linear-gradient( #fff 30%,rgb(148, 190, 89)100% )
}
.cloud{
width: 60px;
height: 60px;
border:20px solid #fff;
border-radius: 50%;
background-color: #fff;
position: relative;
margin-left: 200px;
margin-bottom: 100px;
top: -400px;
}
.cloud::before{
content: "";
display: block;
width: 100px;
height: 35px;
border:12px solid #fff;
border-radius: 45px;
position: absolute;
top: 5px;
left: -75px;
transform: rotate(40deg);
background-color: #fff;
}
.cloud::after{
content: "";
display: block;
width: 170px;
height: 35px;
border:12px solid #fff;
border-radius: 45px;
position: absolute;
top: 14px;
left: -75px;
background-color: #fff;
}
.cloud1{
position: absolute;
top: 100px;
left:2200px ;
transform: scale(1.5);
animation: cloud1 5s linear .5s infinite;
}
.cloud2{
position: absolute;
top: 0px;
left:2200px ;
transform: scale(.7);
animation: cloud2 6s linear 2s infinite;
}
.cloud3{
position: absolute;
top: 0px;
left:2300px ;
transform: scale(.9);
animation: cloud3 7s linear 1s infinite;
}
.cloud4{
position: absolute;
top: 150px;
left:2600px ;
transform: scale(1.2);
animation: cloud4 5s linear .5s infinite;
}
.cloud5{
position: absolute;
top: 0px;
left:2500px ;
transform: scale(.8);
animation: cloud5 6s linear 1.5s infinite;
}
@keyframes cloud1{
from{transform: translate(0px);}
to{transform: translate(-2600px);}
}
@keyframes cloud2{
from{transform: translate(0px);}
to{transform: translate(-2700px);}
}
@keyframes cloud3{
from{transform: translate(0px);}
to{transform: translate(-2700px);}
}
@keyframes cloud4{
from{transform: translate(0px);}
to{transform: translate(-2700px);}
}
@keyframes cloud5{
from{transform: translate(0px);}
to{transform: translate(-2700px);}
}
</style>
</head>
<body>
<div class="sky"></div>
<div class="cloud1 cloud"></div>
<div class="cloud2 cloud"></div>
<div class="cloud3 cloud"></div>
<div class="cloud4 cloud"></div>
<div class="cloud5 cloud"></div>
<div class="grass"></div>
</body>
</html>
1回答
-
同学你好， 针对的你问题问题解答如下：
因为后面使用transform属性设置平移，覆盖了前面的的transform属性，所以导致缩放没有效果。
平移的方式是对的。
在作业区域是可以上传作业的，建议同学上传作业。会有批复作业的老师为你指导，并把问题与修改方案整理成文档发送给你，能够更好的帮助你完善作业。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 1
回答 2