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 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php自动跳转中英文页面
2008/07/29 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Django中几种重定向方法
2015/04/28 Python
python一键升级所有pip package的方法
2017/01/16 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
C#软件工程师英语面试题
2015/06/07 面试题
女方婚礼新郎答谢词
2014/01/11 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
学生会主席任命书
2015/09/21 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
无线电知识基础入门篇
2022/02/18 无线电
Oracle使用别名的好处
2022/04/19 Oracle