css3-水波浪球起伏效果

css3-水波浪球起伏效果

案例知识点：

display:grid；网格布局

box-shadow: inset 0 0 50px rgba(0,0,0,0.5); 内阴影

水平居中设置：

position: absolute;

top: 0;

left: 50%;

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

自定义动画

animation: awave 3s linear infinite;

@keyframes awave { }

html:

    <section class="circle">
        <span class="wave"></span>
    </section>

css:

       <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            display: grid;
            justify-content: center;
            align-content: center;
            background-color: #fff;
        }
        .circle{
            width: 150px;
            height: 150px;
            border: 5px solid #fff;
            box-shadow: 0 0 0 5px #4973ff;
            border-radius: 50%;
        }
        .circle .wave{
            display: block;
            width: 100%;
            height: 100%;
            background-color: #4976ff;
            border-radius: 50%;
            box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
            position: relative;
            overflow: hidden;
            z-index: 0;
        }
        .circle .wave::before, .circle .wave::after{
            content: '';
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%,-75%);
        }
        .circle .wave::before{
            border-radius: 35%;
            background-color: rgba(255,255,255,1);
            animation: awave 3s linear infinite;
        }
        .circle .wave::after{
            border-radius: 30%;
            background-color: rgba(255,255,255,0.5);
            animation: awave 3s linear infinite;
        }
        @keyframes awave {
            0%{
                transform: translate(-50%,-75%) rotate(0deg);
            }
            100%{
                transform: translate(-50%,-75%) rotate(360deg);
            }
        }
    </style>

注意：

.circle .wave{ } 这个类里面，需要添加 overflow:hidden。如果不加，圆的上半部分显示不出来。