闲来无事的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. java 数字进制之间转换

    //10进制转换 16进制 System.out.println(Integer.toHexString(val)); System.out.println(String.format("% ...

  2. pyhon虚拟环境的安装和使用

    安装Python2.7: 1.Mac下使用Python2.7 2.Windows下安装Python2.7. *从python官网下载python2.7的版本 *双击python2.7,然后选择安装路径 ...

  3. Javascript 对象（Object）

    //声明方式 //调用 Object构造函数创建 var user = new Object(); user.name = "小白"; user.say = function () ...

  4. Spring-cloud微服务 Eureka学习教程-分布式搭建EurekaServer、EurekaClient+Ribbon（中级）

    我们这里只有一台服务器,所以我们先仿集群搭建. 完整demo项目代码:https://github.com/wades2/EurekaDemo2 在这之前我们先分析分析Eureka相比其他注册中心的好 ...

  5. ios两个app之间跳转，传值的实现

    两个APP之间的跳转是通过[[UIApplication sharedApplication] openURL:url]这种方式来实现的. 1.首先设置第一个APP的url地址 2.接着设置第二个AP ...

  6. 图片延迟插件 Jquery.lazyload.min.js

    当一个页面打开的图片太多,我们可以用jquery的一个延迟加载插件.名为:jquery.lazyload.min.js 使用非常简单,如下: <div style="height:70 ...

  7. 爆料！如何在Visual Studio 2017上体验五星级云服务

    2017 年 3 月初,号称宇宙最强 IDE 之一的 Visual Studio 发布了最新的 2017 版本,遥想自己使用 VC++ 6.0 的当年,看着现在已然稀疏的头发,真是一入 IT 似海深, ...

  8. 爬虫技术框架——Heritrix

    Heritrix是一个由Java开发的开源Web爬虫系统,用来获取完整的.精确的站点内容的深度复制, 具有强大的可扩展性,运行开发者任意选择或扩展各个组件,实现特定的抓取逻辑. 一.Heritrix介 ...

  9. linux基础命令-mkdir/tree/rmdir

    命令行的展开 ~: 展开为用户的主目录 ~USERNAME: 展开为指定用户的主目录 {}:可承载一个以逗号分隔的列表,并将其展开为多个路径 [root@host01 tmp]# mkdir -vp ...

  10. 古老的pike

    快速略读了一下源码,记了一些东西. 先看看mapping mapping其实就是C++中的multimap,但是支持更多. array values(mapping).这个方法可以返回所有mappin ...