梦寐

文字绕圆旋转动画

 <style>
        .container {
            width: 600px;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
            margin: 10vh auto;
        }

        .line {
            width: 400px;
            height: 400px;
            border: 1px solid #666;
            border-radius: 50%;
            position: relative;
            /* 匀速 循环 */
            animation: myRotate 20s linear infinite;
        }

        .slideCircle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: pink;
            position: absolute;
            /* 三角函数计算约等于 */
            top: 8px;
            left: 8px;
            text-align: center;
            line-height: 100px;
            animation: myRotate1 20s linear infinite;
        }


        /* 正向旋转*/
        @keyframes myRotate {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 反向旋转，视觉文字不变 */
        @keyframes myRotate1 {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(-360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 轨迹 -->
        <div class="line">
            <!-- 滑动点 -->
            <div class="slideCircle">
                动画
            </div>
        </div>
    </div>
</body>