css 实现球里装水

<template>

<div class="container">

    <div class="wave"></div>

</div>

</template>

<script>

export default {

}

</script>

<style lang="scss">

.container {

    position: absolute;

    width: 200px;

    height: 200px;

    padding: 5px;

    border: 5px solid rgb(118, 218, 255);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    overflow: hidden;

}

.wave {

    position: relative;

    width: 200px;

    height: 200px;

    background-color: rgb(118, 218, 255);

    border-radius: 50%;

 

    &::before,

    &::after{

        content: "";

        position: absolute;

        width: 400px;

        height: 400px;

        top: 0;

        left: 50%;

        background-color: rgba(255, 255, 255, .4);

        border-radius: 45%;

        transform: translate(-50%, -70%) rotate(0);

        animation: rotate 6s linear infinite;

        z-index: 10;

    }

   

    &::after {

        border-radius: 47%;

        background-color: rgba(255, 255, 255, .9);

        transform: translate(-50%, -70%) rotate(0);

        animation: rotate 10s linear -5s infinite;

        z-index: 20;

    }

}

@keyframes rotate {

    50% {

        transform: translate(-50%, -73%) rotate(180deg);

    } 100% {

        transform: translate(-50%, -70%) rotate(360deg);

    }

}

</style>

转自： https://csscoco.com/inspiration/#/./border/border-wave-percent.md