网站开发第三方登录设计,七牛图床 wordpress,亚马逊超级浏览器,小广告发布简介
在本篇技术文章中#xff0c;将介绍如何使用HTML、CSS和JavaScript创建一个独特而引人注目的文字(字母数字)雨#x1f327;️动画效果。通过该动画#xff0c;展现出的是一系列随机字符将从云朵中下落像是将文字变成雨滴从天而降#xff0c;营造出与…简介
在本篇技术文章中将介绍如何使用HTML、CSS和JavaScript创建一个独特而引人注目的文字(字母数字)雨️动画效果。通过该动画展现出的是一系列随机字符将从云朵中下落像是将文字变成雨滴从天而降营造出与众不同的视觉效果。 文字雨 HTML
创建一个基本的HTML结构这段HTML代码定义了一个容器其中包含了云朵和雨滴(即文字元素)。基本结构如下
首先是类名为container的容器表示整个动画的容器其次是类名为cloud的容器表示云朵的容器接着是cloud容器中的文字元素表示雨滴(即文字元素)
然后引入外部创建的css和js文件可以先定义几个text容器用于调整样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleText Rain Animation/titlelink relstylesheet href./css/style.css
/head
bodydiv classcontainerdiv classcloud!-- div classtexta/div --!-- div classtextb/div --!-- div classtextc/div --!-- 雨滴将会在这里出现 --/div/divscript src./js/main.js/script
/body
/htmlCSS
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的紧密配合成功但不是很完美的创建了一个炫酷的文字雨动画效果这个动画可以渐增加网页的 吸引力 不要犹豫️动手尝试一下或者甚至你也可以根据自己的需求对文字、样式和动画参数进行调整进一步改善和扩展这个效果
希望这篇文章对你在开发类似动画效果时有所帮助另外如果你对这个案例还有任何问题欢迎在评论区留言或联系(私信)我。谢谢阅读
原文链接
