闲来无事的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. Unity Animation动画倒播

  2. Linux常用操作命令介绍

     Linux常用操作命令介绍 重要概念 CPU:就像人的大脑,主要负责相关事情的判断以及实际处理的机制.查询指令:cat /proc/cpuinfo 内存:大脑中的记忆区块,将皮肤.眼睛等所收集到的信 ...

  3. java代码混淆

    仅做记录之用. java代码可以反编译,因此有时候要保护自己的知识产权还真得费点心思,一般来说有三个思路: 1.将class文件加密,这个是最安全的,但也费事儿,因为要重写classloader来解密 ...

  4. .NET面试题4

    常见面试题目: 1.字符串是引用类型类型还是值类型? 2.在字符串连接处理中,最好采用什么方式,理由是什么? 3.使用 StringBuilder时,需要注意些什么问题? 4.以下代码执行后内存中会存 ...

  5. Offic转换pdf 之asposeDLL插件

    //excel转换 Workbook workbook = new Workbook(HttpContext.Current.Server.MapPath(docpath + "/" ...

  6. maven课程 项目管理利器-maven 3-2 maven自动建立目录骨架

    使用cmd创建maven目录的两种方式: 使用archetype插件 1 按照提示进行选择  步骤: a 进入指定目录 b mvn archetype:generate --创建项目目录 c ente ...

  7. html 01前沿-web介绍

    1. 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 2. 浏览器(显示代码) 浏览器是网页显示.运行的平台,常用的浏览器有IE.火 ...

  8. centos7服务器搭建javaweb运行环境及代码部署

    之前在一直在学习java web终于写完了第一个小demo,于是在阿里云上买了一个服务器,开始了配置服务器环境的踩坑之旅.... ps:本文不讨论服务器配置的具体步骤,网上都很多,按部就班就是,本文主 ...

  9. 初看Mybatis 源码 （一）

    Mybatis 的使用,首先需要构建一个SqlSessionFactory 实例.而该实例可以通过SqlSessionFactoryBuilder来创建. String resource = &quo ...

  10. 解决使用phpmyadmin导出导入数据库时提示的“超出长度”、“超时”问题

    IIS请求筛选模块被配置为拒绝超过请求内容长度的请求 1. 修改IIS的applicationhost.config a.文件位置: %windir%/system32/inetsrv/config/ ...