前端CSS实现跳动的文字

news2025/3/15 20:42:39

效果图

请添加图片描述

首选来一个简单的布局

这里就不用多说,都是简单排版

<h1>一个爬坑的Coder</h1>
html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
h1 {
  font-size: 48px;
}

每个文字独立出来

每个文字都有动画,那每个字都应该是单独,可以把每个文字单独用一个标签包裹起来,这样就可以了。但是手动操作太过于麻烦了,还得上JavaScript

const h1 = document.querySelector("h1");
// $&包括替换字符串中整个匹配项的副本
h1.innerHTML = h1.innerText.replace(/\S/g, "<span>$&</span>");

请添加图片描述

制作css动画

h1 span {
  /* 内联元素(inline)动画不起作用, 因此要设置为‘inline-block’ */
  display: inline-block;
  animation: jump 500ms ease-in-out;
}

@keyframes jump {
  0%,
    100% {
      transform: translateY(0);
    }
  50% {
    transform: translateY(-10px);
  }
}

此时发现所有文字都是一起动画的,为了达到效果,我们需要给每个文字加上动画延迟(后面的要比前面的动画开始时间要迟一点),这样就可以一个接着一个动。

给每个文字都加上动画延迟

h1 span {
  /* 内联元素(inline)动画不起作用, 因此要设置为‘inline-block’ */
  display: inline-block;
  animation: jump 500ms ease-in-out;
  animation-delay: var(--delay);
}

document.querySelectorAll("span").forEach((span, index) => {
  // 我们可以借助css变量,或者直接通过js给animation-delay属性设置值
  span.style.setProperty("--delay", `${index * 150}ms`);
});

请添加图片描述

所有代码

通过以上的步骤分析,就可以达到效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        height: 100%;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
      h1 {
        font-size: 48px;
      }

      h1 span {
        /* //   内联元素(inline)动画不起作用, 因此要设置为‘inline-block’ */
        display: inline-block;
        animation: jump 500ms ease-in-out;
        animation-delay: var(--delay);
      }

      @keyframes jump {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }
    </style>
  </head>

  <body>
    <h1>一个爬坑的Coder</h1>
    <script>
      const h1 = document.querySelector("h1");
      // 包括替换字符串中整个匹配项的副本
      h1.innerHTML = h1.innerText.replace(/\S/g, "<span>$&</span>");

      document.querySelectorAll("span").forEach((span, index) => {
        span.style.setProperty("--delay", `${index * 150}ms`);
      });
    </script>
  </body>
</html>

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

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

相关文章

最全GIS开发编程语言汇总及分类

推荐查看>>>科研所需模型软件教程&#xff1a;水文水资源、大气科学、农林生态、地信遥感、统计分析、编程语言等... 最近总有很多人关心GIS开发语言的问题&#xff0c;这个确实很重要&#xff0c;毕竟学习一门编程语言需要花费不少时间和精力&#xff0c;找不到合适…

【数据库】并发控制理论

并发控制&#xff08;concurrency control&#xff09; 恢复&#xff08;recovery) 理论支持&#xff1a;基于事务的ACID Atomicity: All actions in the txn happend, or none happen. “All or nothing” Consistency: IF each txn is consistent and the DB starts consis…

【Google语音转文字】Speech to Text 超级好用的语音转文本API

前面有一篇博客说到了讯飞输入法&#xff0c;支持语音输入&#xff0c;也支持电脑内部音源输入&#xff0c;详细参考&#xff1a;【实时语音转文本】PC端实时语音转文本(麦克风外音&系统内部音源) 但是它只是作为一个工具来使用&#xff0c;如果我们想自己做一些好玩的东西…

CANoe-VN5000接口卡在Network-based模式下典型的应用场景

1、Network-based mode说明 CANoe软硬件都需要设置为Network-based mode 软件从CANoe12版本支持Network-based模式(CANoe12时称为Port-based mode,从13开始改为Network-based mode) 硬件从VN5000系列开始支持Network-based模式,VN5610A和VN5640设备需要确保切换到Network…

必读干货|使用Cmake管理C++项目简明教程

一、背景 Cmake是 kitware公司以及一些开源开发者在开发几个工具套件(VTK)的过程中衍生品&#xff0c;最终形成体系&#xff0c;成为一个独立的开源项目。其官方网站是 cmake.org&#xff0c;可以通过访问官方网站获得更多关于cmake的信息。 它是一个跨平台的编译(Build)工具…

【大数据存储技术】「#3」将数据从Hive导入到MySQL

文章目录准备工作安装Hive、MySQL和SqoopHive预操作启动MySQL、hadoop、hive创建临时表inner_user_log和inner_user_info使用Sqoop将数据从Hive导入MySQL启动hadoop集群、MySQL服务将前面生成的临时表数据从Hive导入到 MySQL 中查看MySQL中user_log或user_info表中的数据准备工…

网页爬虫的本质

1.网页结构分析 提取其中一部分核心介绍 &#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <div class"item masonry-brick&quo…

数据管理篇之计算管理

第13章 计算管理 目的&#xff1a;降低计算资源的消耗&#xff0c;提高任务执行的性能&#xff0c;提升任务产出的时间。 1.系统优化 HBO HBO &#xff08;History-Based Optimizer&#xff0c;基于历史的优化&#xff09;是根据任务历史执行情况为任务分配更合理的资源&…

在霍格沃兹测试开发学社学习是种怎样的体验?

霍格沃兹我怎么了解到的 我是河北某二本院校软工专业的学生&#xff0c;大三开始学校来了很多宣讲和实训的公司&#xff0c;都是为我们以后的职业发展做参考。学校有软件测试课程&#xff0c;有一次老师无意提到了霍格沃兹测试开发学社举办的高校“火焰杯”知识竞赛&#xff0…

三角函数sin cos tan和弧度,度等定义及其相关

在此做一个温习及记录&#xff0c;做一个总结&#xff0c;免得到处找。 正弦、余弦和正切是 三角法 里的主要函数&#xff0c;它们是基于一个 直角三角形而建立的。 英文释义&#xff1a; 正弦 &#xff08;sine&#xff09;, 余弦 &#xff08;cosine&#xff09; 和 正切 &a…

毕业设计 单片机心率血氧健康监测手表 - 物联网 嵌入式

文章目录0 前言1 简介2 主要器件3 实现效果4 设计原理4.1 **硬件准备**4.2 **传感器和算法**5 部分核心代码5 最后0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要求&…

VRRP负载均衡模式配置实用吗?

在前面的文章中&#xff0c;我们知道了VRRP单备份组可以快速实现主备切换&#xff08;&#xff09;&#xff0c;轻轻松松将业务中断时间压缩到1秒钟以内&#xff1b;也对比测试了策略路由进行主备切换的过程&#xff08;&#xff09;&#xff0c;虽然能轻松实现主备设备之间的流…

计算机毕业设计php基本微信小程序的贵小团校园社团小程序

项目介绍 随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,贵小团校园社团小程序就是信息时代变革中的产物之一。 任何系统都要遵…

计算机毕业设计django基于Python在线酒店管理系统

项目介绍 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存储达到准确、快速、完善,并能提高工作管理效率,促进其发展。 论文主要是对在线…

Java面试--SpringBoot启动流程

一、SpringBoot是什么 SpringBoot 是依赖于 Spring 的&#xff0c;比起 Spring&#xff0c;除了拥有 Spring 的全部功能以外&#xff0c;SpringBoot 无需繁琐的 Xml 配置&#xff0c;这取决于它自身强大的自动装配功能&#xff1b;并且自身已嵌入Tomcat、Jetty 等 web 容器&am…

C. Another Array Problem(思维)

Problem - C - Codeforces 给你一个有n个整数的数组a。允许你对它进行以下操作&#xff0c;次数不限&#xff08;0次或更多&#xff09;。 选择2个指数i,j&#xff0c;其中1≤i<j≤n&#xff0c;用|ai-aj|替换所有i≤k≤j的ak。 打印最终数组中所有元素的最大和&#xff0c…

TensorFlow之回归模型-1

1 基本概念 回归模型 一个回归模型会生成一个数值类型的预测结果&#xff0c;而一个分类模型会生成一个分类类型的预测结果&#xff0c;例如&#xff0c;如下列举一些回归模型&#xff1a; 一个模型预测一个商品房的价格走向&#xff0c;例如&#xff0c;某个时间点的总体市场…

大一学生《Web编程基础》HTML实例网页代码 HTML+CSS+JS 黑色横排的个人主页作品

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

【MySQL】-事务以及隔离性问题

作者&#xff1a;学Java的冬瓜 博客主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【MySQL】 分享&#xff1a;落霞与孤鹜齐飞&#xff0c;秋水共长天一色。——《滕王阁序》 主要内容&#xff1a;事务的概念&#xff0c;代码使用&#xff0c;事务的四大性质、隔…

Shell是运维人员必须掌握的技能

文章目录Shell是运维人员必须掌握的技能Shell、Python 和 Perl1) Perl 语言2) Python 语言3) ShellShell是运维人员必须掌握的技能 Linux 运维人员就是负责 Linux 服务器的运行和维护。随着互联网的爆发&#xff0c;Linux 运维在最近几年也迎来了春天&#xff0c;出现了大量的…