<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <style>

        * {

            padding:0px;

            margin:0px;

        }

        body {

            transform:scale(0.4)

        }

        .da {

            margin-top:10%;

            margin-left:30%;

            width:400px;

            height:400px;

            border:1px solid  #000000;

            position:relative;

            display:flex;

            border-radius:50%;

            animation:rot 10s infinite linear;

        }

        .hong{

            width:50px;

            height:50px;

            background-color:red;

            border-radius:50%;

            margin:auto;

        }

        .xiaoquan {

           width:200px;

           height:200px;

           border:1px solid #000000;

           position:absolute;

           top:50%;

           right:0;

           display: flex;

           border-radius:50%;

           animation:rot 10s infinite linear;

           margin:-100px -100px 0 0;

        }

        .lan {

           width:40px;

           height:40px;

           background-color:#0026ff;

           margin:auto;

           margin-left:80px;

           border-radius:50%;

        }

        .wuquan {

           width:100px;

           height:100px;

           border:1px solid #000000;

           position:absolute;

           top:50%;

           right:0;

           display: flex;

           border-radius:50%;

           animation:rot 10s infinite linear;

           margin:-50px -50px 0 0;

        }

        .cheng {

          width:30px;

          height:30px;

          background-color:#ff6a00;

          margin:auto;

          border-radius:50%;

        }

      .lv {

         width:20px;

         height:20px;

         background-color:#4cff00;

         position:absolute;

         margin:40px 0 0 -10px;

         border-radius:50%;

      }

        .xiaquan {

        width:200px;

        height:200px;

        border:1px solid #000000;

        position:absolute;

        top:50%;

        right:0;

        display: flex;

        border-radius:50%;

        animation:rot 10s infinite linear;

        margin:100px 100px 0 0;

      }

        .xiawuquan {

        width:100px;

        height:100px;

        border:1px solid #000000;

        position:absolute;

        top:50%;

        right:0;

        display: flex;

        border-radius:50%;

        animation:rot 10s infinite linear;

        margin:50px 50px 0 0;

      }

        .xialv {

        width:20px;

        height:20px;

        background-color:#4cff00;

        position:absolute;

        margin:-10px 0 0 40px;

        border-radius:50%;

      }

        .zuoquan {

        width:200px;

        height:200px;

        border:1px solid #000000;

        position:absolute;

        top:50%;

        right:0;

        display: flex;

        border-radius:50%;

        animation:rot 10s infinite linear;

        margin:-100px 300px 0 0;

     }

        .zuowuquan {

        width:100px;

        height:100px;

        border:1px solid #000000;

        position:absolute;

        top:50%;

        right:0;

         display: flex;

        border-radius:50%;

        animation:rot 10s infinite linear;

        margin:-50px 150px 0 0;

    }

        .zuolv {

        width:20px;

        height:20px;

        background-color:#4cff00;

        position:absolute;

        margin:40px 0 0 90px;

        border-radius:50%;

    }

        .shangquan {

        width:200px;

        height:200px;

        border:1px solid #000000;

        position:absolute;

        top:50%;

        right:0;

        display: flex;

        border-radius:50%;

        animation:rot 10s infinite linear;

        margin:-300px 100px 0 0;

     }

        .shangwuquan {

        width:100px;

        height:100px;

        border:1px solid #000000;

        position:absolute;

        top:50%;

        right:0;

        display: flex;

        border-radius:50%;

        animation:rot 10s infinite linear;

        margin:-150px 50px 0 0;

     }

        .shanglv {

        width:20px;

        height:20px;

        background-color:#4cff00;

        position:absolute;

        margin:90px 0 0 40px;

        border-radius:50%;

     }

        @keyframes rot {

        100% {transform:rotate(360deg) }

     }

    </style>

</head>

<body>

    <div class="da">

        <div class="hong"></div>

        <div class="xiaoquan">

            <div class="lan"></div>

            <div class="wuquan">

                <div class="cheng"></div>

                <div class="lv"></div>

            </div>

        </div>

        <div class="xiaquan">

            <div class="lan"></div>

            <div class="xiawuquan">

                <div class="cheng"></div>

                <div class="xialv"></div>

            </div>

        </div>

        <div class="zuoquan">

            <div class="lan"></div>

            <div class="zuowuquan">

                <div class="cheng"></div>

                <div class="zuolv"></div>

            </div>

        </div>

        <div class="shangquan">

            <div class="lan"></div>

            <div class="shangwuquan">

                <div class="cheng"></div>

                <div class="shanglv"></div>

            </div>

        </div>

    </div>

</body>

</html>

旋转的球（animation与 transform）的更多相关文章

  1. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  2. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS製作動畫效果(Transition、Animation、Transform)

    CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...

  4. animation，transform属性

    animation属性 使用@keyfarmes属性开启动画步骤 结构体:@keyfarmes name{ from{ } to{ } } @keyfarmes name{ 0%{ } 50%{ } ...

  5. animation transition transform

    animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...

  6. #8.12.16总结#background transition、animation、transform

    background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...

  7. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  8. CSS3与动画有关的属性transition、animation、transform对比

    最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...

  9. animation,transition,transform小练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SQLFlow——一个强大的可视化SQL关系分析工具

    SQLFlow 摘要 本文主要介绍SQLFlow是什么,以及它的功能及使用场景 SQLFlow是什么 SQLFlow是一个可视化的在线处理SQL对象依赖关系的工具,只需要上传你的SQL脚本,它可以自动 ...

  2. 【转载】8.2.1 CPU性能测试工具

    (KVM连载) 8.2.1 CPU性能测试工具 01/08/2013master 1 Comment 8.2.1 CPU性能测试工具 CPU是计算机系统中最核心的部件,CPU的性能直接决定了系统的计算 ...

  3. Linux软件安装管理之——dpkg与apt-*详解 apt命令（dpkg和apt代替rpm）

    apt list *python* Nosee123关注赞赏支持   Linux软件安装管理之--dpkg与apt-*详解 [Linux软件安装管理系列]- - 传送门: - -<Linux软件 ...

  4. yum 命令详解-yum仓库配置文件详解

    yum安装的优点 1.必须得有网络,通过网络获取软件. 2.管理rpm包 3.自动解决依耐 4.命令简单好用 5.生产最佳实践 yum命令详解 # linux安装软件的三种方式 1.rpm安装 2.源 ...

  5. 云计算OpenStack---云计算、大数据、人工智能（14）

    一.互联网行业及云计算 在互联网时代,技术是推动社会发展的驱动,云计算则是一个包罗万象的技术栈集合,通过网络提供IAAS.PAAS.SAAS等资源,涵盖从数据中心底层的硬件设置到最上层客户的应用.给我 ...

  6. Linux进阶之Linux破解密码、yum源配置、防火墙设置及源码包安装

    一.老师语录: 所有要求笔试的公司都是垃圾公司 笔试(是考所有的涉及到的点) 要有自己的卖点.专长(给自己个标签)(至少一个) 生产环境中,尽量使用mv(mv到一个没用的目录下),少使用rm 二.防火 ...

  7. MyBatis 项目开发中是基于 XML 还是注解？

    只要你对 MyBatis 有所认识和了解,想必知道 MyBatis 有两种 SQL 语句映射模式,一种是基于注解,一种是基于XML. 基于 XML <mapper namespace=" ...

  8. STM32程序的启动

    普及: 不同位置启动首需要硬件上的配合:BOOT1与BOOT0 引脚电平配合,一般默认使用主闪存存储: 也就是BOOT0 = 0; 启动时将现在起始模式的初始地址映射到了0x0000 0000,内部S ...

  9. 《Java架构师的最佳实践》生产环境JVM调优之空间担保失败引起的FullGC

    1  问题现象 应用prod-xxx-k8s,在内存足够的情况下,仍然会产生偶发FullGC的问题. JVM配置如下: -Xmx8192m -Dhsf.server.max.poolsize=2500 ...

  10. 大数据学习之路——MySQL基础（一）——MySQL的基础知识与常见操作

    一.存储引擎 1.含义 存储引擎是数据库底层软件组织,数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引 ...