动画-水球图

水球图
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="wave progress-{{percent}}" style="width:90px;height:90px;">
        <!--    <div class="title">
                <div>匹配度</div>20%
            </div> -->
        </div>
    </body>
    <style type="text/css">
        .wave {
            position: relative;
            background: linear-gradient(180deg, #8BC0FF 0%, #ABD1FF);
            background: #69AEFF;
            box-shadow: 0px 1px 16rpx 0px #EEEEEE;
            opacity: 0.7;
            border-radius: 50%;
            overflow: hidden;
            z-index: 1;
        }

        /* .wave::before, */
        .wave::after {
            content: "";
            position: absolute;
            width: 200%;
            height: 200%;
            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;
        }

        .wave::after {
            border-radius: 35%;
            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);
            }
        }

        .title {
            color: #005BC7;
            font-size: 20rpx;
            font-weight: bold;
            position: absolute;
            top: 20rpx;
            width: 100%;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 30;
            text-align: center;
        }
    </style>
</html>
动画-水球图

推荐阅读更多精彩内容
