绕某个中心点进行旋转：

提示：这个主要是是利用animation，animation中的多个keyframes是同时进行的。

//球的个数
@ballNum: 3;
//动画完成一次的时长
@ballX: 5;
@ballY: 5;
//根据球的个数计算X延时秒数（负数）
@delayedX: (@ballX+ @ballY) / @ballNum;
//第二个球到最后一个球依次递减 (@delayedX-=@delayedX)
//Y延时秒数 ( @delayedX-=@delayedX 同理)
@dalayedY: @delayedX - (@ballX+ @ballY)/2;

//3个圆,x和y轴动画加起来是6s , 6s/3 等于 2s
每个球y轴动画延迟从0递减2s,x轴与y相差动画时长的一半（3s/2）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 800px;height: 400px;background: gold;position: relative;}.boxItem {width: 50px;height: 50px;border-radius: 50%;position: absolute;}.box1 {background-color: aquamarine;animation: animX 3s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,animY 3s cubic-bezier(0.36, 0, 0.64, 1) -3.5s infinite alternate;}.box2 {background-color: greenyellow;animation: animX 3s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,animY 3s cubic-bezier(0.36, 0, 0.64, 1) -5.5s infinite alternate;}.box3 {background-color: palevioletred;animation: animX 3s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,animY 3s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;}@keyframes animX {0% {left: 4%;}100% {left: 96%;}}@keyframes animY {0% {top: 4%;}100% {top: 96%;}}</style></head><body><div class="box"><div class="boxItem box1"></div><div class="boxItem box2"></div><div class="boxItem box3"></div></div></body>
</html>

利用animation进行椭圆旋转相关推荐

android 圆动画效果,Android实现任意绕圆或椭圆旋转的动画——SatelliteAnimator使用介绍...
话说实习也就快一个月了,虽然没干什么活,但是这几天总算是有一些可以写的东西. 代码中应该还存在很多问题要修改,大神们请赐教,不胜感激. 开始正题. 关于Android实现任意绕圆或椭圆旋转动画,我称之 ...
html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆发布时间:2021-07-08 16:32:10 来源:亿速云阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
js实现椭圆轨迹_【CSON原创】javascript椭圆旋转相册发布
功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢 ...
利用Animation控件制作帧动画过程详解
利用Animation控件制作帧动画过程详解前言通过Animation控件来达到序列图的播放(素材和示例视频在文章末尾) 一.序列图 (此素材为已经分割好的序列图) 如若序列图在一张图片上,请参考 ...
[python] 工作记录一、利用opencv，numpy旋转图片无黑边（轮子必须由我造！！！）
[python] 工作记录一.利用opencv,numpy旋转图片无黑边(轮子必须由我造!!!) 1. 第三方库的安装 2. 程序目的 3. 图片理解 4. 编写代码 (1).旋转顺时针90° (2) ...
c++椭圆最小二乘法原理_利用最小二乘法拟合椭圆方程的理论推导，附有matlab代码...
为了很好的进行椭圆方程拟合,本文先对椭圆基本知识进行复习,后进行非标准椭圆方程拟合公式推导,最后有matlab代码的实现. 1. 用最小二乘法做椭圆拟合 1.1. 椭圆标准方程对椭圆印象最深的就是高 ...
unity3d5.1物体椭圆旋转选择界面实现（一）
偶然在群里看到有人拿了一张椭圆物体旋转选择界面来问怎么实现(也不知道这样描述对不对,反正是椭圆的,而且还是旋转的,类似于关卡和角色选择),于是想了下自己写了一个类似的功能,方法可能不是很完美,但 ...
css3 animation动画360旋转。旋转效果用transform:rotate过渡。
旋转: <div class="lds-hourglass"></div> .lds-hourglass {display:inline-block;po ...
【JavaScript】实现三个小球围着椭圆旋转的加载动画
好久没有写过原生JS了,突然没事做,写了一个跟着鼠标走的加载小动画,最终效果如下图: 这个效果实现起来非常简单,大概思路是:先用 CSS3 的 border-radius 属性将三个 div 的样式设 ...
用 Animation 实现匀速旋转
年初参加 GGJ 的时候,我曾想偷懒用 Animation 实现物体的匀速旋转.思路很简单,只需要0度和360(或-360)度两个关键帧,然后将动画设为循环播放.当时以为这样事情就成了.谁知做出来的效 ...

利用animation进行椭圆旋转

绕某个中心点进行旋转：

利用animation进行椭圆旋转相关推荐

最新文章

热门文章