纯css实现打字效果详解
效果展示
|
实现方法
了解::before伪元素的content属性
使用::before伪元素的content属性可以通过css在元素前面添加任何文字
你好
<p id="add-text">你好</p>
#add-text::before {
content: "hello:";
}
在css动画中使用
给add-text1添加css动画，并在动画中改变::before伪元素的content属性，这样就很巧妙的实现了打字动画。
你好
<p id="add-text1">你好</p>
#add-text1::before {
animation: 3s linear 0s infinite running add-text1-animation;
content: "";
}
@keyframes add-text1-animation {
0% {content: "";}
10% {content: "h";}
20% {content: "he";}
30% {content: "hel"}
40% {content: "hell"}
50% {content: "hello"}
60% {content: "hell"}
70% {content: "hel"}
80% {content: "he"}
90% {content: "h"}
}
主页打字效果代码
最后看看主页打字动画的代码吧！
|
<div class="p">
<div class="shwoWorld">|</div>
</div>
.shwoWorld::before {
animation: 5s linear 0s infinite running shwoWorld;
content: "";
}
@keyframes shwoWorld {
0% {content: "";}
2% {content: "j";}
4% {content: "ji";}
6% {content: "jin"}
8% {content: "jin"}
10% {content: "jint"}
12% {content: "jinti"}
14% {content: "jintia"}
16% {content: "jintian"}
18% {content: "今天x"}
20% {content: "今天xi"}
22% {content: "今天xie"}
24% {content: "今天写"}
28% {content: "今天写d"}
30% {content: "今天写di"}
32% {content: "今天写dia"}
34% {content: "今天写dian"}
36% {content: "今天写点s"}
38% {content: "今天写点sh"}
40% {content: "今天写点she"}
42% {content: "今天写点shen"}
44% {content: "今天写点shenm"}
46% {content: "今天写点shenme"}
48% {content: "今天写点什么"}
50% {content: "今天写点什么h"}
52% {content: "今天写点什么ha"}
54% {content: "今天写点什么hao"}
56% {content: "今天写点什么好"}
58% {content: "今天写点什么好n"}
60% {content: "今天写点什么好ne"}
62% {content: "今天写点什么好呢"}
64% {content: "今天写点什么好呢?"}
76% {content: "今天写点什么好呢"}
78% {content: "今天写点什么好"}
79% {content: "今天写点什么"}
80% {content: "今天写点什"}
82% {content: "今天写点"}
84% {content: "今天写"}
86% {content: "今天"}
88% {content: "今"}
90% {content: ""}
}
3