背景
本文承接自上文《CSS实现文字打字动画(+1白话讲解)》
介绍
提到闪烁动画,很多人可能会想起 <blink>
这个标签,亦或者是text-decoration: blink
这个东西,但是这两者都有很大的局限性,身为"专业"前端开发者的我们怎么能满足于此呢?所以我们不得不去寻找一些其他的方法。
开始操作
原图
字体调回正常啦~
- 想法1: 让元素变成透明再变回原样
.title{
animation: blink 1s 3;
}
@keyframes blink{
to {
color: transparent;
}
}
我们用Chrome开发者工具中的Animation看一看这个动画
可以发现..这个元素在变成透明之后会瞬间显现到原来的样子,很江硬,我想把他变成平滑的显现出来,于是想到了一个办法:通过修改关键帧,让其在循环周期中进行状态切换
.title{
animation: blink 1s 3;
}
@keyframes blink{
50% {
color: transparent;
}
}
舒服了一点
但是长了眼睛的读者一定能从图中发现这个动画的过程是加速的,导致这个动画看起来不是很自然
读了我上一篇文章的童鞋们一定会想到steps这个东西~ 让我们来试一哈
.title{
animation: blink 1s 3 steps(1);
}
@keyframes blink{
50% {
color: transparent;
}
}
完美
傻了吧,你的动画是一下都不会闪的在这里用to的童鞋注意了,steps(1)表示颜色值的切换只发生在动画周期的末尾,所以效果会变成这样
回顾
上一篇文章末尾提到了添加一个闪烁的光标,那么我们就用上面学到的知识来实现一下吧~
.title{
...
width: 17ch;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid; //不指定颜色,使光标和文字颜色一致
animation: typing 10s steps(17),
blink 1s steps(1) infinite; //infinite用来使动画无限循环
}
@keyframes typing{
from {
width: 0;
}
}
@keyframes blink{
50% {
border-color: transparent;
}
}
肥肠完美
因为字体等原因效果展示不是肥肠好,但是应该是最优解啦,还可以通过JS进行维护,这里就不讲啦
文章翻译改编于CSS揭秘