纯css3实现圆点围绕圆圈匀速无限旋转

最新推荐文章于 2025-06-12 09:17:51 发布

原创最新推荐文章于 2025-06-12 09:17:51 发布 · 1w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css3实现圆点围绕 #css圆点旋转

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何仅使用CSS3来创建一个圆点围绕圆圈匀速无限旋转的效果，相较于常见的使用JavaScript实现的方法，CSS3实现的方式能带来更好的效果和性能优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个东西只是一个思路，大部分的效果都是通过js实现的，但是这里通过css3实现，其实效果要好得多，而且我建议很多效果如果可以通过css实现，要比js实现的效果要好

这里写图片描述

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8" />  
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />  
    <title>Document</title>  
    <style type="text/css">  
    *{  
        margin: 0;  
        padding: 0;  
    }  
    .box{  
        position: relative;  
        width: 300px;  
        height: 300px;  
        border: 5px solid deepskyblue;  
        border-radius: 50%;
        margin-left: 300px;  
    }  
    .box i{  

        width: 300px;  
        height: 300px;  
        position: absolute;  

        /*旋转动画*/  
        animation:circleRoate 5s infinite linear ;   

    }  
    .box i span{  
        position: absolute;  
        left: 240px;  
        top: 25px;  
        width: 10px;  
        height: 10px;  
        border-radius: 50%;  
        background:#ff6200;  
    }  
    @keyframes circleRoate{  
        from{transform: rotate(0deg);}  
        to{transform: rotate(360deg);}  
    }  
</style>  
</head>  
<body>  
    <br>
    <br>
    <br>
    <br>
    <div class="box">  
        <i><span></span></i>  
    </div>  
</body>  
</html>