css文字切换效果代码

CSS 文字切换效果可以通过 CSS 动画和过渡来实现。以下是一个简单的示例，展示了如何使用 CSS 实现文字切换效果：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 文字切换效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="text-switcher">
        <span class="text-item">Hello</span>
        <span class="text-item">World</span>
        <span class="text-item">CSS</span>
        <span class="text-item">Animation</span>
    </div>
</body>
</html>

CSS (styles.css)

.text-switcher {
    font-size: 2em;
    position: relative;
    width: fit-content;
}

.text-item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.text-switcher .text-item:first-child {
    opacity: 1;
}

@keyframes fade {
    0% { opacity: 1; }
    25% { opacity: 0; }
    50% { opacity: 0; }
    75% { opacity: 0; }
    100% { opacity: 1; }
}

.text-switcher .text-item:nth-child(2) {
    animation: fade 4s infinite;
}

.text-switcher .text-item:nth-child(3) {
    animation: fade 4s infinite 1s;
}

.text-switcher .text-item:nth-child(4) {
    animation: fade 4s infinite 2s;
}

解释

HTML 结构：我们创建了一个包含四个 <span> 元素的容器 .text-switcher，每个 <span> 元素代表一个要切换的文字。
CSS 样式：
- .text-switcher 设置了字体大小和相对定位。
- .text-item 设置了绝对定位，初始透明度为 0，并添加了一个 1 秒的透明度过渡效果。
- 第一个 .text-item 初始透明度为 1，确保它在动画开始时可见。
- 使用 @keyframes 定义了一个名为 fade 的动画，控制透明度的变化。
- 每个 .text-item 使用 animation 属性应用 fade 动画，并设置了不同的延迟时间，以实现依次切换的效果。