Question

我有三只鸟用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;}
}

My PEN

Answer 1

您必须以特定速度（带曲线）在X轴上创建移动，并以另一速度创建Y轴移动。您可以查看本教程，它应该为您提供在CSS中执行此操作所需的一切： http://tobiasahlin.com/blog/curved-path-animations-in-css/

您还可以为每只鸟创建一个SVG路径并使用此技术，但它需要JavaScript：http://icanbecreative.com/article/animate-element-along-svg-path/

用css动画控制元素方向

1 个答案: