css圆环运动的两种写法

圆环运动如下，小圆绕大圆运动

 写法有如下两种：

1. transform-origin使用外部旋转点

2. transform-origin使用内旋转点，两圆重合，即不使用transform-origin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
      *{margin: 0;border: 0;box-sizing: border-box;}
      body{padding-top: 100px;padding-left: 100px;display: flex;}
      .c1{
        width: 200px;
        height: 200px;
        border: 2px solid salmon;
        border-radius: 50%;
        position: relative;
        margin: 0;
      }
      .c2{
        width: 30px;
        height: 30px;
        border: 2px solid skyblue;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin-left: -15px;
        margin-top: -15px;
        animation: rt1 linear infinite 4s;
        transform-origin: center 113px; /* 大圆半径 + 小圆半径 - 大圆border */
      }
      @keyframes rt1 {
        100% {
          transform: rotate(360deg);
        }
      }
      .d1{
        width: 200px;
        height: 200px;
        border: 2px solid salmon;
        border-radius: 50%;
        display: grid;
        place-items: center;
        margin-left: 150px;
      }
      .d2{
        width: 30px;
        height: 30px;
        border: 2px solid skyblue;
        border-radius: 50%;
        animation: rt3 linear infinite 4s;
        display: grid;
        place-items: center;
      }
      /*顺时针旋转，元素旋转*/
      @keyframes rt2 {
        0% {
            transform: rotate(0) translate(-100px);
        }
        100% {
          transform: rotate(360deg) translate(-100px);
        }
      }
      /*逆时针旋转，且保证元素始终正向显示，不旋转*/
      @keyframes rt3 {
        0% {
            transform: rotate(0) translate(100px) rotate(0);
        }
        100% {
            transform: rotate(-360deg) translate(100px) rotate(360deg);
        }
      }
    </style>
</head>
<body>
    <div class="c1"><div class="c2"></div></div>
    <div class="d1"><div class="d2">2</div></div>
</body>
</html>

 

posted @ 2023-07-19 09:59  全玉  阅读(518)  评论(0)  编辑  收藏  举报