闲来无事的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. 位于XDB的服务器localhost要求用户名和密码，端口占用

    问题现象: 从MyEclipse启动部署在tomcat上的web程序后,出现如下问题: 然后访问tomcat主页(http://localhost:8080/),弹出如下对话框: 问题原因: 机器上安 ...

  2. carousel 插件隐藏列表中几项导致左右切换出错

    1. 一般的应用场景: 用于左右快速切换显示的列表内容,比如对员工的切换. 对于这种情况必不可少需要按照部门进行搜索,目前我的做法是首次加载所有该用户可以查看的员工列表,选择部门后又选择的隐藏掉其他不 ...

  3. 《Head First 设计模式》之代理模式

    代理模式(Proxy):控制对象访问 ——为另一个对象提供一个替身或占位符来访问这个对象. 要点: 代理模式有许多变体,如:缓存代理.同步代理.防火墙代理和写入时复制代理 代理在结构上类似装饰者,但目 ...

  4. Chrome拷贝插件的对比 zeroclipboard和clipboard插件

    1.zeroclipboard插件 实现原理:Zero Clipboard 利用 Flash 进行复制,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就 ...

  5. 函数的返回值 return

    布尔类型返回 return 0:返回假: return 1:返回真:

  6. MongoDB之mongodb.cnf配置

    # mongodb3.2.1 的主配置文件,将此文件放置于 mongodb3.2.1/bin 目录下 # hapday 2016-01-27-16:55 start # 数据文件存放目录 dbpath ...

  7. Dojo 学习笔记 之 Dojo hitch&partial

    原文: http://dojotoolkit.org/documentation/tutorials/1.10/hitch/index.html 版本: Dojo 1.10 为了更好地使用JavaSc ...

  8. 厌烦了写findViewById 试试ButterKnife吧

    先上官网 http://jakewharton.github.io/butterknife/  和 https://github.com/JakeWharton/butterknife 配置开发环境 ...

  9. python3绘图示例6-2（基于matplotlib，绘图流程介绍及设置等）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import os import numpy as npimport matplotlib as mpltfro ...

  10. 初看Mybatis 源码 （二） Java动态代理类

    先抛出一个问题,用过Mybatis的都知道,我们只需要定义一个Dao的接口,在里面写上一些CRUD相关操作,然后配置一下sql映射文件,就可以达到调用接口中的方法,然后执行sql语句的效果,为什么呢? ...