面试题：CSS伪元素选择器::before和::after的复杂动画与交互实现

Question

创建一个圆形的按钮（可以使用一个具有特定class的div来模拟），当鼠标悬停在按钮上时，使用::before和::after伪元素实现一个从按钮中心向外扩散的动态环形进度条效果（例如，环形进度条的颜色逐渐变化，宽度逐渐增加等动画效果），并且在动画结束后保持最终状态。请使用CSS关键帧动画以及伪元素选择器来实现这个复杂的交互效果，写出完整的CSS代码。

Answer 1

/* 定义按钮样式 */
.circular - button {
    position: relative;
    width: 100px;
    height: 100px;
    border - radius: 50%;
    background - color: #007BFF;
    cursor: pointer;
}

/* 定义 ::before 伪元素，用于环形进度条 */
.circular - button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border - radius: 50%;
    border - width: 5px;
    border - style: solid;
    border - color: transparent;
    border - top - color: #FFC107;
    animation: progress - expand 3s ease - in - out forwards;
    opacity: 0;
}

/* 定义 ::after 伪元素，用于环形进度条 */
.circular - button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border - radius: 50%;
    border - width: 5px;
    border - style: solid;
    border - color: transparent;
    border - top - color: #28A745;
    animation: progress - expand 3s ease - in - out forwards;
    animation - delay: 1s;
    opacity: 0;
}

/* 定义关键帧动画 */
@keyframes progress - expand {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 1;
    }
}

/* 鼠标悬停时触发动画 */
.circular - button:hover::before,
.circular - button:hover::after {
    animation - play - state: running;
}