Pure CSS Typewriter Animation Effect All In One
Pure CSS Typewriter Animation Effect All In One
/* pure CSS Animation Typewriter Effect */
.typewriter-effect {
animation: auto-typing 4s steps(44) 1s 1 normal both running,
blink-cursor 0.5s steps(44) infinite normal both running;
}
/* 字体盒子宽度动态变化 */
@keyframes auto-typing{
from {
width: 0;
}
to {
width: 24em;
}
}
/* cursor 透明度动态变化 */
@keyframes blink-cursor{
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
live demo
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16298596.html
未经授权禁止转载,违者必究!