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

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

news 2025/11/5 20:21:05

简介

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/4 21:07:42

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/11/4 3:16:59

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/10/31 14:20:25

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/11/1 22:49:39

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/8/27 18:01:27

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/11/3 13:24:55

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/10/24 5:00:32

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/10/30 22:14:59

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/10/17 17:04:15