通过使用css3实现让元素椭圆运动。而不是圆形运动。

效果1：http://sandbox.runjs.cn/show/ignefell

效果2：http://runjs.cn/code/w2wxjyeo

代码如下：

  1. <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><link rel="stylesheet" href="css/base.css"></head><body><style>html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
  2. ul,li,div,p,body{margin:0;padding:0;text-align:left;}
  3. body, html {background:#001424;text-align: left;height: 100%;width: 100%;font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;font-size:62.5%;font-weight: normal;}
  4. @-webkit-keyframes star_ani_00{
  5.     0%{
  6.         opacity: 0;
  7.     }
  8.     100%{
  9.         opacity: 1;
  10.     }
  11. }
  12. @keyframes star_ani_00{
  13.     0%{
  14.         opacity: 0;
  15.     }
  16.     100%{
  17.         opacity: 1;
  18.     }
  19. }
  20. @-webkit-keyframes star_ani_01{
  21.     0%,100%{
  22.         -webkit-transform: translateY(0rem);
  23.     }
  24.     50%{
  25.         -webkit-transform: translateY(-35rem);
  26.     }
  27. }
  28. @keyframes star_ani_01{
  29.     0%,100%{
  30.         transform: translateY(0rem);
  31.     }
  32.     50%{
  33.        transform: translateY(-35rem);
  34.     }
  35. }
  36. @-webkit-keyframes star_ani_02{
  37.     0%,100%{
  38.         -webkit-transform: translateX(0rem) scale(0.8);
  39.     }
  40.     50%{
  41.         -webkit-transform: translateX(10rem) scale(1);
  42.     }
  43. }
  44. @keyframes star_ani_02{
  45.     0%,100%{
  46.         transform: translateX(0rem) scale(0.8);
  47.     }
  48.     50%{
  49.         transform: translateX(10rem) scale(1);
  50.     }
  51. }
  52. @-webkit-keyframes star_ani_03{
  53.     0%,100%{
  54.         -webkit-transform: translateX(0rem);
  55.     }
  56.     50%{
  57.         -webkit-transform: translateX(-36rem);
  58.     }
  59. }
  60. @keyframes star_ani_03{
  61.     0%,100%{
  62.         transform: translateX(0rem);
  63.     }
  64.     50%{
  65.         transform: translateX(-36rem);
  66.     }
  67. }
  68.  
  69. @-webkit-keyframes star_ani_04{
  70.     0%,100%{
  71.         -webkit-transform: translateY(0rem) scale(0.8);
  72.     }
  73.     50%{
  74.         -webkit-transform: translateY(10.5rem) scale(1);
  75.     }
  76. }
  77. @keyframes star_ani_04{
  78.     0%,100%{
  79.         transform: translateY(0rem) scale(0.8);
  80.     }
  81.     50%{
  82.         transform: translateY(10.5rem) scale(1);
  83.     }
  84. }
  85.  
  86. @-webkit-keyframes star_ani_05{
  87.     0%,100%{
  88.         -webkit-transform: translateX(0rem);
  89.     }
  90.     50%{
  91.         -webkit-transform: translateX(-26.5rem);
  92.     }
  93. }
  94. @keyframes star_ani_05{
  95.     0%,100%{
  96.         transform: translateX(0rem);
  97.     }
  98.     50%{
  99.         transform: translateX(-26.5rem);
  100.     }
  101. }
  102.  
  103. @-webkit-keyframes star_ani_06{
  104.     0%,100%{
  105.         -webkit-transform: translateY(0rem) scale(0.8);
  106.     }
  107.     50%{
  108.         -webkit-transform: translateY(8rem) scale(1);
  109.     }
  110. }
  111. @keyframes star_ani_06{
  112.     0%,100%{
  113.         transform: translateY(0rem) scale(0.8);
  114.     }
  115.     50%{
  116.         transform: translateY(8rem) scale(1);
  117.     }
  118. }
  119. .main{
  120.     position: relative;
  121.     height:100%;
  122. }
  123. .wrap-icon{
  124.     position:absolute;
  125.     background-size: 100%;
  126.     background-repeat: no-repeat;
  127.     left:50%;
  128.     top: 12%;
  129.     z-index: 2;
  130.     opacity: 0;
  131. }
  132.  
  133. .wrap-icon1{
  134.     width: 2.7rem;
  135.     height: 2.7rem;
  136.     margin-left:-5.5rem;
  137.     margin-top: 28rem;
  138.     -webkit-animation:star_ani_00 0.5s 4s linear forwards;
  139.     animation:star_ani_00 0.5s 4s linear forwards;
  140. }
  141. .wrap-icon1 span{
  142.     width:2.7rem;
  143.     height:2.7rem;
  144.     display: block;
  145.     -webkit-animation:star_ani_02 16s 4s ease-in-out infinite;
  146.     animation:star_ani_02 16s 4s ease-in-out infinite;
  147. }
  148. .wrap-icon1 i{
  149.     width:1.5rem;
  150.     height:1.5rem;
  151.     border-radius:1.5rem;
  152.     display: block;
  153.     background:#f60;
  154.     background-size: 100% 100%;
  155.     -webkit-animation:star_ani_01 16s 0s ease-in-out infinite;
  156.     animation:star_ani_01 16s 0s ease-in-out infinite;
  157. }
  158.  
  159. .wrap-icon2{
  160.     width: 2.7rem;
  161.     height: 2.7rem;
  162.     margin-left: 17.8rem;
  163.     margin-top: 8rem;
  164.     -webkit-animation:star_ani_00 0.5s 5s linear forwards;
  165.     animation:star_ani_00 0.5s 5s linear forwards;
  166. }
  167. .wrap-icon2 span{
  168.     width:2.7rem;
  169.     height:2.7rem;
  170.     display: block;
  171.     -webkit-animation:star_ani_03 20s 0s ease-in-out infinite;
  172.     animation:star_ani_03 20s 0s ease-in-out infinite;
  173. }
  174. .wrap-icon2 i{
  175.     width:1.5rem;
  176.     height:1.5rem;
  177.     border-radius:1.5rem;
  178.     display: block;
  179.     background:#f60;
  180.     background-size: 100% 100%;
  181.     -webkit-animation:star_ani_04 20s 5s ease-in-out infinite;
  182.     animation:star_ani_04 20s 5s ease-in-out infinite;
  183. }
  184.  
  185. .wrap-icon3{
  186.     width: 2.7rem;
  187.     height: 2.7rem;
  188.     margin-left: 12.4rem;
  189.     margin-top: 9rem;
  190.     -webkit-animation:star_ani_00 0.5s 2.5s linear forwards;
  191.     animation:star_ani_00 0.5s 2.5s linear forwards;
  192. }
  193. .wrap-icon3 span{
  194.     width:2.7rem;
  195.     height:2.7rem;
  196.     display: block;
  197.     -webkit-animation:star_ani_05 10s 0s ease-in-out infinite;
  198.     animation:star_ani_05 10s 0s ease-in-out infinite;
  199. }
  200. .wrap-icon3 i{
  201.     width:2rem;
  202.     height:2rem;
  203.     border-radius:1rem;
  204.     display: block;
  205.     background:#f60;
  206.     background-size: 100% 100%;
  207.     -webkit-animation:star_ani_06 10s 2.5s ease-in-out infinite;
  208.     animation:star_ani_06 10s 2.5s ease-in-out infinite;
  209. }
  210. .wrap-bg{
  211.     width:28rem;
  212.     height:28rem;
  213.     position: absolute;
  214.     top:12%;
  215.     left:50%;
  216.     margin-left:-14rem;
  217.     border:0.1rem solid #aaa;
  218.     border-radius:28rem;
  219.     -webkit-transform:scale3d(1,0.3,1);
  220.     transform:scale3d(1,0.3,1);
  221. }
  222. .wrap-bg2{
  223.     width:36rem;
  224.     height:36rem;
  225.     position: absolute;
  226.     top:12%;
  227.     left:50%;
  228.     margin-left:-18rem;
  229.     margin-top:-4rem;
  230.     border:0.1rem solid #aaa;
  231.     border-radius:28rem;
  232.     -webkit-transform:scale3d(1,0.3,1);
  233.     transform:scale3d(1,0.3,1);
  234. }
  235. .wrap-bg3{
  236.     width:32rem;
  237.     height:32rem;
  238.     position: absolute;
  239.     top:12%;
  240.     left:50%;
  241.     margin-left:-16rem;
  242.     margin-top:-3rem;
  243.     -webkit-transform:rotate(4deg);
  244.     transform:rotate(4deg);
  245. }
  246. .wrap-bg3 span{
  247.     display: block;
  248.     width:100%;
  249.     height:100%;
  250.     border:0.1rem solid #aaa;
  251.     border-radius:28rem;
  252.     -webkit-transform:scale3d(0.32,1,1);
  253.     transform:scale3d(0.32,1,1);
  254. }
  255. .wrap-sun{
  256.     position: absolute;
  257.     width:5.3rem;
  258.     height:5.3rem;
  259.     top:12%;
  260.     left:50%;
  261.     margin-left:-2.6rem;
  262.     margin-top:11rem;
  263.     background:url(images/sun.png) no-repeat;
  264.     background-size: 100%;
  265. }
  266.             </style><div class="box">
  267.  
  268. <div class="wrap-bg"></div>
  269. <div class="wrap-bg2"></div>
  270. <div class="wrap-bg3"><span></span></div>
  271.  
  272. <div class="wrap-icon wrap-icon1">
  273.     <span><i></i></span>
  274. </div>
  275.  
  276. <div class="wrap-icon wrap-icon2">
  277.     <span><i></i></span>
  278. </div>
  279.  
  280. <div class="wrap-icon wrap-icon3">
  281.     <span><i></i></span>
  282. </div>
  283.  
  284. <div class="wrap-sun"></div>
  285.  
  286. </div>
  287.             </body></html>

css3椭圆运动的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 前端制作动画的几种方式（css3，js）

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  9. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

随机推荐

  1. Linux学习之路（四）帮助命令

    帮助命令man .man 命令 #获取指定命令的帮助 .man ls #查看ls的帮助 man的级别 1 查看命令的帮助 2 查看可被内核调用的函数的帮助 3 查看函数的函数库的帮助 4 查看特殊文件 ...

  2. RQNOJ 429 词链：单调栈

    题目链接:https://www.rqnoj.cn/problem/429 题意: 如果一张由一个词或多个词组成的表中,每个单词(除了最后一个)都是排在它后面的单词的前缀,则称此表为一个词链. 如:i ...

  3. struts2 自定义类型转化 第三弹

    1.Struts2的类型转化,对于8种原生数据类型以及Date,String等常见类型,Struts2可以使用内建的类型转化器实现自动转化:但对于自定义的对象类型来说,就需要我们自己指定类型转化的的方 ...

  4. tensorflow 线性回归 iris

    线性拟合

  5. Linux_服务器_02_在linux上怎么看eclipse控制台输出语句

    在windows下,tomcat启动之后有一个黑窗口,很容易看到System.out.println或ex.printStackTrace这样的函数输出,非常方便调试,但是在linux下,没有这样的窗 ...

  6. Css公共文件结构

    一般一个网站会有这么三个样式: global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式 ...

  7. 一个关于前端页面的小标签<tbody>

    我们有时候希望将表格的内容分为多个模块,这时候就可以使用<tbody>标签,它是<table>的字标签,是<tr>的父标签,可以使用它达到一种设置样式的结果.

  8. leetcode 102 Binary Tree Level Order Traversal(DFS||BFS)

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  9. BZOJ - 2553 ：禁忌（AC自动机+贪心+奇怪的矩阵）

    Magic Land上的人们总是提起那个传说:他们的祖先John在那个东方岛屿帮助Koishi与其姐姐Satori最终战平.而后,Koishi恢复了读心的能力…… 如今,在John已经成为传说的时代, ...

  10. CodeForces - 1000D：Yet Another Problem On a Subsequence （DP+组合数）

    The sequence of integers a1,a2,…,aka1,a2,…,ak is called a good array if a1=k−1a1=k−1 and a1>0a1&g ...