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发光分享按钮的实现教程
Sep 06 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
学习YUI.Ext第五日--做拖放Darg&Drop
2007/03/10 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
javascript 闭包疑问
2010/12/30 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
js实现星星打分效果
2020/07/05 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
基于python实现KNN分类算法
2020/04/23 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
python的链表基础知识点
2020/09/13 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
python pillow库的基础使用教程
2021/01/13 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
大学生职业生涯规划范文
2014/01/08 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
经费申请报告
2015/05/15 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android