博客都在使用的打字机效果,居然这么简单?

效果展示

hellow2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;height: 100vh;background: #ff9292;display: flex;justify-content: center;align-items: center;}.text {font-size: 20px;/* background: red; */border-right: 2px solid #fff;white-space: nowrap;overflow: hidden;width: 0;animation: grow 4s infinite steps(14) 2s,blink 500ms infinite steps(44);}@keyframes grow {40%,60% {width: 124px;}100% {width: 0;}}@keyframes blink {from {border-right-color: #fff;}to {border-right-color: transparent;}}</style>
</head><body><p class="text">Hello World!</p>
</body></html>

原理讲解

从宽度0到300px来显示标签内容,

宽度0时溢出的部分设置 overflow: hidden;

文本超出标签换行的属性设置为 white-space: nowrap;

设置边框作为光标,增加动画 有颜色到透明 持续时间500ms制造闪烁效果

出场grow关键帧中间顶峰时保持不变,40,60% 为300px最大值,

设置grow的delay属性为其增加停顿感

steps 为帧数, 越小越卡,越像光标闪烁

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/38332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言 | Leetcode C++题解之第199题二叉树的右视图

题目&#xff1a; 题解&#xff1a; #define MAX_NODE_NUM 100 int* rightSideView(struct TreeNode* root, int* returnSize){if (root NULL) {*returnSize 0;return NULL;}int *res (int *)malloc(sizeof(int) * MAX_NODE_NUM);int cnt 0;struct TreeNode **record (st…

50-4 内网信息收集 - 本机信息收集

一、内网信息收集 内网信息收集可以从以下几个方面进行:本机信息收集、域内信息收集、内网资源探测等。通过这些步骤,我们可以全面了解当前主机的角色和所处内网的拓扑结构,从而选择更合适、更精准的渗透方案。 二、本机基础信息收集 在本机基础信息收集阶段,可以执行以下…

EasyExcel数据导入

前言&#xff1a; 我先讲一种网上信息的获取方式把&#xff0c;虽然我感觉和后面的EasyExcel没有什么关系&#xff0c;可能是因为这个项目这个操作很难实现&#xff0c;不过也可以在此记录一下&#xff0c;如果需要再拆出来也行。 看上了网页信息&#xff0c;怎么抓到&#x…

SpringBoot + mkcert ,解决本地及局域网(内网)HTTPS访问

本文主要解决访问SpringBoot开发的Web程序,本地及内网系统,需要HTTPS证书的问题。 我测试的版本是,其他版本不确定是否也正常,测试过没问题的小伙伴,可以在评论区将测试过的版本号留下,方便他人参考: <spring-boot.version>2.3.12.RELEASE</spring-boot.vers…

朋友问我Java中“::”是什么意思?我汗流浃背了......

目录 一&#xff1a;什么是&#xff1a;&#xff1a;&#xff1f; 二&#xff1a;方法引用的几种类型 1.引用静态方法 2.引用特定对象的实例方法 3.引用特定类型的任意对象的实例方法 4.引用构造方法 三&#xff1a;方法引用的适用场景 四&#xff1a;总结 一&#xff1…

【课程总结】Day13(上):使用YOLO进行目标检测

前言 在上一章《【课程总结】Day11&#xff08;下&#xff09;&#xff1a;YOLO的入门使用》的学习中&#xff0c;我们通过YOLO实现了对图片的分类任务。本章的学习内容&#xff0c;将以目标检测为切入口&#xff0c;了解目标检测流程&#xff0c;包括&#xff1a;数据标准、模…

使用NFS网关功能将HDFS挂载到本地系统

HDFS安装教程 HDFS安装教程http://t.csdnimg.cn/2ziFd 使用NFS网关功能将HDFS挂载到本地系统 简介 HDFS提供了基于NFS&#xff08;Network File System&#xff09;的插件&#xff0c;可以对外提供NFS网关&#xff0c;供其它系统挂载使用。 NFS 网关支持 NFSv3&#xff0c;并…

【操作系统】进程管理——进程的概念、组成和特征(个人笔记)

学习日期&#xff1a;2024.6.29 内容摘要&#xff1a;进程的基本概念和特征、状态和转换 进程的概念 程序与进程 程序&#xff1a;是静态的&#xff0c;是存放在磁盘里的可执行文件&#xff0c;就是一系列的指令集合 进程&#xff08;Process&#xff09;&#xff1a;是动态…

GPT-5:下一代AI如何彻底改变我们的未来

GPT-5 发布前瞻&#xff1a;技术突破与未来展望 随着科技的飞速发展&#xff0c;人工智能领域不断迎来新的突破。根据最新消息&#xff0c;OpenAI 的首席技术官米拉穆拉蒂在一次采访中确认&#xff0c;GPT-5 将在一年半后发布&#xff0c;并描述了其从 GPT-4 到 GPT-5 的飞跃如…

Linux随记(十)

一、升级harbor v2.6.4 --> harbor-offline-installer-v2.11.0-rc3 --> v2.9.4 – 随记 漏洞信息&#xff1a; CVE-2023-20902timing condition in Harbor 2.6.x and below, Harbor 2.7.2 and below, Harbor 2.8.2 and below, and Harbor 1.10.17 and below allows an…

js自定义内容生成二维码,qrcodejs的使用

qrcodejs qrcodejs是基于原生js的文本转换成二维码的库&#xff0c;轻量且使用方法简单&#xff0c;它的实现原理是通过canvas将重新编码的内容绘制在页面元素上&#xff0c; 使用qrcodejs时可以选择引入它的cdn或者使用npm下载 <script type"text/javascript" …

软考满分范文“论模型驱动架构设计方法及其应用”,软考高级,系统架构设计师

论文真题 模型驱动架构设计是一种用于应用系统开发的软件设计方法,以模型构造、模型转换和精化为核心,提供了一套软件设计的指导规范。在模型驱动架构环境下,通过创建出机器可读和高度抽象的模型实现对不同问题域的描述,这些模型独立于实现技术,以标准化的方式储存,利用…

鸿蒙开发Ability Kit(程序框架服务):【向用户申请授权】

向用户申请授权 当应用需要访问用户的隐私信息或使用系统能力时&#xff0c;例如获取位置信息、访问日历、使用相机拍摄照片或录制视频等&#xff0c;应该向用户请求授权&#xff0c;这部分权限是user_grant权限。 当应用申请user_grant权限时&#xff0c;需要完成以下步骤&a…

6.The hardest part about learing hard things(学一件难的事,难在哪里)

I’ve been recording a lot of podcast interviews for my upcoming book, Ultralearning.One of the reurring themes I’ve noticed in our conversations is that how people feel about learning is the overwhelming cause of the results they experience. 我为我的新书…

[leetcode]beautiful-arrangement. 优美的排列

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<vector<int>> match;vector<int> vis;int num;void backtrack(int index, int n) {if (index n 1) {num;return;}for (auto &x : match[index]) {if (!vis[x]) {vis[x] tru…

深入解析高斯过程:数学理论、重要概念和直观可视化全解

与其他算法相比&#xff0c;高斯过程不那么流行&#xff0c;但是如果你只有少量的数据&#xff0c;那么可以首先高斯过程。在这篇文章中&#xff0c;我将详细介绍高斯过程。并可视化和Python实现来解释高斯过程的数学理论。 多元高斯分布 多元高斯分布是理解高斯过程所必须的概…

flink使用StatementSet降低资源浪费

背景 项目中有很多ods层&#xff08;mysql 通过cannal&#xff09;kafka&#xff0c;需要对这些ods kakfa做一些etl操作后写入下一层的kafka&#xff08;dwd层&#xff09;。 一开始采用的是executeSql方式来执行每个ods→dwd层操作&#xff0c;即类似&#xff1a; def main(…

观察者模式在金融业务中的应用及其框架实现

引言 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;使得多个观察者对象同时监听某一个主题对象。当这个主题对象发生变化时&#xff0c;会通知所有观察者对象&#xff0c;使它们能够自动更新。…

MISRA C

介绍 MISRA C 是由汽车产业软件可靠性协会&#xff08;Motor Industry Software Reliability Association&#xff09;提出的 C 语言编程标准&#xff0c;可提高嵌入式系统软件的安全性和可靠性。这些指南由汽车制造商、零部件供应商和工程咨询公司合作的汽车工业软件可靠性协…

基于STM32的智能农业环境监控系统

目录 引言环境准备智能农业环境监控系统基础代码实现&#xff1a;实现智能农业环境监控系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统实现4.4 用户界面与数据可视化应用场景&#xff1a;农业环境管理与优化问题解决方案与优化收尾与总结 1. 引言 智能农业环境监控系…