console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涟漪效果</title>
    <style>
        .example {
            position: relative;
            margin: 150px auto;
            width: 50px;
            height: 50px;
        }

        .dot:before {
            content: " ";
            position: absolute;
            z-index: 2;
            left: 50%; /* 设置为50%以中心对齐 */
            top: 50%; /* 设置为50%以中心对齐 */
            width: 20px; /* 原点宽度 */
            height: 20px; /* 原点高度 */
            background-color: #0093E9; /* 中心小点颜色 */
            border-radius: 50%;
            transform: translate(-50%, -50%); /* 确保原点中心对齐 */
        }

        .dot:after {
            content: " ";
            position: absolute;
            z-index: 1;
            left: 50%; /* 设置为50%以中心对齐 */
            top: 50%; /* 设置为50%以中心对齐 */
            width: 30px; /* 涟漪的最大宽度 */
            height: 30px; /* 涟漪的最大高度 */
            background-color: transparent; /* 去掉背景颜色 */
            border: 1px solid #0093E9; /* 涟漪的边框颜色 */
            border-radius: 50%;
            animation-name: ripple; /* 动画属性名 */
            animation-duration: 1s; /* 动画持续时间 */
            animation-timing-function: ease; /* 动画频率 */
            animation-delay: 0s; /* 动画延迟时间 */
            animation-iteration-count: infinite; /* 无限循环 */
            animation-direction: normal; /* 动画方式 */
            transform: translate(-50%, -50%); /* 确保涟漪中心对齐 */
        }

        @keyframes ripple {
            0% {
                opacity: 1;
                width: 20px; /* 修改初始宽度 */
                height: 20px; /* 修改初始高度 */
            }
            100% {
                opacity: 0; /* 最后透明 */
                width: 30px; /* 涟漪的最大宽度 */
                height: 30px; /* 涟漪的最大高度 */
            }
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="dot"></div>
    </div>
</body>
</html>