[分享]css3围着一个点左右晃

CSS3可以实现很多有趣的效果，比如围绕一个点左右晃动的效果。下面我们就来看一下如何实现这个效果。

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: circle-move 2s linear infinite;
}

@keyframes circle-move {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
} 

上述代码中，我们首先创建了一个圆形，宽高为50px，并且设置了圆角为50%。然后将其绝对定位在屏幕中心，并通过translate函数进行定位。接着通过animation属性实现动画效果。动画名称为circle-move，循环间隔为2s，使用线性运动曲线，并且动画将无限循环。

在关键帧中，我们使用了三个关键帧，分别对应动画开始、中间和结束的状态。开始时将transform属性设置为translate(-50%, -50%) rotate(0deg)，即不偏移，并且旋转度数为0。中间时将transform属性设置为translate(-50%, -50%) rotate(180deg)，即向左旋转180度。结束时将transform属性设置为translate(-50%, -50%) rotate(360deg)，即向右旋转一个360度，使得圆形又回到了起点位置。

这样我们就实现了一个简单的围绕一个点左右晃动的效果。很多时候，通过CSS3可以实现一些看似复杂的效果，实际上却非常简单。