介绍
这篇文章将为大家详细讲解有关css3如何实现元素弧线运动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<>强如何使用CSS控制元素弧线运动
我们都知道,css3的新属性transfrom过渡效果可以实现元素位移,旋转,缩放。结合动画属性,就可以实现元素的动画效果。但是如何通过CSS实现元素实现弧线运动呢:
如上图动画效果所示,圆球弧线运动,分析运动:
<李> 将小球的运动拆分成X轴和Y轴两个运动来看,此时X轴的小球是以(慢,终止,快)这样的速度运动;
<李> 而Y轴的方向小球是以(快,终止,慢)这样的速度运动;
<李> 结合两个轴的运动,实现弧线效果
<强>三次贝塞尔(三次贝塞尔曲线)函数
动画属性中有一个animation-timing-function属性,动画的速度函数。而这个属性使用名为三次贝塞尔(三次贝塞尔曲线)函数的数学函数,来生成速度曲线。
cubic-bezier (x1, y1, x2, y2):(三次贝塞尔函数的具体含义请查阅相关资料):
<>强效果实现
首先我们能想到的就是将X轴Y轴的位移动画拆开。但是一个元素的动画同一时间只能执行一个动画(最后申明的),所以我们可以换位思考,用两个父子元素。给父级元素添加X轴位移动画,给子元素增加Y轴位移动画,具体代码如下:
& lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title>元素弧线运动& lt;/title>
,,,& lt; style>
,,,,,,,.box {
,,,,,,,,,,,宽度:,400 px;
,,,,,,,,,,,身高:,400 px;
,,,,,,,,,,,:边界,2 px solid # ff8800;
,,,,,,,}
,,,,,,,跨度{
,,,,,,,,,,,显示:,块;
,,,,,,,,,,,宽度:,40像素;
,,,,,,,,,,,身高:,40像素;
,,,,,,,,,,,边界:,1 px solid # 222;
,,,,,,,,,,,动画:,center1 2 s ease-in 向前;
,,,,,,,}
,,,,,,,跨度:{后
,,,,,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,,,,,显示:,块;
,,,,,,,,,,,宽度:,40像素;
,,,,,,,,,,,身高:,40像素;
,,,,,,,,,,,-webkit-border-radius:, 20 px;
,,,,,,,,,,,-moz-border-radius:, 20 px;
,,,,,,,,,,,这个特性:,20 px;
,,,,,,,,,,,背景:,greenyellow;
,,,,,,,,,,,动画:,center2 2 s ease-out 向前;
,,,,,,,}
,,,,,,,@keyframes center1 {
,,,,,,,,,,,,{变换:translateX (360 px)}
,,,,,,,}
,,,,,,,@keyframes center2 {
,,,,,,,,,,,,{变换:translateY (360 px)}
,,,,,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=癰ox"祝辞
,,,& lt; span> & lt;/span>
& lt;/div>
& lt;/body>
& lt;/html> 此时我用的是元素的伪类后替代了子元素,效果一样。给跨一个给色边界可以观察两个元素分别的运动轨迹,以便于观察,动画效果如下:
此时还是能比较明显的看出绿色小球是做的弧线运动。
扩展:
此时如果觉得弧线不够大不够明显,我们可以自己调整次贝塞尔(三次贝塞尔曲线)函数的值。根据网站传送门。
<李> 选择在的曲线效果,此时我们改变(x1, y1的值(将红色点向右拉),然后复制此时的cubic-bezier()值。将这个值取代原本跨度的动画在的位置。
<李> 选择打发走的曲线效果,此时我们改变x2, y2的值(将蓝色点向右拉),然后复制此时的cubic-bezier()值。将这个值取代原本跨度伪类的后动画打发走的位置。
此时的CSS代码如下:
跨度{
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
