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


Posted in HTML / CSS onApril 24, 2020

如何使用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元素弧线运动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 #HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 #HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 #HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 #HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 #HTML / CSS
css3 中translate和transition的使用方法
Mar 26 #HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 #HTML / CSS
You might like
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
php无限级分类实现方法分析
2016/10/19 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP微商城开源代码实例
2019/03/27 PHP
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
浅析Python中signal包的使用
2015/11/13 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
快餐店的创业计划书范文
2014/01/29 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
初中生毕业评语
2014/12/29 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
复兴之路观后感
2015/06/02 职场文书
杨善洲观后感
2015/06/04 职场文书
品德与社会教学反思
2016/02/24 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android