CSS如何实现表单输入波纹扩散？径向渐变背景动画

::after

::before

radial-gradient

animation

overflow: hidden

<div class="input-wrapper">
    <input type="text" placeholder="请输入内容...">
</div>

.input-wrapper {
    position: relative; /* 伪元素的定位基准 */
    display: inline-block; /* 或者 block，看你布局需要 */
    overflow: hidden; /* 裁剪波纹超出部分 */
    border-radius: 4px; /* 如果输入框有圆角，这里也给个 */
    /* 随便给个背景或边框，让输入框看起来像个输入框 */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

.input-wrapper input {
    width: 200px;
    padding: 10px 15px;
    border: none; /* 移除输入框自带边框 */
    background: transparent; /* 确保输入框背景透明，能看到波纹 */
    outline: none; /* 聚焦时不显示默认轮廓 */
    font-size: 16px;
    position: relative; /* 确保输入框在波纹之上 */
    z-index: 1; /* 确保输入框在伪元素之上 */
}

.input-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%); /* 居中伪元素 */
    background-image: radial-gradient(circle at center, rgba(65, 105, 225, 0.3) 0%, transparent 70%); /* 径向渐变，从中心到透明 */
    border-radius: 50%; /* 确保是圆形 */
    opacity: 0; /* 默认隐藏 */
    pointer-events: none; /* 避免遮挡鼠标事件 */
    transition: width 0s, height 0s, opacity 0s; /* 初始状态无过渡 */
}

.input-wrapper input:focus + .input-wrapper::after { /* 这种选择器有点意思，它表示当input聚焦时，找到它旁边的.input-wrapper::after。但这里是input在wrapper里面，所以我们需要调整下逻辑。 */
    /* 正确的逻辑应该是当 input-wrapper 内部的 input 聚焦时，触发 input-wrapper 自身的伪元素动画。
       所以，这里需要用 :focus-within 或者直接在 input-wrapper 上添加一个 class 来控制，
       或者更直接点，当 input 聚焦时，直接控制 input-wrapper::after。 */
}

/* 更好的做法是这样，当 input 聚焦时，我们让伪元素动起来 */
.input-wrapper input:focus ~ .input-wrapper::after, /* 如果伪元素是 input 的兄弟 */
.input-wrapper input:focus + .input-wrapper::after, /* 如果伪元素是 input 的紧邻兄弟 */
.input-wrapper:focus-within::after { /* 推荐这种，当父元素内部有元素聚焦时 */
    animation: ripple-effect 0.6s ease-out forwards;
}

@keyframes ripple-effect {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 250px; /* 扩散的最终尺寸，需要足够大 */
        height: 250px;
        opacity: 0; /* 扩散后逐渐消失 */
    }
}

input-wrapper:focus-within::after

.input-wrapper

::after

input:focus

250px

radial-gradient

radial-gradient

border-radius

radial-gradient

radial-gradient

box-shadow

radial-gradient

radial-gradient

width

height

opacity

background-image: radial-gradient(...)

div

radial-gradient

@keyframes

transform

-webkit-

-moz-

-ms-

-o-

radial-gradient

animation

will-change

::after

will-change: transform, opacity, width, height;

animation-timing-function

ease-out

linear

animation-fill-mode: forwards

em

rem

px

px

:active