css特效

/* 示例代码：CSS 动画特效 */

/* 1. 颜色渐变动画 */
@keyframes colorChange {
    0% { background-color: red; }
    50% { background-color: blue; }
    100% { background-color: green; }
}

.color-animation {
    width: 100px;
    height: 100px;
    animation: colorChange 5s infinite;
}

/* 2. 文字闪烁效果 */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blink-text {
    animation: blink 1s step-end infinite;
}

/* 3. 悬停放大效果 */
.hover-grow {
    transition: transform 0.3s ease;
}

.hover-grow:hover {
    transform: scale(1.2);
}

/* 4. 弹跳效果 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

.bounce-effect {
    animation: bounce 2s infinite;
}

解释说明：

1. 颜色渐变动画：通过 @keyframes 定义了一个从红色到蓝色再到绿色的背景颜色变化动画，并应用到 .color-animation 类中，动画持续时间为 5 秒，无限循环。

2. 文字闪烁效果：通过 @keyframes 定义了一个不透明度在 0 和 1 之间切换的动画，使文本看起来像是在闪烁，动画持续时间为 1 秒，无限循环。

3. 悬停放大效果：使用 transition 实现了当鼠标悬停时元素逐渐放大的效果。transform: scale(1.2) 表示放大到原始大小的 1.2 倍。

4. 弹跳效果：通过 @keyframes 定义了一个弹跳动画，使元素在垂直方向上上下移动，模拟弹跳的效果，动画持续时间为 2 秒，无限循环。