如何使用CSS控制元素弧线运动

发布时间：2024-01-08 09:54:19 所属栏目：语言来源：DaWei

导读： 怎样用css控制元素做弧线运动？其实要实现元素做弧线运动的效果并不困难，本文有详细的实现思路及实现过程，感兴趣的朋友可以参考看看，接下来我们一起来学习一下吧。

我们都知道，CSS3的

怎样用css控制元素做弧线运动？其实要实现元素做弧线运动的效果并不困难，本文有详细的实现思路及实现过程，感兴趣的朋友可以参考看看，接下来我们一起来学习一下吧。

我们都知道，CSS3的新属性transfrom过渡效果可以实现元素位移、旋转、缩放。结合animation属性，就可以实现元素的动画效果。但是如何通过css实现元素实现弧线运动呢：

将小球的运动拆分成X轴和Y轴两个运动来看，此时X轴的小球是以（慢—快）这样的速度运动；
而Y轴的方向小球是以（快—慢）这样的速度运动；
结合两个轴的运动，实现弧线效果
三次贝塞尔（Cubic Bezier）函数

animation属性中有一个 animation-timing-function 属性，动画的速度函数。而这个属性使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。

可以通过这个网站传送门去实时调节曲线的取值。而animation-timing-function属性中已经提供了几个已经封装好的速度函数：也就是我们常用的 ease、linear、ease-in、ease-out、ease-in-out。

首先我们能想到的就是将X轴Y轴的位移动画拆开。但是一个元素的动画同一时间只能执行一个动画（最后申明的）。所以我们可以换位思考，用两个父子元素。给父级元素添加X轴位移动画，给子元素增加Y轴位移动画，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素弧线运动</title>
<style>
.box{
width: 400px;
height: 400px;
border: 2px solid #ff8800;
}
span{
display: block;
width: 40px;
height: 40px;
border: 1px solid #222;
animation: center1 2s ease-in forwards;

}
span:after{
content: '';
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: greenyellow;
animation: center2 2s ease-out forwards;
}
@keyframes center1 {
to{transform: translateX(360px)}
}
@keyframes center2 {
to{transform: translateY(360px)}
}
</style>
</head>
<body>
<div class="box">
<span></span>
</div>
</body>
</html>

此时还是能比较明显的看出绿色小球是做的弧线运动。

以上就是关于用css控制元素做弧线运动的实现及代码，需要的朋友可以参考，希望对大家学习CSS有帮助。

（编辑：宁德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!