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

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

news 2026/2/10 0:20:45

简介

在本篇技术文章中，将介绍如何使用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

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2026/2/8 20:41:58

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2026/2/8 10:51:38

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

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书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/5 5:47:53