块绕点旋转，在动画中用

274 查看
   body{
            overflow: hidden;
        }
        main{
            width: 800px;
            height: 600px;
            margin: 100px auto;
            background-color: lightgray;

            position: relative;
        }
        #dot{
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 15px;

            /*放在main的中心*/
            position: absolute;
            top: calc(50% - 30px / 2);
            left: calc( 50% - 30px / 2);
        }

        #color{
            width: 100px;
            height: 100px;
            background-color: red;

            /*定宽居中*/
            margin: 100px auto;

            /*修改旋转中心为灰色块的中心；默认值是图形的中心点*/
            /*以颜色块的左上角为坐标原点，
            计算灰色块中心点的坐标值*/
            transform-origin: 50px 300px;
            /*动画*/

            /*动画的名称;多个动画名称以逗号分隔*/
            /*animation-name: rotate,changeColor;*/
            /*动画的时间*/
            animation-duration: 5s;

            /*保持动画状态*/
            animation-fill-mode: both;
            /*动画延迟*/
            animation-delay: 3s;

            /*动画的速率*/
            animation-timing-function: linear;
            /*动画的重复次数 infinite：无穷*/
            animation-iteration-count: infinite;
            /*动画的方向*/
            animation-direction: reverse;
        }

       /*改变颜色的动画*/
       @keyframes changeColor{
           from{
               background-color: red;
           }20%{
               background-color: yellow;
           }45%{
               background-color: blue;
           }60%{
               background-color: black;
           }77%{
               background-color: green;
           }100%{
               background-color: red;
           }
       }

       /*旋转的动画*/
      @keyframes rotate{
          from{
             transform: rotate(0deg);
          }to{
              transform: rotate(360deg);
          }
      }
    </style>
</head>
<body>
    <main>
        <section id="dot"></section>
        <section id="color"></section>
    </main>
</body>