我的cloud1的动画效果有问题
来源：2-15 作业题
田马达加斯加
2018-09-12 19:41:59
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>蓝天白云绿草地</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<div class="main">
<!--蓝天-->
<div class="sky">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>
<div class="cloud cloud4"></div>
<div class="cloud cloud5"></div>
</div>
<!--草地-->
<div class="meadow">
<div class="rabbit">
<div class="body"></div>
<div class="leg right"></div>
<div class="leg"></div>
<div class="tail"></div>
<div class="head">
<div class="eye">
<div class="eyeball"></div>
</div>
<div class="eye left">
<div class="eyeball"></div>
</div>
<div class="beard-right"></div>
<div class="beard"></div>
<div class="nose"></div>
</div>
<div class="ear"></div>
<div class="ear right"></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var animationPlay=$('.colud1');
animationPlay.bind('webkitAnimationEnd',function(){
animationPlay.removeClass('cloud1');
animationPlay.addClass('colud1M');
})
</script>
</body>
</html>
*{
padding:0;
margin:0;
}
:root{
--t1:33s;
--t2:24s;
--t3:38s;
--t4:23s;
--t5:20s;
--tM:14s;
}
/*main部分样式设置*/
.main{
width:100%;
height:100vh;
}
/*sky部分样式设置*/
.sky{
width:100%;
height:60%;
background: rgb(196, 228, 253);
background:-webkit-linear-gradient(rgba(196, 228, 253,1) ,rgba(196, 228, 253,0));
background: -moz-linear-gradient(rgba(196, 228, 253,1) ,rgba(196, 228, 253,0) );
background: -o-linear-gradient(rgba(196, 228, 253,1) ,rgba(196, 228, 253,0) );
background: linear-gradient(rgba(196, 228, 253,1) ,rgba(196, 228, 253,0));
position:relative;
overflow:hidden;
}
.cloud{
width:105px;
height:35px;
background:#fff;
position:relative;
border-radius:80px/50px 53px 51px 50px;
-webkit-transform:rotate(377deg);
-moz-transform:rotate(377deg);
-ms-transform:rotate(377deg);
-o-transform:rotate(377deg);
transform:rotate(377deg);
}
.cloud::before{
position:absolute;
content:"";
display:block;
width:35px;
height:55px;
background:#fff;
border-radius:35px/30px 25px 50px 35px;
left:14px;
top:-13px;
-webkit-transform:rotate(330deg);
-moz-transform:rotate(330deg);
-ms-transform:rotate(330deg);
-o-transform:rotate(330deg);
transform:rotate(330deg);
}
.cloud::after{
position:absolute;
content:"";
display:block;
width:58px;
height:68px;
background:#fff;
border-radius:58px/50px 58px 70px 60px;
left:39px;
top:-27px;
-webkit-transform:rotate(354deg);
-moz-transform:rotate(354deg);
-ms-transform:rotate(354deg);
-o-transform:rotate(354deg);
transform:rotate(354deg);
}
.cloud1{
position:absolute;
top:50px;
left:650px;
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
opacity: 0.6;
animation:floatM var(--tM) ease;
}
.cloud1M{
position:absolute;
top:50px;
left:650px;
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
opacity: 0.6;
animation:float var(--t1) ease-out infinite;
}
.cloud2{
position:absolute;
top:110px;
/*left:190px;*/
-webkit-transform:scale(0.55) rotate(5deg);
-moz-transform:scale(0.55) rotate(5deg);
-ms-transform:scale(0.55) rotate(5deg);
-o-transform:scale(0.55) rotate(5deg);
transform:scale(0.55) rotate(5deg);
opacity: 0.7;
animation:float var(--t2) ease infinite;
}
.cloud3{
position:absolute;
top:45px;
/*left:30px;*/
-webkit-transform:scale(0.7) rotate(3deg);
-moz-transform:scale(0.7) rotate(3deg);
-ms-transform:scale(0.7) rotate(3deg);
-o-transform:scale(0.7) rotate(3deg);
transform:scale(0.7) rotate(3deg);
opacity: 0.9;
animation:float var(--t3) ease infinite;
}
.cloud4{
position:absolute;
top:65px;
-webkit-transform:scale(0.6) rotate(3deg);
-moz-transform:scale(0.6) rotate(3deg);
-ms-transform:scale(0.6) rotate(3deg);
-o-transform:scale(0.6) rotate(3deg);
transform:scale(0.6) rotate(3deg);
animation:float var(--t4) ease-out .4s infinite;
}
.cloud5{
position:absolute;
top:20px;
/*left:70px;*/
-webkit-transform:scale(0.63) rotate(4deg);
-moz-transform:scale(0.63) rotate(4deg);
-ms-transform:scale(0.63) rotate(4deg);
-o-transform:scale(0.63) rotate(4deg);
transform:scale(0.63) rotate(4deg);
animation:float var(--t5) ease-out .2s infinite;
}
/*meadow部分样式设置*/
.meadow{
height:40%;
position:relative;
background:rgb(148, 190, 89);
background:-webkit-linear-gradient(rgba(148, 190, 89,0),rgba(148, 190, 89,0.7) 63%,rgba(148, 190, 89,1) );
background: -moz-linear-gradient(rgba(148, 190, 89,0),rgba(148, 190, 89,0.7) 63%,rgba(148, 190, 89,1) );
background: -o-linear-gradient(rgba(148, 190, 89,0) ,rgba(148, 190, 89,0.7) 63%,rgba(148, 190, 89,1) );
background: linear-gradient(rgba(148, 190, 89,0) ,rgba(148, 190, 89,0.7) 63%,rgba(148, 190, 89,1) );
}
@keyframes float{
0%{
left:1350px;
}
100%{
left:-50px;
}
}
@keyframes floatM{
0%{
left:650px;
}
100%{
left:-50px;
}
}
.rabbit{
width:300px;
position:absolute;
bottom:50px;
left:75%;
transform:scale(0.7);
}
.tail{
position:absolute;
width:60px;
height:85px;
top:-24px;
right:113px;
border-radius:85px/68px 85px 132px 63px;
background:#fff;
z-index:-1;
}
.body{
width:150px;
height:100px;
background:#f8f9f7;
border-radius:199px 228px 297px 369px;
transform:rotate(-27deg);
box-shadow: 0px -52px 97px 0px #cfd8cf inset;
z-index:3;
position:relative;
}
.body::before{
content:'';
display:block;
position:absolute;
top:37px;
left:67px;
background:#f8f9f7;
width:60px;
height:91px;
border-radius:71px 175px 138px 100px;
box-shadow:5px -51px 40px -7px #cfd8cf inset;
transform:rotate(5deg) skewY(-22deg);
}
.body::after{
content:'';
display:block;
width:75px;
height:35px;
position:absolute;
top:86px;
left:21px;
background:#f8f9f7;
border-radius:366px 83px 55px 357px/100px;
box-shadow:-34px -41px 45px -16px #cfd8cf inset;
transform:rotate(24deg);
}
.leg{
width:50px;
height:25px;
position:absolute;
top:87px;
left:-1px;
background:#f8f9f7;
border-radius:69px 97px 77px 55px/40px;
box-shadow:28px -39px 16px -34px #cfd8cf inset;
transform:rotate(-40deg);
z-index:4;
}
.leg.right{
transform:translate(-11px,-15px) rotate(-35deg);
box-shadow:-55px 32px 23px -34px #cfd8cf inset;
z-index:1;
}
.head{
position:absolute;
left:-115px;
top:-65px;
width:150px;
height:150px;
background:#fff;
border-radius:75% 53% 62% 61%;
transform:translate(0px,0px) rotate(-36deg);
z-index:5;
overflow:hidden;
}
.head .eye{
width:50px;
height:35px;
background:#838384;
border-radius:50px/35px 50px 35px 50px;
position:absolute;
left:65px;
top:50px;
transform:rotate(-5deg);
z-index:1;
}
.head .eyeball{
width:15px;
height:10px;
background:#fff;
border-radius:15px/11px 14px 12px 15px;
transform:translate(26px,9px) rotate(5deg);
}
.head .eye.left{
transform:translate(-2px,-64px) rotate(5deg);
}
.head .nose{
position:absolute;
top:30px;
left:35px;
width:22px;
height:30px;
background:#838384;
border-radius:25px/62px 60px 18px 19px;
transform:rotate(20deg) skewY(27deg);
z-index:3;
}
.head .beard{
width:25px;
height:21px;
background:#fff;
border-radius:19px 14px 35px 35px;
box-shadow:-1px 2px 0px 0px #a7a6a6;
transform:translate(27px,-7px) rotate(67deg);
}
.head .beard-right{
width:48px;
height:30px;
background:#fff;
border-radius:40px/21px 11px 35px 35px;
box-shadow:-1px 2px 0px 0px #a7a6a6;
transform: translate(13px,55px) rotate(76deg);
}
.ear{
position:absolute;
left:21px;
top:-217px;
width:55px;
height:200px;
background:#f8f9f7;
border-radius:55px/226px 213px 78px 181px;
transform:rotate(-139deg);
box-shadow: 0px 80px 54px 0px #cfd8cf inset;
}
.ear.right{
transform:scale(-1,1) translate(-49px,48px) rotate(-241deg);
}
cloud1设置了两个动画先从中间飘到左边，
然后设置的从最右边网最左边漂浮的动画为什么出不来呢，麻烦老师给看看
1回答
-
好帮手慕星星
2018-09-13
监听动画结束的事件可以使用js来完成，参考：
白云移动的位置，建议不要设置固定像素，不同的显示器分辨率不同，显示效果也会不同，所以可以设置100%。
自己测试下，祝学习愉快~~
0
相似问题