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

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

news 文章来源：https://blog.csdn.net/qq_53895518/article/details/135128771 2024/9/21 7:25:36

简介

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

结论

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

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

👉原文链接

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

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

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

计算机网络简述

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

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

Go 泛型之类型参数

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

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

KafkaLog4jAppender

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

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

IntelliJ IDEA插件

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

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

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

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

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

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

在HTML中使用Thymeleaf解决动态上下文问题，你可以使用Thymeleaf的模板语法来生成动态的链接（例如CSS和JavaScript文件的链接）以适应不同的应用程序上下文。以下是一个示例： <!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关于消息压缩的定义（来源于官网）： 此为 Kafka 中端到端的块压缩功能。如果启用，数据将由 producer 压缩，以压缩格式写入服务器，并由 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大设计原则简单易懂的理解以及它们的适用场景和代码示列设计模式之-单列设计模式，5种单例设计模式使用场景以及它们的优缺点设计模式之-3种常见的工厂模式简单工厂模式、工厂方法模式和抽象工厂模式，每一种模式的概念、使用…...

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

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

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

编程日记 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语言中不存在字符串类型，但依然可以通过数组或指针的方式保存字符串，但字符串字面量却没有想象的这么简单，本文就将对此进行讨论…...

编程日记 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吗？

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

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

leetcode——打家劫舍问题汇总

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

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

Java经典框架之Spring MVC

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

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

Golang make vs new

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

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

Arthas

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

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

IP代理科普| 共享IP还是独享IP？两者的区别与优势

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

龙芯loongarch64服务器编译安装tensorflow-io-gcs-filesystem

前言安装TensorFlow的时候，会出现有些包找不到的情况，直接使用pip命令也无法安装，比如tensorflow-io-gcs-filesystem，安装的时候就会报错：这个包需要自行编译，官方介绍有限，这里我讲解下编译准备拉取源码：https://github.com/tensorflow/io.git 文章中…...

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

开源持续测试平台Linux MeterSphere本地部署与远程访问

文章目录前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址前言 MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能&am…...

编程日记 2023/12/27 3:12:46

Kubernetes（K8S）快速入门

概述在本门课程中，我们将会学习K8S一些非常重要和核心概念，已经操作这些核心概念对应组件的相关命令和方式。比如Deploy部署，Pod容器，调度器，Service服务，Node集群节点，Helm包管理器等等。在…...

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

将遗留系统分解为微服务：第 2 部分

在当今不断发展的技术环境中，从整体架构向微服务的转变对于许多企业来说都是一项战略举措。这在报销计算系统领域尤其重要。正如我在上一篇文章第 1 部分应用 Strangler 模式将遗留系统分解为微服务-CSDN博客中提到的，让我们探讨如何有效管理这种转变。 …...

编程日记 2023/12/27 3:07:42

RK3588平台开发系列讲解（AI 篇）RKNN-Toolkit2 模型的加载转换

文章目录一、Caffe 模型加载接口二、TensorFlow 模型加载接口三、TensorFlowLite 模型加载接口四、ONNX 模型加载五、DarkNet 模型加载接口六、PyTorch 模型加载接口沉淀、分享、成长，让自己和他人都能有所收获！😄 📢 RKNN-Toolkit2 目前支持 Caffe、TensorFlow、Tensor…...

编程日记 2023/12/27 3:04:39

CNVD原创漏洞审核和处理流程

一、CNVD原创漏洞审核归档和发布主流程 （一）审核和归档流程审核流程分为一级、二级、三级审核，其中一级审核主要对提交的漏洞信息完整性进行审核，漏洞符合可验证（通用型漏洞有验证代码信息或多个互联网实例、事件型…...

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

【java爬虫】基于springboot+jdbcTemplate+sqlite+OkHttp获取个股的详细数据

注：本文所用技术栈为：springbootjdbcTemplatesqliteOkHttp 前面的文章我们获取过沪深300指数的成分股所属行业以及权重数据，本文我们来获取个股的详细数据。我们的数据源是某狐财经，接口的详细信息在下面的文章中，本…...

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

智能优化算法应用：基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码文章目录智能优化算法应用：基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工兔算法4.实验参数设定5.算法结果6.参考文…...

编程日记 2023/12/27 2:52:29

【ubuntu 22.04】安装vscode并配置正常访问应用商店

注意：要去vscode官网下载deb安装包，在软件商店下载的版本不支持输入中文在ubuntu下用火狐浏览器无法访问vscode官网，此时可以手动进行DNS解析，打开DNS在线查询工具，解析以下主机地址（复制最后一个IP地址&a…...

编程日记 2023/12/27 2:51:28

K8s出现问题时，如何排查解决！

K8s问题的排查 1. POD启动异常、部分节点无法启动pod2. 审视集群状态3. 追踪事件日志4. 聚焦Pod状态5. 检查网络连通性6. 审视存储配置7. 研究容器日志8. K8S集群网络通信9. 问题：Service 是否通过 DNS 工作？10. 总结1、POD启动异常、部分节点无法启动p…...

编程日记 2023/12/27 2:49:26

2015年第四届数学建模国际赛小美赛B题南极洲的平均温度解题全过程文档及程序

2015年第四届数学建模国际赛小美赛 B题南极洲的平均温度原题再现： 地表平均温度是反映气候变化和全球变暖的重要指标。然而，在以前的估计中，在如何界定土地平均数方面存在一些方法上的差异。为简单起见，我们只考虑南极洲。请建…...

编程日记 2023/12/27 2:44:21

npm常见错误

三个方面 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! phantomjs-prebuilt2.1.15 install: node install.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the phantomjs-prebuilt2.1.15 install script. np…...

编程日记 2023/12/27 2:41:19

简介

HTML

CSS

JavaScript

关于

结论

相关文章：