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 相关文章推荐
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 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/06/18 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
JsDom 编程小结
2011/08/09 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
记录一次完整的react hooks实践
2019/03/11 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
Python列表推导式的使用方法
2013/11/21 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
python绘制地震散点图
2019/06/18 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
keras之权重初始化方式
2020/05/21 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
出纳岗位职责范本
2013/12/01 职场文书
学生请假条
2014/04/11 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
西湖英语导游词
2015/02/06 职场文书
担保书格式范文
2015/09/22 职场文书