CSS实现打字机动画效果 |
您所在的位置：网站首页 › html发光打字机动画效果代码 › CSS实现打字机动画效果 |
CSS实现打字机动画效果
|
效果展示
语法： animation: name duration timing-function delay iteration-count direction fill-mode play-state; name 设置绑定哪个keyframe duration 设置动画多少秒或毫秒完成 timing-function 设置动画如何完成一个周期 delay 设置动画在启动前的延迟间隔。 iteration-count 定义动画的播放次数。 direction 指定是否应该轮流反向播放动画。 fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 play-state 指定动画是否正在运行或已暂停。详细参考： CSS3 animation（动画） 属性 打字机效果的实现 实现一个字一个字移动效果的关键知识： @keyframes typewriter { to { left: 100%; } } animation: typewriter 3s steps(18) forwards;steps函数 有两个参数。 第一个参数的意思是，这个动画分成多少段执行。这里就是文本有几个字，就分多少段。 第二个参数表示分成几段后，是start还是end去执行动画。参数二有两个可选值start和end，默认是end。（这里没有使用到）forwards（fill-mode属性） 把物体动画地从一个地方移动到另一个地方，并让它停留在那里。设置等宽字体 如果每一个字的宽度不一样，就无法保证每次移动会正好一个字的宽度。 font-family: monospace; 实现光标闪烁效果的关键知识 @keyframes flashing { to { opacity: 0; } } animation: flashing .3s ease-out forwards infinite; ease-out 动画以低速结束。 forwards（fill-mode属性） 把物体动画地从一个地方移动到另一个地方，并让它停留在那里。 infinite 指定动画播放无限次（永远） 代码示例下列代码，使用了JS来动态获取文字的个数，从而设置相应的steps值。 思路是： 一个before伪元素来遮挡文字。 一个after伪元素来模拟闪烁的光标。 两个伪元素一起做动画向后移动。 CSS实现打字机动画效果 * { margin: 0; padding: 0; } body { background-color: #000; } #app { display: inline-block; position: relative; top: 300px; left: 50%; /* 设置等宽字体 */ font-family: monospace; color: #FFF; font-size: 32px; text-align: center; transform: translateX(-50%); } #app::before, #app::after { position: absolute; inset: 0; width: 100%; height: 100%; background-color: #000; content: ''; /* animation: typewriter 3s steps(18) forwards; */ } #app::after { width: 5px; border-radius: 1em; background-color: #fff; /* animation: typewriter 3s steps(18) forwards, flashing .3s ease-out forwards infinite; */ } @keyframes typewriter { to { left: 100%; } } @keyframes flashing { to { opacity: 0; } } welcome to my home // 选中app元素 const app = document.querySelector('#app'); // 获取文本长度 const wordNum = app.outerText.length; // 创建一个style标签 const styleElement = document.createElement('style'); styleElement.innerHTML = `#app::before {animation: typewriter ${wordNum * 0.2}s steps(${wordNum}) forwards;}`; styleElement.innerHTML += `#app::after {animation: typewriter ${wordNum * 0.2}s steps(${wordNum}) forwards, flashing .3s ease-out forwards infinite;}`; document.head.appendChild(styleElement); |
【本文地址】
今日新闻 |
推荐新闻 |