4

CSS输入文本动画 - 打字动画效果的实现

 3 months ago
source link: https://www.fly63.com/article/detial/11495
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

更新日期: 2022-05-12阅读量: 17标签: 效果分享

扫一扫分享

相较于之前的css版本,我们利用css3可以实现很多炫酷的东西,比如老版的CSS无法实现的打字动画。下面我们就给大家带来一个小案例,看看酷炫的打字动画是怎么做。

效果如下:

Text slider with

typing animation effect

in pure CSS.

实现代码

<div class="typing-slider">
<p>Text slider with</p>
<p>typing animation effect</p>
<p>in pure CSS.</p>
</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #FFCC00;
}
@keyframes cursor {
from,to {
border-color: transparent;
}
50% {
border-color: black;
}
}
@keyframes typing {
from {
width: 100%;
}
90%,to {
width: 0;
}
}
@keyframes slide {
33.33% {
font-size: 3rem;
letter-spacing: 3px;
}
to {
font-size: 0;
letter-spacing: 0;
}
}
.typing-slider {
font-family: Consolas, monospace;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
.typing-slider p {
position: relative;
display: inline;
font-size: 0;
text-transform: uppercase;
letter-spacing: 0;
animation: slide 15s step-start infinite;
}
.typing-slider p::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
border-left: 3px solid black;
background-color: #FFCC00;
animation: typing 5s infinite, cursor 1s infinite;
}
.typing-slider p:nth-child(1) {
animation-delay: 0s;
}
.typing-slider p:nth-child(1)::after {
animation-delay: 0s;
animation-timing-function: steps(16), step-end;
}
.typing-slider p:nth-child(2) {
animation-delay: 5s;
}
.typing-slider p:nth-child(2)::after {
animation-delay: 5s;
animation-timing-function: steps(23), step-end;
}
.typing-slider p:nth-child(3) {
animation-delay: 10s;
}
.typing-slider p:nth-child(3)::after {
animation-delay: 10s;
animation-timing-function: steps(12), step-end;
}
</style>

链接: https://www.fly63.com/article/detial/11495


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK