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 Columns分列式布局方法简介
May 03 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jqgrid 表格数据导出实例
2013/11/21 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
利用python实现逐步回归
2020/02/24 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
九州传奇上机题
2014/07/10 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
大学自主招生推荐信
2014/05/10 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
检讨书范文2000字
2015/01/28 职场文书
2015年植树节活动总结
2015/02/06 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android