闲来无事的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. Vertex And Fragment Shader（顶点和片段着色器）

    Vertex And Fragment Shader(顶点和片段着色器) Shader "Unlit/ Vertex­_And_Fragment_Shader " { Proper ...

  2. jQuery源代码学习笔记_工具函数_noop/error/now/trim

    jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...

  3. Java反射机制分析指南

    一.JAVA是动态语言吗? 一般而言,说到动态言,都是指在程序运行时允许改变程序结构或者变量类型,从这个观点看,JAVA和C++一样,都不是动态语言. 但JAVA它却有着一个非常突出的动态相关机制:反 ...

  4. asp.net 单元测试（转）

    最早接触单元测试是看了极限编程相关资料里边讲的测试驱动开发,然后下载了Nunit研究了一下,但并没产生多大的触动,因为那个时候做的都是些时间紧任务重的事情,对于单元测试的直接感觉就是有可能比较费时间. ...

  5. 《Head First 设计模式》之状态模式——糖果机

    状态模式(State) ——允许对象在内部状态时改变它的行为,对象看起来好像修改了它的类. 策略模式与状态模式的区别 状态主体(拥有者)持有状态对象,运行时可以通过动态指定状态对象来改变类的行为 策略 ...

  6. 根据tomcat日志查找想要的错误日志

    1.首先要记得程序报的错误信息 我的错误信息是[2015接收的参数中有空值],对应程序中的返回值是2015 以及出现错误信息的大致时间,我的大概是吃过午饭后,12:40-13:20之间 2.先去log ...

  7. Day3 Form表单

    Day3  Form表单 一.form表单 :提交数据    表单在网页中主要负责数据采集功能,它用<form>标签定义.    用户输入的信息都要包含在form标签中,点击提交后,< ...

  8. sass-基础

    导入: sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件. 但是如果你在sass文件中导入css文件如@import 'res ...

  9. 拖拽事件--select外边框拖拽

    地图上面的搜索框要可拖拽 但是搜索框是有点击事件的,点击显隐下拉菜单,如果拖拽的事件源选择select框的话,会有样式(十字拖动符cursor:move与selelt默认点击的箭头)冲突 思索良久,就 ...

  10. Android 监听APP进入后台或切换到前台方案对比

    在我们开发的过程中,经常会遇到需要我们判断app进入后台,或者切换到前台的情况.比如我们想判断app切换到前台时,显示一个解锁界面,要求用户输入解锁密码才能继续进行操作:我们想判断app切换到后台,记 ...