[分享]css两个半圆过渡动画实现

CSS可以实现各种各样的动画效果，今天我们来介绍一种用CSS实现两个半圆过渡动画的方法。

 .half-circle-start{
        width: 100px;
        height: 50px;
        background-color: #F58220;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        position: relative;
        overflow: hidden;
    }
    .half-circle-start:after{
        content: ';
        position: absolute;
        top: 0;
        left: -50px;
        width: 50px;
        height: 50px;
        background-color: #F58220;
        border-radius: 50%;
        animation: half-circle 1s ease-in-out infinite;
    }
    .half-circle-end{
        width: 100px;
        height: 50px;
        background-color: #F58220;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        position: relative;
        overflow: hidden;
    }
    .half-circle-end:after{
        content: ';
        position: absolute;
        top: 0;
        right: -50px;
        width: 50px;
        height: 50px;
        background-color: #F58220;
        border-radius: 50%;
        animation: half-circle 1s ease-in-out infinite;
        animation-delay: 0.5s;
    }
    @keyframes half-circle{
        0%{ transform: translateX(0); }
        100%{ transform: translateX(100px); }
    } 

代码解释：

首先，我们分别定义了两个半圆的起始标签和结束标签，并对它们进行样式设置。我们在这里分别设置了它们的宽、高、背景颜色以及左右两个半圆的圆角大小和位置。

其次，我们在半圆的伪元素after标签中设置了样式，包括它的位置、大小、背景颜色、圆角大小和动画效果。这里我们使用animation属性来定义它的动画效果，使它在1秒内从左侧或右侧移动到对面的半圆。

最后，我们在动画的关键帧中定义了它的起始和结束状态，使它沿着X轴移动。我们将它的移动距离设置为100px，这样就能刚好滑过对面的半圆。

总结：这种方法可以用来实现一些特殊的设计需求，比如制作一个动态的进度条等。同时，这也是CSS动画的一种实现方式，大家可以掌握多种方法，在实际应用中灵活选择。