44、css实现水波纹效果

        <div class="container">
            <div class="wave"><span>50%</span></div>
        </div>

        <style type="text/css">
            .container {
                position: absolute;
                width: 100px;
                height: 100px;
                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: 100px;
                height: 100px;
                background-color: rgb(118, 218, 255);
                border-radius: 50%;
            }
            .wave::before,.wave::after {
                    content: "";
                    position: absolute;
                    width: 200px;
                    height: 200px;
                    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;
                }
            .wave::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);
                }
            }
            span{
                color: #76DAFF;
                font-weight: bold;
                font-size: 25px;
                z-index: 999;
                position: absolute;
                left: 25px;
                top: 25px;
            }
        </style>

效果图：

转载于:https://www.cnblogs.com/xlfdqf/p/11514435.html