<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>旋转的星球</title>

    <style type="text/css">

        .box {

            transform: scale(0.5);

            position: relative;

            padding: 1px;

            height: 300px;

            width: 300px;

        }

        .sunline {

            position: relative;

            height: 400px;

            width: 400px;

            border: 2px solid black;

            border-radius: 50%;

            margin: 50px 0 0 50px;

            display: flex;

            animation: rotate 10s infinite linear;

        }

        .sun {

            height: 100px;

            width: 100px;

            margin: auto;

            background-color: red;

            border-radius: 50%;

            box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;

        }

        .earthline {

            position: absolute;

            right: 0;

            top: 50%;

            height: 200px;

            width: 200px;

            margin: -100px -100px 0 0;

            border: 1px solid black;

            border-radius: 50%;

            display: flex;

            animation: rotate 2s infinite linear;

        }

        .earth {

            margin: auto;

            height: 50px;

            width: 50px;

            background-color: blue;

            border-radius: 50%;

        }

        .moon {

            position: absolute;

            left: 0;

            top: 50%;

            height: 20px;

            width: 20px;

            margin: -10px 0 0 -10px;

            background-color: black;

            border-radius: 50%;

        }

        @keyframes rotate {

            100% {

                transform: rotate(360deg);

            }

        }

    </style>

</head>

<body>

<div class="box">

    <div class="sunline">

        <div class="sun"></div>

        <div class="earthline">

            <div class="earth"></div>

            <div class="moon"></div>

        </div>

    </div>

</div>

<strong>【简要介绍】</strong>

<p>旋转的星球主要通过rotate()旋转函数来实现。实际上，蓝色的地球和黑色的月球并没有发生旋转，只是其父级旋转形成的视觉上的旋转效果</p>

</body>

</html>

效果图：

原链接：https://www.cnblogs.com/xiaohuochai/p/5419236.html

css3动画（animation）效果2-旋转的星球的更多相关文章

  1. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  2. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  3. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  4. CSS3动画animation认识，animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  5. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

  6. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  7. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  8. CSS3 动画3D视角下 旋转圆环

    首先是  transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...

  9. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  10. CSS3动画（360度旋转、旋转放大、放大、移动）

    Title div { width: 120px; height: 120px; line-height: 120px; margin: 20px; background-color: #5cb85c ...

随机推荐

  1. iOS学习之第二个View使用UITabBarViewController

    前面有一篇博文iOS学习之Tab Bar的使用和视图切换 这是在AppDelegate里使用Tabbar,这样的程序打开就是TabbarView了,有时候我们需要给程序做一些帮助页面,或者登录页面,之 ...

  2. HttpClient由Client客户端上传File文件流至Server服务端

    客户端方法 public static void main(String[] args) { File file=new File("E:\\lucene\\rev\\全年平台受理量.doc ...

  3. 【HDU1542】Atlantis

    题意 给出n个矩形的左下角和右上角的坐标,计算总的面积(相交部分只算一次). 分析 线段树扫描线的模板题. 将每个矩形都拆成上下两条线段,然后从下网上扫,当遇到底边时就加上这个区间,遇到顶边时,就减去 ...

  4. 快速上手Runtime（一）之消息机制

    Runtime简介 Runtime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C语言,函数的调用在编译的时候会决定调用哪个函数. 对于OC的函数,属于动态 ...

  5. CS4.1 RPM打包函数分析

    shell举例说明:脚本名称叫test.sh 入参三个: 1 2 3运行test.sh 1 2 3后$*为"1 2 3"(一起被引号包住)$@为"1" &quo ...

  6. Linux环境（Centos) 安装mysql

    MariaDB是mysql的开源分支,自从mysql被oracle收购商业化之后,mysql之父在mysql5.5开源的版本的基础上重新开了一个分支,centos也把MariaDB作为mysql的默认 ...

  7. SQLSERVER中常用的系统视图

    QLServer中提供了相当丰富的系统视图,能够从宏观到微观,从静态到动态反应数据库对象的存储结果.系统性能.系统等待事件等等.同时 也保留了与早期版本兼容性的视图,主要差别在于SQLServer20 ...

  8. Spring boot 开发组件

    一.Jboot 描述:Jboot是一个基于jfinal 和 undertow开发的微服务框架.提供了AOP.RPC.分布式缓存.限流.降级.熔断.统一配置中心.swagger api自动生成.Open ...

  9. 利用Ant与Proguard混淆

    利用Ant与Proguard混淆 摘自:https://blog.csdn.net/forlong401/article/details/22956711 2014年04月04日 20:20:21 f ...

  10. Docker 实现的 redis 主从

    计划用 Docker 实现 Redis 的主从,简单主从而已.主的名称叫 redis-master 一步步来. 先新建个Dockerfile ,从alpine 开始,比较简单. FROM alpine ...