欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css3 实现元素弧线运动的示例代码

程序员文章站 2022-09-25 14:02:01
这篇文章主要介绍了css3 实现元素弧线运动的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-04-24...

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

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

css3 实现元素弧线运动的示例代码

如上图动画效果所示,圆球弧线运动,分析运动:

  • 将小球的运动拆分成x轴和y轴两个运动来看,此时x轴的小球是以 (慢—快) 这样的速度运动;
  • 而y轴的方向小球是以(快—慢)这样的速度运动;
  • 结合两个轴的运动,实现弧线效果

三次贝塞尔(cubic bezier)函数

animation属性中有一个 animation-timing-function 属性,动画的速度函数。而这个属性 使用名为三次贝塞尔(cubic bezier)函数的数学函数,来生成速度曲线。

css3 实现元素弧线运动的示例代码

cubic-bezier (x1,y1,x2,y2):(三次贝塞尔函数的具体含义请查阅相关资料):

css3 实现元素弧线运动的示例代码 
 

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

css3 实现元素弧线运动的示例代码

效果实现

首先我们能想到的就是将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>

此时我用的是元素的伪类after替代了子元素,效果一样.给span一个给色border可以观察两个元素分别的运动轨迹,以便于观察,动画效果如下:

css3 实现元素弧线运动的示例代码

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

扩展:

此时如果觉得弧线不够大不够明显,我们可以自己调整次贝塞尔(cubic bezier)函数的值。根据网站 传送门 。

  • 选择ease-in 的曲线效果,此时我们改变 x1,y1的值(将红色点向右拉)。然后复制此时的cubic-bezier()值。将这个值取代原本span的动画 ease-in 的位置。
  • 选择ease-out 的曲线效果,此时我们改变 x2,y2的值(将蓝色点向右拉)。然后复制此时的cubic-bezier()值。将这个值取代原本span伪类after 的动画 ease-out 的位置。

此时的css代码如下:

 

span{
            display: block;
            width: 40px;
            height: 40px;
            border: 1px solid #222;
            animation: center1 2s cubic-bezier(.66,.01,1,1) 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 cubic-bezier(0,0,.36,1) forwards;
        }

而此时的动画效果的弧线,就更加的明显了:
 

css3 实现元素弧线运动的示例代码

到此这篇关于css3 实现元素弧线运动的示例代码的文章就介绍到这了,更多相关css3元素弧线运动内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!