开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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 文字切换效果。如果需要更复杂的效果，可以进一步调整动画和过渡的参数。

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

有帮助

没帮助

相关·内容

css文字底部阴影效果

今天要实现一个文字的阴影效果，大概是这个样子的代码如下： css文字阴影效果新闻资讯 123456789101112131415161718192021222324252627282930313233 效果如下

2K3 0

文字闪烁效果 CSS + HTML

文字闪烁效果 CSS 写在前面好好学习，天天向上！...效果图绝美的效果实现过程先给没字体添加一些普通的样式，颜色设置为透明给文字设置一个动画效果，通过text-shadow属性来实现变亮的效果，同时通过透明色和白色的切换实现文字闪烁的效果给每个字设置一定的动画延时...，从而实现流水的效果代码部分 HTML b l a...p i n k CSS...0 100px pink; } 30%,90% { color: transparent; text-shadow: none; } } 完整代码

9K2 0

CSS实现全屏切换效果

如何通过CSS使div实现全屏效果全屏要素全屏的元素及其父元素都要设置height:100% 将html、body标签设置height:100% （注：height:100%是跟随其父元素高度变化而变化的...） 1.图片横排展示全屏切换效果 this is the page 展示效果...2.图片竖排展示全屏切换效果 this is the page 展示效果

2.8K2 0

纯css3艺术文字样式效果代码

大家好，又见面了，我是全栈君效果：http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现....参考：http://hovertree.com/h/bjaf/css3_text_effect.htm 代码如下： <!...技巧纯CSS3邮件、旗帜、音乐、文件和眼睛的… CSS热门知识点总结井号后带三位数字或者字母表示的颜色 css3改变选择文本背景颜色 CSS3实现背景颜色渐变 pre强制换行代码纯CSS3漂亮的房子不错的天气...种选择器详解 CSS3的text-overflow CSS3女神图片旋转木马用CSS让文字居于div的底部 CSS transform中的rotate的旋转中心 css3给div加阴影 css强制换行...立体3D文字样式 CSS3的background-size: cover; css3鼠标悬停(hover)打开打火机代码发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn

9882 0

CSS_文字环绕效果_float

viewport" content="width=device-width, initial-scale=1.0"> 浮动演示 css...} 文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕... 这里发现了一个很有意思的事情，当文字是中文时，上面的代码是可以实现环绕效果的，结果如下图： ?...但是如果上面的文字换成全部都是英文，结果变成下图： ? 如果是中文开头英文跟上，就变成了下面这样子，虽然我没有断句或者断行 ? 当我在开头和中间都加上中文，就变成了这样： ?

2.4K1 0

CSS3图片模糊切换效果

今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter...DOCTYPE html> css3图片过滤效果 body{ background: #eee; } .gallery{ list-style...text-align:center">html5-html5_css3

3.4K4 0

纯CSS实现的卡片切换效果

纯CSS实现的卡片切换效果无需JS就可以实现限于纯静态页面产品展示不需要轮播,自动切换示例代码 css-tab....container.dwo { margin-top: 20px; } .example-css-tab .card { position: absolute; height...#slideImg:checked ~ .inner_part { padding: 0; transition: 0.1s ease-in; } .example-css-tab ....#slideImg:checked ~ .inner_part .content { display: none; } .example-css-tab #slide_1:checked ~...input { display: none; } 实现这个css切换,主要是利用input的一个radio特性,利用input中的id属性与label的for进行关联因为多个

6541 0

CSS实现图片悬停文字叠加效果

引言在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。...编写HTML 我们的 html 代码非常简单，只有几行：效果。...最后设置一下动画过度效果transition，以及一些想要的字体相关的css属性，这里大家可以自行调整 .image { position: relative; width: 30%;...我们用这样的代码创建了三个很酷的 CSS Hover 效果。希望这对你有帮助。

3.8K2 0

css实现涂绘文字的效果

学习来自B站 HTML5+CSS3小实例：文字涂抹动画_哔哩哔哩_bilibili 先看效果: 分析思路定义好一个div盒子里面放文本内容再在div盒子设置伪元素,父级设置position: relative...最后就是实现动画的关键了也很简单,就是在起始伪元素的宽度为0% ;结束的时候为父级的100% 设置动画时长速度运动曲线执行次数光标是通过给伪元素添加右边框实现的,有点拉,但有些样子(狗头保命) 具体代码

831 0

CSS实现图片悬停文字叠加效果

引言在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。 ?...编写HTML 我们的 html 代码非常简单，只有几行：效果。...最后设置一下动画过度效果transition，以及一些想要的字体相关的css属性，这里大家可以自行调整 .image { position: relative; width: 30%;...我们用这样的代码创建了三个很酷的 CSS Hover 效果。希望这对你有帮助。强烈推荐给你们推荐一下我的个人博客，拥有大量优质文章、面试宝典、算法精选，欢迎访问~

3.5K2 0

CSS text-indent 文字缩进效果

需求编写一个文字缩进的示例示例 ? 这上面的第二个段落就是实现了缩进的效果。第三个段落实现的是水平居中的效果。第四个段落实现的是水平靠右，垂直居中的效果。代码如下： <!

1.2K3 0

使用CSS制作文字环绕图片效果（文字内容包含标签）

1.一般制作文字环绕图片效果。 HTML结构： View Code 效果 css" rel="stylesheet" type="text/css" /> 文字环绕图片效果，但是呈现的列表项的形状在图片上面，不是和文字紧贴在一起。达不到我们预期的效果。...2.当文字中含有和标签时，我们通过向和标签添加CSS样式，list-style-position:inside;这样列表项前面的编号就和文字在一起，而不会出现在图片里面，...影响设计效果。

3K9 0

css - 美化效果代码汇总

left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250,250,250,0.1))); 文字投影...left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .1))); 文字填充和美化...-webkit-text-fill-color background: #080808; -webkit-background-clip: text; /* 以上两个原理，利用文字当蒙板...，反向透出背景色，然后背景色想怎么渐变怎么渐变，设置成图片都没问题 */ -webkit-text-fill-color: transparent; /* 给文字做镂空效果 */ 文字描边...此时的文字不是文字，而是文字外形构成并透出的背景色 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent;

1.7K1 0

html抖音效果：CSS实现抖音彩色文字抖动效果

闲来无事写了一个抖音文字都懂效果（比较晃眼），非常简单，就是一个 CSS3 的动画效果。...直接将这下面代码，放到你的 CSS 文件： .douyin{ animation: uk-text-shadow-glitch .65s cubic-bezier(1,-2.91,0,3.79...然后给你需要抖起来的文字加上 .douyin 的 class ，就可以了，代码如下： www.w3h5.com

5754 1

CSS 文字溢出:ellipsis在IE上不起效果

; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } 适用范围：因使用了WebKit的CSS...fff 55%); background: linear-gradient(to right, transparent, #fff 55%); } 局限性：该方法能在谷歌和IE浏览器上出现文字超过就省略的效果

1401 0

【UI特效】CSS3图片模糊切换效果

今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-...DOCTYPE html> css3图片过滤效果 body{ background: #eee; } .gallery{ list-style...text-align:center">html5-html5_css3

2K1 0

CSS 实现 hover 时文字波浪式变色效果

现在是这样的：给 a 加个 overflow:hidden，就达到初步的效果了：去掉背景颜色，给 span 文字设置为蓝色并加个下划线，就是这样的：现阶段代码如下：文字并没有重合。...怎么能让移动 span 的时候两边的文字完全重合呢？这需要两个运动，span 向右运动，文字向左运动，就能实现这种逐渐展开的效果。...span::before { transform: translateX(0); } 总结我们实现了 hover 时文字波浪式变色的效果...它需要两个运动，容器向右运动，内容向左运动，这样就是逐渐展开的一个效果。重叠原来的文字上就是从左到右依次变色的效果了。有没有感觉思路很巧妙呢？

3332 0

html+css+js实现自动敲文字效果

html+css+js实现自动敲文字效果简介：本文是一个前端案例的讲解，关于如何用html+css+js制作出逐渐显示出文字的效果，这个效果可以帮助大家在新人面前装一波。...效果展示效果就是这个样子的，这个文本框里面的内容，不是我输入的，是自己自动慢慢显示到文本框中的。...写高耦合代码也是有好处的，老板不敢随便把你开了。后面还可以加上音效，打字的音效，这样的话会有一种独特的效果。...clearInterval(timer) i = 0; text=""; } } 代码部分.../css/bootstrap.css" /> body{ padding: 100px 200px; }

370 0

创造动态发光文字效果：纯CSS实现指南

文字作为网站中非常重要的内容承载，其表现形式的多样化，极大的丰富了网页的视觉体验。对于动态效果的实现，我们通常会考虑使用JavaScript或者相关的库，但其实CSS在这方面有着强大的能力。...本文所介绍的实现，完全由纯CSS完成，无需任何JavaScript脚本的辅助。我们将通过编写HTML和CSS代码，创建一个具有动态发光效果的文字。...这个效果能够使页面的标题等关键文字更加醒目，提升网页的视觉吸引力，同时也能提高用户的浏览体验。本文为你详细讲解每一行代码的含义和作用，帮助你深入了解这个特效的实现方式。...无论你是寻找创新的设计灵感，还是希望了解CSS的深层次用法，本文都将为你提供丰富的信息。效果展示代码讲解 1....完整代码发光的文字 <div class="

5581 0

用JavaScript 代码来做，图片切换效果！

用原生的JS写动画效果的确是个很令人纠结的事情，倒不如直接用jQuery来写，亦或找一些jQuery插件。能力达不到的时候，为了工作进度，只能采取心有不甘的手段。...如果真的获得能力的提高，我认为还是必须去学习那些优秀的程序员写的优秀的代码。图片切换并不是很难，只不过要获得一些动画效果有些费力，由于本人数学不好，加之不努力，所以做起动画来很吃力。...动画切换要结合JS和CSS达到想要的效果。图片切换一般涉及的CSS的定位，以及JS定时器的知识。定位方式一般定时变换幻灯片的left或者 top属性，实现图片移动。...外部包裹的div是一个容器，用来包裹图片容器和切换容器。外部的大div和图片容器宽度和高度定死，overflow属性设置为hidden，防止图片溢出容器。下面介绍JS代码如何实现幻灯效果。...以上获得图片及切换容器对象，以及设置默认配置参数。

3.4K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭