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的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 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
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
python字符串,数值计算
2016/10/05 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python中的Numpy矩阵操作
2018/08/12 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
python 元组和列表的区别
2020/12/30 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
乔迁之喜主持词
2014/03/27 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
大学生求职信范文
2014/05/24 职场文书
2016党员党课心得体会
2016/01/07 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记