超酷的打字机效果?分享 1 段优质 CSS 代码片段!

大家好,我是大澈!

本文约 900+ 字,整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享一段优质 CSS 代码片段,实现打字机般的效果或其他类似的离散动画效果。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

css 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS打字机效果</title>
    <style>
      .text {
        border-right: 2px solid #eee;
        font-size: 28px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        background: #fff;
      }
      .useAnimation {
        animation: width-change 4s steps(44) 1s normal both,
        color-change 0.5s steps(44) infinite normal;
      }

      @keyframes width-change {
        from {
          width: 0;
        }
        to {
          width: 343px;
        }
      }
      /* 竖线的闪烁效果 */
      @keyframes color-change {
        from {
          border-right-color: #363636;
        }
        to {
          border-right-color: #ffffff;
        }
      }
    </style>
  </head>
  <body>
    <p class="text useAnimation">
    欢迎投稿分享,优质代码片段
    </p>
  </body>
</html>

分享原因

这段代码展示了如何使用 CSS 动画来创建文本打字效果,以及如何使光标闪烁。

这种动画效果通常用于增强用户界面的动态交互感。

例如:在博客文章或新闻网站中,使用这种效果可以突出显示重要的引用或关键信息,吸引读者的关注。

代码解析

1. 基本样式设置 .text

border-right: 2px solid #eee;:添加一个右边框,模拟光标效果。

white-space: nowrap;:防止文本换行。

overflow: hidden;:隐藏超出容器范围的内容。

2. @keyframes width-change

from { width: 0; }:起始状态宽度为 0。

to { width: 343px; }:结束状态宽度为 343px,可根据文本实际宽度自行调整。

3. @keyframes color-change

from { border-right-color: #363636; }:起始状态右边框颜色为深灰色。

to { border-right-color: #ffffff; }:结束状态右边框颜色为白色。

4. 应用动画 .useAnimation

animation:应用两个动画 width-change 和 color-change。

width-change 4s steps(44) 1s normal both:

动画 width-change 运行 4 秒。

动画延迟 1 秒开始。

normal 表示正常播放。

both 表示动画结束时保持最终状态。

steps(44) 会使动画在 4 秒内完成 44 步,每步大约 0.09 秒(4 秒除以 44 步)。这会产生一种逐步增加宽度的效果,类似于打字机一个字符一个字符显示的效果。

color-change 0.5s steps(44) infinite normal:

动画 color-change 运行 0.5 秒。

infinite 表示动画无限循环。

steps(44) 创建了一个分为 44 步的闪烁动画,每步大约 0.011 秒(0.5 秒除以 44 步),这会使光标看起来在不断闪烁。

  • end -
相关推荐
熊的猫40 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc3 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼4 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨5 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json