[分享]css3怎样让圆在圆上面转圈

CSS3是前端设计中非常重要的一部分，它可以让网页拥有更多的效果，其中之一就是在圆上面让圆转圈。下面我们来看一下实现的详细方式。 .outer { : relative; width: 200px; ...

CSS3是前端设计中非常重要的一部分，它可以让网页拥有更多的效果，其中之一就是在圆上面让圆转圈。下面我们来看一下实现的详细方式。

 .outer {
        position: relative;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: lightblue;
    }
    .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: pink;
        animation: rotate 5s linear infinite;
    }
    @keyframes rotate {
        from {
            transform: translate(-50%) rotate(0deg);
        }
        to {
            transform: translate(-50%) rotate(360deg);
        }
    } 

首先，我们需要创建一个外层的圆，使用border-radius属性让它成为一个圆形。然后，我们在外层圆的div中创建一个内层圆的div，利用position和transform属性使其在外层圆中心。最后利用CSS3新的动画属性animation，实现内层圆在外层圆上绕圆心转动的效果。