当前位置： 首页 > news >正文

当文字成为雨滴：HTML、CSS、JS创作炫酷的“文字雨“动画！

news 2026/2/6 8:07:20

简介

在本篇技术文章中，将介绍如何使用HTML、CSS和JavaScript创建一个独特而引人注目的"文字(字母&数字)"雨🌧️动画效果。通过该动画，展现出的是一系列随机字符将从云朵中下落像是将文字变成雨滴从天而降，营造出与众不同的视觉效果。

文字雨

HTML

创建一个基本的HTML结构，这段HTML代码定义了一个容器，其中包含了"云朵"和"雨滴"(即文字元素)。基本结构如下：

  • 首先是类名为container的容器，表示整个动画的容器；
  • 其次是类名为cloud的容器，表示云朵的容器；
  • 接着是cloud容器中的文字元素，表示雨滴(即文字元素)；

然后引入外部创建的css和js文件，可以先定义几个text容器，用于调整样式；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Text Rain Animation</title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="container"><div class="cloud"><!-- <div class="text">a</div> --><!-- <div class="text">b</div> --><!-- <div class="text">c</div> --><!-- 雨滴将会在这里出现 --></div></div><script src="./js/main.js"></script>
</body>
</html>

CSS

CSS是为文字雨效果增色添彩的关键，使动画效果更加丰富，关于一些 CSS 样式：

  • 使用了自定义的颜色变量来为背景色和文本颜色提供值，有助于使代码易于维护和修改；
  • 利用CSS的阴影效果和动画功能，创造逼真的"云朵"和流畅的"雨滴"动画； 
    * {margin: 0;padding: 0;box-sizing: border-box;
}:root {--body-color: #181c1f;--primary-color: #ffffff;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: var(--body-color);
}.container {width: 100%;height: 400px;display: flex;justify-content: center;border-bottom: 1px solid rgba(255, 255, 255, .1);/* 添加一个从下往上线性渐变的镜像效果，增加视觉层次感 */-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, transparent, transparent, #0005);
}.cloud {position: relative;top: 50px;z-index: 100;/* 横向云朵 */width: 320px;height: 100px;background-color: var(--primary-color);border-radius: 100px;/* drop-shadow函数将阴影效果应用于投影图像 */filter: drop-shadow(0 0 30px var(--primary-color));
}
.cloud::before {content: "";/* 左侧小云朵 */width: 110px;height: 110px;background-color: var(--primary-color);border-radius: 50%;position: absolute;top: -50px;left: 40px;/* 右侧大云朵 */box-shadow: 90px 0 0 30px var(--primary-color);
}.cloud .text {position: absolute;top: 40px;height: 20px;line-height: 20px;text-transform: uppercase;color: var(--primary-color);/* 为文字添加阴影，看上去发光，增加视觉效果 */text-shadow: 0 0 5px var(--primary-color), 0 0 15px var(--primary-color), 0 0 30px var(--primary-color);transform-origin: bottom;animation: animate 2s linear forwards;
}@keyframes animate {0% {transform: translateX(0);}70% {transform: translateY(290px);}100% {transform: translateY(290px);}
}

    通过关键帧动画 @keyframes animate 定义文字运动的过程，在这里是垂直移动290px，也就是向下移动，模拟下雨的状态。当然为了让文字雨效果更加好看，还可以引入一下字体库；

    Warning

    -webkit-box-reflect：可将元素内容在特定方向上进行轴对称反射；

    但是该特性是非标准的，请尽量不要在生产环境中使用它！

    目前只有webkit内核的浏览器支持，如：谷歌浏览器、Safari浏览器。在火狐浏览器中是不支持的；

    JavaScript

    最后，使用JavaScript来实现文字雨的效果。通过动态生成并随机选择字符，可以实现让这些字符(雨滴)从.cloud(云朵)中降落的效果。JavaScript 脚本逻辑：

  • 首先，定义函数 generateText() 并创建字符集，定义函数 randomText() 通过从给定的字符集中随机选择一个字符返回；
  • 接下来，编写 rainEffect() 函数，在函数内部，首先选取 .cloud 元素同时创建一个新的 <div>元素作为字符节点，设置元素文本内容为函数返回的字符，并添加类名；
  • 然后，利用 Math.random() 方法生成一些随机值，将这些随机值应用到创建的 <div> 元素上，包括：
    • 字符距离左侧位置，在 .cloud 容器的宽度区间；
    • 字体大小，最大不超过32px；
    • 动画周期所需的时间(动画持续时间)，2s内；
  • 最后，将其<div>添加到 .cloud 元素中，使用 setTimeout() 函数在2秒后将文字节点从 .cloud 元素中移除，模拟雨滴落地消失效果；

定时器： 为了让字符(雨滴)持续下落，使用 setInterval 函数和一个时间间隔值来调用 rainEffect() 函数。这样就是每20毫秒就会生成一个新的字符(雨滴)节点并添加到云朵中。

// 生成字母和数字数组
function generateText() {const letters = [];const numbers = [];const a = "a".charCodeAt(0);for (let i = 0; i < 26; i++) {letters.push(String.fromCharCode(a + i));if (i < 9) {numbers.push(i + 1);}};return [...letters, ...numbers];
};// 从生成的数组中随机取出一个字符
function randomText() {const texts = generateText();const text = texts[Math.floor(Math.random() * texts.length)];return text;
};function rainEffect() {const cloudEle = document.querySelector(".cloud");const textEle = document.createElement("div");textEle.innerText = randomText();textEle.classList.add("text");const left = Math.floor(Math.random() * 310);const size = Math.random() * 1.5;const duration = Math.random();const styleSheets = {left: `${left}px`,fontSize: `${0.5 + size}em`,animationDuration: `${1 + duration}s`,};Object.assign(textEle.style, styleSheets);cloudEle.appendChild(textEle);setTimeout(() => {cloudEle.removeChild(textEle);}, 2000);
};// 每隔20ms创建一个雨滴元素
setInterval(() => rainEffect(), 20);

关于

String方法：

charCodeAt() fromCharCode()

相关动画效果文章：

  • 3D视觉画廊展示旋转播放
  • CSS简单实现3D香烟动画

结论

通过HTML、CSS和JavaScript的紧密配合，成功但不是很完美的创建了一个炫酷的"文字雨"动画效果，这个动画可以渐增加网页的 吸引力！ 不要犹豫🖐️，动手尝试一下，或者甚至你也可以根据自己的需求对文字、样式和动画参数进行调整，进一步改善和扩展这个效果；

希望这篇文章对你在开发类似动画效果时有所帮助！另外如果你对这个案例还有任何问题，欢迎在评论区留言或联系(私信)我。谢谢阅读🎉！ 

👉原文链接

相关文章：

当文字成为雨滴：HTML、CSS、JS创作炫酷的“文字雨“动画！

简介 在本篇技术文章中&#xff0c;将介绍如何使用HTML、CSS和JavaScript创建一个独特而引人注目的"文字(字母&数字)"雨&#x1f327;️动画效果。通过该动画&#xff0c;展现出的是一系列随机字符将从云朵中下落像是将文字变成雨滴从天而降&#xff0c;营造出与…...

编程日记 2023/12/27 4:26:55

计算机网络简述

前言 计算机网路是一个很庞大的话题。在此我仅对其基础概述以及简单应用进行陈述。后续或有补充以形成完善的计算机网络知识体系。 一.计算机网络的定义 根据百度词条的描述&#xff0c;计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过…...

编程日记 2023/12/27 4:25:54

Go 泛型之类型参数

Go 泛型之类型参数 文章目录 Go 泛型之类型参数一、Go 的泛型与其他主流编程语言的泛型差异二、返回切片中值最大的元素三、类型参数&#xff08;type parameters&#xff09;四、泛型函数3.1 泛型函数的结构3.2 调用泛型函数3.3 泛型函数实例化&#xff08;instantiation&…...

编程日记 2023/12/27 4:24:52

KafkaLog4jAppender

Apache Log4j 中有一个 Appender 概念&#xff0c;它负责将日志信息输出到各种目的地&#xff0c;例如控制台、文件、数据库等。KafkaLog4jAppender 是 Log4j 的一个扩展&#xff0c;它可以将日志信息发送到 Apache Kafka。 下面是如何在 Log4j 中使用 KafkaLog4jAppender 的一…...

编程日记 2023/12/27 4:16:44

IntelliJ IDEA插件

插件安装目录&#xff1a;C:\Users\<username>\AppData\Roaming\JetBrains\IntelliJIdea2021.2\plugins aiXcoder Code Completer&#xff1a;代码补全 Bookmark-X&#xff1a;书签分类 使用方法&#xff1a;鼠标移动到某一行&#xff0c;按ALT SHIFT D...

编程日记 2023/12/27 4:13:42

鸿蒙开发中的坑（持续更新……）

最近在使用鸿蒙开发时&#xff0c;碰到了一些坑&#xff0c;特做记录&#xff0c;如&#xff1a;鸿蒙的preview不能预览&#xff0c;轮播图组件Swiper使用时的问题&#xff0c;console.log() 打印的内容 一、鸿蒙的preview不能预览 首先&#xff0c;只有 ets文件才能预览。 其…...

编程日记 2023/12/27 4:08:37

单体项目-动态上下文问题

在HTML中使用Thymeleaf解决动态上下文问题&#xff0c;你可以使用Thymeleaf的模板语法来生成动态的链接&#xff08;例如CSS和JavaScript文件的链接&#xff09;以适应不同的应用程序上下文。以下是一个示例&#xff1a; <!DOCTYPE html> <html xmlns:th"http:/…...

编程日记 2023/12/27 4:07:35

Qt/QML编程学习之心得：实现一个图片浏览器（十八）

QML中有个重要控件，经常使用就是image，通常可以用它来显示一张图片。如果想结合openfiledialog来让image显示图片，也就是做一个简易的图片浏览器，怎么弄呢？ DefaultFileDialog.qml: import QtQuick 2.0 import QtQuick.Dialogs 1.0FileDialog {id: fileDialogtitle: &qu…...

编程日记 2023/12/27 4:02:31

kafka发送大消息

1 kafka消息压缩 kafka关于消息压缩的定义&#xff08;来源于官网&#xff09;&#xff1a; 此为 Kafka 中端到端的块压缩功能。如果启用&#xff0c;数据将由 producer 压缩&#xff0c;以压缩格式写入服务器&#xff0c;并由 consumer 解压缩。压缩将提高 consumer 的吞吐量…...

编程日记 2023/12/27 3:59:29

React AntDesign form表单文件上传 nodejs formidable 接受参数并把文件放置后端项目相对目录指定文件夹下面

@umijs/max 请求方法 // 上传文件改成form表单 export async function uploadFile(data, options) {return request(CMMS_UI_HOST + /api/v1/uploadFile, {method: POST,data,requestType: form,...(options || {}),}); }前端调用方法 注意upload组件上传 onChange的如下方法，…...

编程日记 2023/12/27 3:58:28

设计模式之-6大设计原则简单易懂的理解以及它们的适用场景和代码示列

系列文章目录 设计模式之-6大设计原则简单易懂的理解以及它们的适用场景和代码示列 设计模式之-单列设计模式&#xff0c;5种单例设计模式使用场景以及它们的优缺点 设计模式之-3种常见的工厂模式简单工厂模式、工厂方法模式和抽象工厂模式&#xff0c;每一种模式的概念、使用…...

编程日记 2023/12/27 3:54:23

css 实现满屏升空的气球动画

最终实现效果 demo放在最后了。。。。 问题一 怎么实现满屏气球&#xff1f;简单理解就是多个气球的合并&#xff0c;难道要写多个盒子吗&#xff1f;确实是这样子&#xff0c;但可以有更好的办法&#xff0c;其实就是通过原生操作多个盒子生成&#xff0c;所以只需要实现一个…...

编程日记 2023/12/27 3:51:21

批量归一化

目录 一、BN层介绍 1、深层神经网络存在的问题 2、批量归一化公式的数学推导 3、BN层的作用位置 4、 预测过程中的批量归一化 5、BN层加速模型训练的原因 6、总结 二、批量归一化从零实现 1、实现批量归一化操作 2、创建BN层 3、对LeNet加入批量归一化 4、开始训练…...

编程日记 2023/12/27 3:50:20

C语言：字符串字面量及其保存位置

相关阅读 C语言https://blog.csdn.net/weixin_45791458/category_12423166.html?spm1001.2014.3001.5482 虽然C语言中不存在字符串类型&#xff0c;但依然可以通过数组或指针的方式保存字符串&#xff0c;但字符串字面量却没有想象的这么简单&#xff0c;本文就将对此进行讨论…...

编程日记 2023/12/27 3:49:19

【开源】基于Vue+SpringBoot的新能源电池回收系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回收机构模块2.4 电池订单模块2.5 客服咨询模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 E-R 图设计 四、系统展示五、核心代码5.1 增改电池类型5.2 查询电池品类5.3 查询电池回…...

编程日记 2023/12/27 3:48:18

共享和独享的区别是什么？有必要用独享IP吗？

通俗地讲&#xff0c;共享IP就像乘坐公共汽车一样&#xff0c;您可以到达目的地&#xff0c;但将与其他乘客共享旅程&#xff0c;座位很可能是没有的。独享IP就像坐出租车一样&#xff0c;您可以更快到达目的地&#xff0c;由于车上只有您一个人&#xff0c;座位是您一个人专用…...

编程日记 2023/12/27 3:40:11

leetcode——打家劫舍问题汇总

本章汇总一下leetcode中的打家劫舍问题&#xff0c;使用经典动态规划算法求解。 1、梦开始的地方——打家劫舍&#xff08;★&#xff09; 本题关键点就是不能在相邻房屋偷东西。 采用常规动态规划做法&#xff1a; 根据题意设定dp数组&#xff0c;dp[i]的含义为&#xff1a…...

编程日记 2023/12/27 3:38:08

Java经典框架之Spring MVC

Spring MVC Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台。 课程内容的介绍 1. Spring MVC 入门案例 2. 基…...

编程日记 2023/12/27 3:30:01

Golang make vs new

文章目录 1.简介2.区别3.new 可以初始化 slice&#xff0c;map 和 channel 吗&#xff1f;4.make 可以初始化其他类型吗&#xff1f;5.小结参考文献 1.简介 在 Go 语言中&#xff0c;make 和 new 是两个用于创建对象的内建函数&#xff0c;但它们有着不同的用途和适用范围。 …...

编程日记 2023/12/27 3:28:00

Arthas

概述 Arthas&#xff08;阿尔萨斯&#xff09; 能为你做什么&#xff1f; Arthas 是Alibaba开源的Java诊断工具&#xff0c;深受开发者喜爱。 当你遇到以下类似问题而束手无策时&#xff0c;Arthas可以帮助你解决&#xff1a; 这个类从哪个 jar 包加载的&#xff1f;为什么会…...

编程日记 2023/12/27 3:24:57

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2026/1/26 19:10:48

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2026/2/3 13:01:10