闲来无事的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. Linux小知识(1): bash中执行数据库的相关操作

    工作中经常会遇到命令行操作数据库或登陆至其他服务器等情况,往往需要通过命令行进入相关的数据库或登陆至相关的服务器,再执行指令操作,因此有没有方法,在命令行或bash脚本中模拟进入数据库或登陆服务器操作 ...

  2. Unity C# string 与byte 直接的转换

    指纹模版的转换 可还原字节数组byt string str = Convert.ToBase64String(bytes); byte[] bytes = Convert.FromBase64Stri ...

  3. Linux 命令-1

    1.除了/之外,所有的字符都合法,有些字符最好不要用 2.以.开头的文件将被隐藏.和window的区别 3.大小写敏感 4.命令格式: 命令 -选项 参数   例如: ls -la /etc  ,选项 ...

  4. php中配置伪静态

    mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法 1.检测Apache是否支持mod_rewrite 通过php提供的phpinfo()函数查 ...

  5. WebService的搭建,部署,简单应用和实体类结合使用

    WebService:一种跨编程语言和操作系统平台的远程调用技术,SOAP.WSDL(WebServicesDescriptionLanguage).UDDI(UniversalDescription ...

  6. Matlab多项式回归实现

    多项式回归也称多元非线性回归,是指包含两个以上变量的非线性回归模型.对于多元非线性回归模型求解的传统解决方案,仍然是想办法把它转化成标准的线性形式的多元回归模型来处理. 多元非线性回归分析方程 如果自 ...

  7. 关于hibernate字段映射@colunm出现的问题以及jpa驼峰大写转_小写的问题探究

    关于hibernate字段映射@colunm出现的问题以及jpa驼峰大写转_小写的问题探究2018年04月24日 15:47:26 守望dfdfdf 阅读数:735 标签: @colunmhibern ...

  8. #include stdio.h(6)

    #include <stdio.h> int main() { //**************3.字符数组************** ] = {'i','P','\0','o','n' ...

  9. thinkphp 创建数据对象之data方法

    创建数据对象:data()方法 1.功能:给模型对象$data赋值,将模型对象转化为数据对象 tip:模型对象与数据对象之间就差一个赋过值的$data; 2.方法:data()其源码如下: tip:源 ...

  10. pcp分布式监控工具

    已经集成在redhat6.x版本里 http://pcp.io