SOURCE

<div id="app">
    <div id="content" style="top: 40%"></div>
</div>

<!- 改变top数值， 90对应10  60对应40 ->

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#app {
    width: 100px;
    height: 250px;
    border: red 1px solid;
    overflow: hidden;
    border-radius: 50px 50px;
}

#content {
    position: relative;
}

#content::before, #content::after {
    content: "";
    position: absolute;
    top: px;
    left: -450px;
    width: 1000px;
    height: 1000px;
    animation: run linear 6s infinite;
    filter: blur(1px);
}

#content::before {
    border-radius: 47% 53%;
    background: rgba(0,144,255, 1);;
}

#content::after {
    border-radius: 53% 47%;
    background: rgba(0,144,255, 1);;
}

@keyframes  run {
    0%{
        transform:rotate(0deg);
    }
    25% {
        transform:rotate(90deg);
    }
    75%{
        transform:rotate(270deg);
    }
    100% {
        transform:rotate(360deg);
    }
}