在一些交互较多的网站上,我们经常能见到类似打字机输入文字的效果,在 CSS 动画的控制下,我们可以通过仅使用 animation 和 @keyframes 属性去实现打字效果。
这里仅为大家提供一个基础的打字效果。很多开发者会使用 JavaScript 库去实现,而不是使用 CSS。
参考结构如下:
<div class="typing-box">
<div class="typing-act">Typing effect for text</div>
</div>
参考css如下:
.typing-box {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.typing-act {
width: 22ch;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
animation: typing 2s steps(22), effect .5s step-end infinite alternate;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes effect {
50% {
border-color: transparent;
}
}
这里,我们通过 steps() 属性来实现分割文本的效果。首先,你必须指定 step() 中传入的数量,在这个例子中就是文本的长度。
接着,我们使用 @keyframes 去声明什么时候开始执行动画。
打字速度大家可以调整 .typing-ac的animation参数
打字区域宽度大家可以调整 .typing-act 的宽度参数
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...