0
我用css动画有3只鸟。目前所有三只鸟都是直线进入画布内,但是鸟不像这样飞。我想实现的明确描述在图片中。我想要控制鸟儿在旅行的每一个阶段飞向帆布的飞行方向。任何人都可以帮助我实现它吗?用css动画元素方向控制
我的代码
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="canvas">
<img class="people" src="https://i.imgsafe.org/9967e45cc8.png" alt="">
<img class="bird-1" src="https://i.imgsafe.org/996ac926a0.png" alt="">
<img class="bird-2" src="https://i.imgsafe.org/996bc03236.png" alt="">
<img class="bird-3" src="https://i.imgsafe.org/996cfb24a4.png" alt="">
</div>
</body>
</html>
CSS
body{
margin: 0;
}
.canvas{
background-color: lightgrey;
width: 300px;
height: 250px;
position: relative;
left: 30%;
top: 20%;
overflow: hidden;
}
.logo,
.people{
position: absolute;
}
.bird-1{
position: absolute;
width: 50px;
-webkit-animation: first 2s linear forwards;
animation: first 2s linear forwards;
top: -70px;
left: 55px;
}
.bird-2{
position: absolute;
width: 50px;
-webkit-animation: second 2s linear forwards;
animation: second 2s linear forwards;
top: 165px;
left: -50px;
}
.bird-3{
position: absolute;
width: 50px;
-webkit-animation: third 2s linear forwards;
animation: third 2s linear forwards;
top: 163px;
right: -50px;
transform: rotateY(180deg);
}
@-webkit-keyframes first{
0%{top: -70px;}
100%{top:65px;}
}
@-webkit-keyframes second{
0%{left: -50px;}
100%{left:15px;}
}
@-webkit-keyframes third{
0%{right: -50px;}
100%{right:135px;}
}
感谢Zetura,我会尽快回复你:) ..干杯 –