闲来无事的demo

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <style type="text/css">

         body{

             background: #000;

         }

         .sun{

             width: 280px;

             height: 280px;

             margin-top: 200px;

             margin-left: 300px;

             border:1px solid #FFA500;

             background:#FFA500;

             border-radius: 50%;

             box-shadow:0px 0px 35px #FFA500;

             animation:action 10s;

             animation-iteration-count:infinite;

             animation-timing-function:linear;

         }

         @keyframes action{

             0% { transform: rotate(0deg) }

             100% { transform: rotate(360deg)}

         }

         .earth{

             border:1px solid #0000CC;

             background:#0000CC;

             box-shadow:0px 0px 35px #0000CC;

             width: 40px;

             height: 40px;

             border-radius: 50%;

             margin-left: -90px;

             animation:actions 5s;

             animation-iteration-count:infinite;

             animation-timing-function:linear;

         }

         @keyframes actions{

             0% { transform: rotate(0deg) }

             100% { transform: rotate(360deg)}

         }

         .moon{

             border:1px solid #F0F0F0;

             background:#F0F0F0;

             box-shadow:0px 0px 35px #F0F0F0;

             width: 10px;

             height: 10px;

             border-radius: 50%;

             margin-left: -20px;

         }

     </style>

 </head>

 <body>

 <div class="sun">

     <div class="earth">

         <div class="moon"></div>

     </div>

 </div>

 </body>

 </html>

太阳地球月亮运行动画（使用@keyframes）的更多相关文章

  1. 关键帧动画：@keyframes

    关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. 随着ScrollView的滑动，渐渐的运行动画View

    今天是实现了一个小功能的东西.看看效果图: 实现方式: 1.自己定义ScrollView   复写onScrollChange方法,来计算滑动的位置. 2.自己定义接口,通过接口来在ScrollVie ...

  3. TranslateAnimation 运行动画后实际位置不正确问题

    最近在调试android 动画时候发现一个很奇怪问题,网上搜索都说TranslateAnimation 动画运行后,实际位置要在动画结束的监听里面重新设置才会正确,不然物体位置还是在原位. 我根据网上 ...

  4. css3动画（@keyframes和animation的用法）

    animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...

  5. 8 cocos2dx加入场景切换效果，控制场景切换彻底完毕之后再运行动画

     1 加入场景切换效果 供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadial ...

  6. css动画 aniamtion & @keyframes

    MDN-animation文档 animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] ...

  7. discuz修改太阳，月亮，星星等级图标

    想必大家都想修改一下默认的等级图标吧,刚才在论坛上看见很多大神的方法都是要修改文件的,不过为了安全起见需要事先备份好才改,这种方法是可行的,但可能有些新手站长不会修改,又或者改错了恢复不来,现在我教大 ...

  8. cocos2d-js 运行动画

    1.添加动画缓存 //添加动画缓存 cc.spriteFrameCache.addSpriteFrames(res.bug_plist); this.spriteSheet = new cc.Spri ...

  9. Animations动画和Keyframes关键帧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [转]FireFox与IE 下js兼容触发click事件的代码

    本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...

  2. nginx 访问路径配置

    比如: http://127.0.0.1/ 对应的物理路径 c:/a/b/c 比如:http://127.0.0.1/eec 访问的地址对应的物理路径: d:/a/b/c #user nobody; ...

  3. LeetCode 870.优势洗牌（C++）

    给定两个大小相等的数组 A 和 B,A 相对于 B 的优势可以用满足 A[i] > B[i] 的索引 i 的数目来描述. 返回 A 的任意排列,使其相对于 B 的优势最大化. 示例 1: 输入: ...

  4. Actor的一生

    Actor应该怎么去形容它呢?它是一段代码扮演的角色.它拥有自己的状态机,能根据外界的消息进行适当的反应.他有记忆能力,可以记住来自外界的多个消息并依次进行反应.Actor就像一个小的生命体,有自己的 ...

  5. 如何将运维的报警做成运营的报警--Java后端架构

    转:http://mp.weixin.qq.com/s?__biz=MzI4OTU3ODk3NQ==&mid=2247483970&idx=1&sn=2a00acfb25f0c ...

  6. DBCP数据库连接池原理分析

    在比较大的项目中,需要不断的从数据库中获取数据,Java中则使用JDBC连接数据库,但是获取数据库的连接可是相当耗时的操作,每次连接数据库都获得 .销毁数据库连接,将是很大的一个开销.为了解决这种开销 ...

  7. 弹性布局 Flexible Box

    页面中任何一个元素都可以指定为 弹性布局(Flex) 属性:display 取值: 1.flex     将块级元素变为弹性布局容器 2.inline-flex   将行内元素变为弹性布局容器 兼容性 ...

  8. Thinkphp 出现 “_CACHE_WRITE_ERROR” 错误的可能解决办法

    有可能是老毛病: Cache文件夹和里面的文件,php没有权限 解决办法: chmod -R 777 /.............../www/Cache

  9. seleenium与Vs结合

    Vs 自带自动化测试录制工具.selenium则是开源的大众工具.在使用发现vs 自带的工具录制方便,但是修改很难.但是可以提供后续的BUG管理和邮件通知,自动构建等功能.selenium在.net平 ...

  10. SaberSama【css总结】

    为什么要转过来呢? 因为我觉到,同样是一个初学者,应该互相学习,交流. css:Cascading Style Sheets 层叠样式表 CSS引入方式: 1.内嵌: <p style=&quo ...