<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. Spring 实现策略模式--自定义注解方式解耦if...else

    策略模式 定义 定义一簇算法类,将每个算法分别封装起来,让他们可以互相替换,策略模式可以使算法的变化独立于使用它们的客户端 场景 使用策略模式,可以避免冗长的if-else 或 switch分支判断 ...

  2. [刷题] PTA 6-7 统计某类完全平方数

    要求: 实现一个函数,判断任一给定整数N是否满足条件:它是完全平方数,又至少有两位数字相同,如144.676等. 函数接口定义: int IsTheNumber ( const int N ); 其中 ...

  3. CPU 使用率 100% 怎么办

    CPU 使用率 100% 怎么办 独家号 码上实战 作者 flyhero原文链接 工作中遇到CPU使用率100%,不要慌,一起来找出原因并fix掉它. 记住这里大致流程,当线上突然遇到时,也不必手足无 ...

  4. gcc 版本

    $ gcc --versiongcc (Ubuntu 5.4.0-6kord1~16.04.4k2) 5.4.0 20160609Copyright (C) 2015 Free Software Fo ...

  5. IEEE 网址

    https://ieeexplore.ieee.org/document/506397

  6. Linux服务之DNS服务篇

    一.DNS服务概述 DNS(Domain Name System)域名系统,在TCP/IP 网络中有非常重要的地位,能够提供域名与IP地址的解析服务. DNS 是一个分布式数据库,命名系统采用层次的逻 ...

  7. 9.7 top：实时显示系统中各个进程的资源占用状况

    top命令 用于实时地对系统处理器状态进行监控,它能够实时地显示系统中各个进程的资源占用状况.该命令可以按照CPU的使用.内存的使用和执行时间对系统任务进程进行排序显示,同时top命令还可以通过交互式 ...

  8. 若依框架前端使用antd,IE11浏览器无法正常显示问题

    话不多说,直接上才艺,找到vue.config.js,把第11行的 mock 删除掉就 IE11就正常显示了, 然而项目还是不支持IE10 以及以下版本,哪位小伙伴有解决方法,可以留言交流下

  9. SqlServer事务详解（事务隔离性和隔离级别详解）

    概述 不少人对于事务的使用局限于begin transaction:开始事务.commit transaction:提交事务.rollback transaction:回滚事务的初步运用. 并且知道使 ...

  10. android Room数据库仓库模式