animation动画中的transform设置

来源：2-14 项目作业

且听风吟720

2019-08-21 12:18:59

老师好，最开始我在animation这个css文件中写动画效果，关键帧里用transform设置云的偏移，但是发现这样一来structure里设置的scale就无效了，想问问老师是什么原因呢？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小兔子动画</title>
<link rel="stylesheet" href="css/structure.css">
<link rel="stylesheet" href="css/animation.css">
</head>
<body>
<section class="sky">
<div class="cloud_1">
<div class="cloud"></div>
</div>
<div class="cloud_2">
<div class="cloud_new"></div>
</div>
<div class="cloud_3">
<div class="cloud"></div>
</div>
<div class="cloud_4">
<div class="cloud_new"></div>
</div>
<div class="cloud_5">
<div class="cloud"></div>
</div>
</section>
<section class="ground">
<img class="rabbit" src="img/rabbit.png"></img>
</section>
</body>
</html>

structure的css设置

/*清除全局默认样式*/
*{margin:0;padding:0;}

/*整体一个大的画布*/
section.sky{
width:100%;height:60vh;
position:relative;top:0;
background:linear-gradient(180deg,rgba(196,228,253,0.8),rgba(255,255,255,1));
overflow:hidden;
}
section.ground{
width:100%;height:40vh;
position:relative;bottom:0;
background:linear-gradient(0deg,rgba(148,190,89,0.8),rgba(255,255,255,1));
}

/*云朵的样式*/
/*定位用的外框，也是用来放云朵并缩放的框*/
.cloud_1{
width:380px;height:100px;
position:absolute;top:100px;right:-200%;
transform:scale(0.38);
opacity:0.9;
}
.cloud_2{
width:380px;height:100px;
position:absolute;top:150px;right:-200%;
transform:scale(0.5);
opacity:0.75;
}
.cloud_3{
width:380px;height:100px;
position:absolute;top:40px;right:-200%;
transform:scale(0.4);
opacity:0.95;
}
.cloud_4{
width:380px;height:100px;
position:absolute;top:120px;right:-200%;
transform:scale(0.25);
opacity:0.85;
}
.cloud_5{
width:380px;height:100px;
position:absolute;top:180px;right:-200%;
transform:scale(0.4);
opacity:0.95;
}

/*云朵的组成，主体和before为两个长条，after为一个椭圆*/
.cloud{
width:380px;height:80px;
background:rgba(255,255,255,1);
position:absolute;top:20px;
border-radius:10%/50%;
}
.cloud::before{
content:'';
width:200px;height:80px;
background:rgba(255,255,255,1);
position:absolute;top:-20px;left:20px;
border-radius:20%/50%;
transform:rotate(45deg);
}
.cloud::after{
content:'';
width:280px;height:230px;
background:rgba(255,255,255,1);
position:absolute;top:-130px;right:20px;
border-radius:50%;
}
/*另一种云朵的样式*/
.cloud_new{
width:380px;height:80px;
background:rgba(255,255,255,1);
position:absolute;top:20px;
border-radius:10%/50%;
}
.cloud_new::before{
content:'';
width:110px;height:80px;
background:rgba(255,255,255,1);
position:absolute;top:-40px;right:30px;
border-radius:50%;
}
.cloud_new::after{
content:'';
width:280px;height:230px;
background:rgba(255,255,255,1);
position:absolute;top:-130px;left:20px;
border-radius:50%;
}


/*兔子*/
.rabbit{
position:absolute;bottom:50px;right:200px;
width:200px;height:200px;
}

animation的css设置

/*第一朵云动画*/
.cloud_1{animation:cloud1 15s 9s infinite linear;}
@keyframes cloud1{
0%{right:100px;}
100%{right:1800px;}
}
/*第二朵云动画*/
.cloud_2{animation:cloud2 16s infinite linear;}
@keyframes cloud2{
0%{right:150px;}
100%{right:2000px;}
}
/*第三朵云动画*/
.cloud_3{animation:cloud3 20s 3s infinite linear;}
@keyframes cloud3{
0%{right:0;}
100%{right:2200px;}
}
/*第四朵云动画*/
.cloud_4{animation:cloud4 18s 5s infinite linear;}
@keyframes cloud4{
0%{right:50px;}
100%{right:2000px;}
}
/*第五朵云动画*/
.cloud_5{animation:cloud5 18s 7s infinite linear;}
@keyframes cloud5{
0%{right:180px;}
100%{right:1800px;}
}

写回答

1回答