css3 实现元素 弧线运动
如何使用CSS控制元素弧线运动
我们都知道,CSS3的新属性transfrom过渡效果可以实现元素位移、旋转、缩放。结合animation属性,就可以实现元素的动画效果。但是如何通过css实现元素实现弧线运动呢:
如上图动画效果所示,圆球弧线运动,分析运动:
- 将小球的运动拆分成X轴和Y轴两个运动来看,此时X轴的小球是以 (慢—快) 这样的速度运动;
- 而Y轴的方向小球是以(快—慢)这样的速度运动;
- 结合两个轴的运动,实现弧线效果
三次贝塞尔(Cubic Bezier)函数
animation属性中有一个 animation-timing-function 属性,动画的速度函数。而这个属性 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。
cubic-bezier (x1,y1,x2,y2):(三次贝塞尔函数的具体含义请查阅相关资料):
可以通过这个网站 传送门 去实时调节曲线的取值。而animation-timing-function属性中 已经提供了几个 已经封装好的速度函数:也就是我们常用的 ease、linear、ease-in、ease-out、ease-in-out。
效果实现
首先我们能想到的就是将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可以观察两个元素分别的运动轨迹,以便于观察,动画效果如下:
此时还是能比较明显的看出绿色小球是做的弧线运动。
扩展:
此时如果觉得弧线不够大不够明显,我们可以自己调整次贝塞尔(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实现3D球体运动
@CSS3实现3D球体运动 实现思路 本案例主要实现两个功能: 鼠标拖拽使球体旋转: 鼠标轮滚动进入球体内部: 核心:球体形成思路 html <div class="stage&quo ...
- 使用 CSS3 伪元素实现立体的照片堆叠效
CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...
- html怎么做半圆形按钮,css3做出半圆弧线
这次给大家带来css3做出半圆弧线,css3做出半圆弧线的注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了css3实现画半圆弧线的示例代码,分享给大家,具体如下: css代码.circle ...
- CSS基础(part21)--CSS3伪元素选择器
学习笔记,仅供参考,有错必究 参考自:pink老师教案 CSS3伪元素选择器 伪类选择器: 选择符 简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 伪类选择 ...
- css旋转不围绕圆心,css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed])...
css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed]) 我有这个演示 . 如图所示,元素围绕其中心旋转,但我正 ...
- css3 --- 实现动画线条运动效果实例集合
CSS3实现动画线条运动效果实例集合(一) laoyuan 2016-12-20 标签:css3 阅读: 5,157 在我们日常的开发中,有时候有的图片,布局块需要加一下边框运动效果,对于这些效果,我 ...
- css3伪元素::_CSS荧光笔:使用:: selection伪选择器
css3伪元素:: Selecting content on a web page - whether by mouse, touch, gesture or stylus - always prec ...
- html5 猫 特效,html5特效-css3页面元素切换墨水喷墨效果
css3页面元素切换墨水喷墨效果,层元素弹出关闭时超好看的墨水喷墨特效,下载:层元素弹出关闭时超好看的墨水喷墨特效完整源码下载 密码: qm34 下面是预览图 CSS3墨水喷墨特效 style.cs ...
- html怎么让div一直旋转,css3实现元素不停旋转
网页开发中,经常会使用一些特效,达到一些炫酷的效果,比如音乐播放时封面的旋转,下面就来学习下css如何实现不停止旋转的效果吧. css3实现元素不停旋转 主要使用了@keyframes和animati ...
最新文章
- 2017年全球光伏需求有望首次突破100吉瓦
- python3 问题 No module named _sqlite3 解决方案
- Python pyd pyc
- webpack环境搭建使用
- U3D的飞船太空射击例子中,使用coroutine
- 百度地图-矩形编辑的模拟实现
- POJ 1269 Intersecting Lines(求直线交点)
- python解释器用什么写的_用 Python 从零开始写一个简单的解释器(3)
- 彻底火了!这份Python学习贴,90%程序员用的上!
- 使用windows2008R2自带磁盘管理进行分区
- 导航抽屉(Google+与YouTube)
- ubuntu18.04系统ros melodic 安装orbslam2,Astra相机的ROS环境
- opencv 图像边缘检测 Canny边缘检测算法使用
- 教你从redhat官网获取ISO镜像
- 开源项目——小Q聊天机器人V1.3
- Transformer时序预测
- eos区块链 java客户端_分享一个网友第一次开发EOS区块链总结的经验
- 全球 Top 1000计算机科学家公布:中国53位学者上榜!
- 苹果x屏幕失灵乱跳_苹果iphone11 pro max屏幕触摸失灵怎么办?
- Spring MVC + Java 多文件上传及多文件中转上传
热门文章
- 学习的目的:建立世界观、学以致用、知行合一
- 远程控制android盒子,实现远程控制监控安卓手机的向日葵UUPro使用评测,淘汰的安卓手机可以派上用场了...
- Warning: masked_scatter_ received a mask with dtype torch.uint8, this behavior is now deprecated,ple
- MACC与TOPS(FLOPS)互相换算
- 一个人最多能考取几个教师资格证?
- cdoj1087 基爷的中位数 二分
- Github 上火热的十个 Python 项目,从Debug工具到AI水军、量化交易系统。( 嗨学编程)
- hive 执行SQL异常
- 并查集——银河英雄传说
- 移动客户端与服务端离线数据上报功能解决方案