CSS特效

水波球

HTML

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

CSS3代码

        /*容器显示外层圆框和居中*/
        .container {
            position: absolute;
            width: 150px;
            height: 150px;
            padding: 5px;
            /*外层圆框及颜色*/
            border: 5px solid rgb(118, 218, 255);
            /*居中核心代码*/
            /*先让container左上角和父容器中心对齐*/
            top: 50%;
            left: 50%;
            /*在向左和向上平移container宽和高的一半*/
            transform: translate(-50%, -50%);
            /*这会让container变成一个圆形*/
            border-radius: 50%;
            overflow: hidden;
        }
        .wave {
            position: relative;
            width: 150px;
            height: 150px;
            background-color: rgb(118, 218, 255);
            border-radius: 50%;
            box-shadow: inset 0 0 30px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5);

            /*水波通用代码*/
            &::before,
            &::after{
                content: "";
                position: absolute;
                /*大小一定要是显示部分的二倍*/
                width: 300px;
                height: 300px;
                top: 0;
                left: 50%;
                background-color: rgba(255, 255, 255, .4);
                /*圆角45度市水波的关键*/
                border-radius: 45%;
                transform: translate(-50%, -70%) rotate(0);
                animation: rotatekeyframe 6s linear infinite;
                z-index: 10;
            }
            /*为了做两层水波*/
            &::after {
                border-radius: 47%;
                background-color: rgba(255, 255, 255, .9);
                transform: translate(-50%, -70%) rotate(0);
                animation: rotatekeyframe 10s linear -5s infinite;
                z-index: 20;
            }
        }

        /*&::before和&::after的旋转效果*/
        @keyframes rotatekeyframe {
            50% {
                transform: translate(-50%, -73%) rotate(180deg);
            } 100% {
                  transform: translate(-50%, -70%) rotate(360deg);
            }
        }

来源: