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 动画，并设置了不同的延迟时间，以实现依次切换的效果。

应用场景

这种文字切换效果可以用于网站的标题、欢迎语、广告标语等，增加页面的动态效果和视觉吸引力。

参考链接

通过这种方式，你可以轻松实现简单的 CSS 文字切换效果。如果需要更复杂的效果，可以进一步调整动画和过渡的参数。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css文字切换效果代码

HTML

CSS (styles.css)

解释

应用场景

参考链接

相关·内容

PS小白教程:如何在Photoshop中制作雨天玻璃文字效果？

0基础前端项目实战，CSS实现效果电商商品展示效果

CSS小米商城侧边导航栏效果开发

PS小白教程:如何在Photoshop中制作浮在水面上的文字效果？

12.尚硅谷_jQuery_常见效果2_多TAB点击切换.avi

102.尚硅谷_HTML&CSS基础_压缩css代码.avi

文字转语音是怎么实现的？1行Python代码，不需要联网

鸿蒙开发：通过代码方式实现跟随系统深浅模式动态切换

22-尚硅谷-尚优选PC端项目-点击第一行商品参数的文字颜色排他效果

day01_17_尚硅谷_硅谷p2p金融_实现不同Fragment切换效果的实现

30_尚硅谷_Vue项目_登陆界面效果1_切换登陆方式.avi

33_尚硅谷_Vue项目_登陆界面效果4_切换密码的显示和隐藏.avi

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐