css动画之旋转小圆圈实现一个轨迹旋转小圆圈分享一下！！！有了这个demo可以脑补一下实现更多的好看效果!!!!!!!

实现一个轨迹旋转小圆圈分享一下！！！

有了这个demo可以脑补一下实现更多的好看效果

图片.png

<!DOCTYPE html>
<html lang="zh-CN">
<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>旋转小球</title>
<style>
    body {
        width: 100%;
        height: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ccd7a85fde74510aa7cef829973789c~tplv-k3u1fbpfcp-watermark.image?)
    .box {
        width: 200px;
        height: 200px;
        background: transparent;
        border: 10px solid #b4cb2f;
        border-radius: 50%;
        position: relative;
        animation: rounded 3s infinite linear;
    }

    @keyframes rounded {
        0% {
            rotate: 0deg;
        }
        100% {
            rotate: 360deg;
        }
    }


    .box::before {
        position: absolute;
        top: 10px;
        left: 10px;
        content: "";
        width: 30px;
        height: 30px;
        background: pink;
        border-radius: 50%;
    }
</style>

</head>

<body>
    <div class="box"></div>
</body>

</html>