css3实现椭圆轨迹旋转的示例代码


Posted in HTML / CSS onOctober 29, 2018

最近需要实现如下效果

css3实现椭圆轨迹旋转的示例代码

最开始用css3D旋转写,只能实现如下效果

css3实现椭圆轨迹旋转的示例代码

没办法把所有的圆转向正面,不知道是我的操作不对,还是3d旋转无法实现,有知道的大佬还请赐教啊

没法用3d实现只能转向2d了,只要实现按椭圆旋转就ok了

X轴Y轴在一个矩形内移动

路径为斜线

.ball {
    animation: 
      animX 2s linear  infinite alternate,
      animY 2s linear  infinite alternate
  }
@keyframes animX{
      0% {left: 0px;}
    100% {left: 500px;}
}
@keyframes animY{
      0% {top: 0px;}
    100% {top: 300px;}
}

css3实现椭圆轨迹旋转的示例代码

设置动画延迟

设置Y轴延迟为动画时长的一半,可以看到运动轨迹变成菱形了,有点感觉了

.ball {
    animation: 
      animX 2s linear 0s infinite alternate,
      animY 2s linear -1s infinite alternate
  }

css3实现椭圆轨迹旋转的示例代码

设置三次贝塞尔曲线

.ball {
    animation: 
      animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate
  }

css3实现椭圆轨迹旋转的示例代码

缩小放大

为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

.ball1 {
    animation: 
      animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  }
 @keyframes scale {

    0% {
      transform: scale(0.7)
    }
    50% {
      transform: scale(1)
    }
    100% {
      transform: scale(0.7)
   }
 }

css3实现椭圆轨迹旋转的示例代码

大功告成!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 #HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 #HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 #HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 #HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 #HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 #HTML / CSS
You might like
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php数组一对一替换实现代码
2012/08/31 PHP
js 调整select 位置的函数
2008/02/21 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
python+Django+apache的配置方法详解
2016/06/01 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python实现ATM系统
2020/02/17 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
C语言面试题
2013/05/19 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
入党思想汇报
2014/01/05 职场文书
早会主持词
2014/03/17 职场文书
高一学生期末评语
2014/04/25 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
实习单位推荐信
2015/03/27 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript