简介
大家好,今天要给大家带来一个Super Cool的玩意儿!
在本篇技术文章中,将介绍如何使用HTML、CSS和JavaScript创建一个独特而引服务器托管网人注目的”文字(字母&数字)”雨️动画效果。通过该动画,展现出的是一系列随机字符将从云朵中下落像是将文字变成雨滴从天而降,营造出与众不同的视觉效果。
HTML
创建一个基本的HTML结构,这段HTML代码定义了一个容器,其中包含了”云朵”和”雨滴”(即文字元素)。基本结构如下:
- 首先是类名为container的容器,表示整个动画的容器;
- 其次是类名为cloud的容器,表示云朵的容器;
- 接着是cloud容器中的文字元素,表示雨滴(即文字元素);
然后引入外部创建的css和js文件,可以先定义几个text容器,用于调整样式;
Text Rain Animation
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 元素同时创建一个新的
元素作为字符节点,设置元素文本内容为函数返回的字符,并添加类名;
- 然后,利用 Math.random() 方法生成一些随机值,将这些随机值应用到创建的
元素上,包括: 字符距离左侧位置,在 .cloud 容器的宽度区间; 字体大小,最大不超过32px; 动画周期所需的时间(动画持续时间),2s内;- 最后,将其
添加到 .cloud 元素中,使用 setTimeout() 函数在2秒后将文字节点从 .cloud 元素中移除,模拟雨滴落地消失效果;定时器: 为了让字符(雨滴)持续下落,使用 setInterval 函数和一个时间间隔值来调用 rainEffect() 函数。这样就是每20毫秒就会生成一个新的字符(雨滴)节点并添加到云朵中。
// 生成字母和数字数组 function generateText() { const letters = []; const numbers = []; const a = "a".charCodeAt(0); for (let i = 0; i { cloudEle.removeChild(textEle); }, 2000); }; // 每隔20ms创建一个雨滴元素 setInterval(() => rainEffect(), 20);
关于
String方法:
- charCodeAt()
- fromCharCode()
相关动画效果文章:
- 3D视觉画廊展示旋转播放
- CSS简单实现3D香烟动画
码金片段
结论
通过HTML、CSS和JavaScript的紧密配合,成功但不是很完美的创建了一个炫酷的”文字雨”动画效果,这个动画可以渐增加网页的吸引力!不要犹豫️,动手尝试一下,或者甚至你也可以根据自己的需求对文字、样式和动画参数进行调整,进一步改善和扩展这个效果;
希望这篇文章对你在开发类似动画效果时有所帮助!另外如果你对这个案例还有任何问题,欢迎在评论区留言或联系(私信)我。谢谢阅读!
原文链接:
https://juejin.cn/post/7270648629378367528$(function() {
setTimeout(function () {
var mathcodeList = document.querySelectorAll(‘.htmledit_views img.mathcode’);
if (mathcodeList.length > 0) {
for (let i = 0; i < mathcodeList.length; i++) {
if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {
var alt = mathcodeList[i].alt;
alt = '\(' + alt + '\)';
var curSpan = $('‘);
curSpan.text(alt);
$(mathcodeList[i]).before(curSpan);
$(mathcodeList[i]).remove();
}
}
MathJax.Hub.Queue([“Typeset”,MathJax.Hub]);
}
}, 1000)
});
优惠劵
不爱敲代码的小胡
关注
关注-
11
点赞 -
踩 -
15
收藏
觉得还不错?
一键收藏
-
打赏 -
0
评论
CSS实现雨滴动画效果的实例代码01-19今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。.window { position: absolute; width: 100vw; height: 100…
CSS3热狗下雨背景动画特效07-24CSS3热狗下雨背景动画特效是一款玉米狗下雨背景,网页玉米狗雨滴元素动画特效。参与评论
您还未登录,请先
登录
后发表或查看评论css3 svg下暴雨动画场景特效.zip06-03css3 svg下暴雨动画场景特效 css3基于svg绘制雨滴缓缓低落动画场景。CSS3鼠标控制下雨方向动画特效07-24CSS3鼠标控制下雨方向动画特效是一款基于html5+css3实现的通过鼠标左右移动控制风向下雨雨滴方向效果。html实现各种好看的鼠标滑过图片特效模板徐12-01
745
html实现各种好看的鼠标滑过图片特效模板,html鼠标悬浮特效,html鼠标悬浮好看的动态效果,每种效果都非常好看,可以自己配置相对应的字体、颜色、背景、效果等动画效果,各种风格都有,代码上手简单,代码独立,可以直接使用。也可直接预览效果。HTML5 Canvas雨滴掉落特效07-24HTML5 Canvas雨滴掉落特效是一款基于HTML5 Canvas绘制的雨滴缓缓掉落弹性动画特效。web前端开发规范、服务器托管网HTML规范、JavaScript规范、style规范38f560a5511-27
998
web前端开发规范、HTML规范、JavaScript规范、style规范html原生echart柱状图骨子里的偏爱12-01
47
【代码】html原生echart柱状图。前端 HTML 和 JavaScript 的基础知识有哪些?Itmastergo的博客11-24
1494
HTML是一种标记语言,用于描述网页的结构。HTML的标签告诉浏览器如何显示网页的内容。JavaScript是一种脚本语言,可嵌入HTML中,用于实现网页的交互和动态效果。它是一种面向对象的语言,支持事件驱动编程。前端开发涉及HTML和JavaScript两个关键技术,HTML用于定义网页结构和内容,JavaScript用于实现交互和动态效果。掌握这些基础知识是成为一名优秀的前端开发。「实用场景教程」如何用日程控件DHTMLX Scheduler制作酒店预订日历?(三)需要界面开发、IDE工具研发中文教程资料的小伙伴,记得私信我~12-01
395
本文将为大家介绍如何用日程控件DHTMLX Scheduler和Angular制作酒店预订日历,欢迎下载最新版组件体验~Arduino、ESP8266、HTML相关知识点记录weixin_64520123的博客11-30
687
/ ‘/’ 首页信息。HTML实现简易计算器joe_g12345的博客11-22
641
HTML实现简易计算器,含最简单的代码。Vue2或者uniapp 中 使用 iframe 嵌入本地 HTML 页面 并 相互通信。~~~11-28
436
Vue2或者uniapp 中 使用 iframe 嵌入本地 HTML 页面 并 相互通信。HTML玩转超链接a标签m0_74577714的博客11-22
979
网页中的一个标记点。HTML input 属性笔记xiaotuwai8的博客11-27
1123
输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍。非常值得注意的一个,通常称为隐藏域:如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候。其实最重要的还是value值,提交到处理页的也就是value。不用我说,一看就明白的密码输入框,最大的区别就是当在此输入框输入信息时显示为保密字符。前端学习系列之htmlJava小菜鸟11-27
1226
Hyper Text Markup Language(超文本标记语言)html手势密码解锁插件(附源码)徐11-21
998
html手势密码解锁插件(附源码),仿手机手势密码,拖动九宫格密码,手势密码即33的点阵组成的图形密码,密码长度为九位数,代码上手简单,代码独立,可以直接使用。也可直接预览效果。xss漏洞后端进行html消毒最新发布qq_42572245的博客12-01
60
【代码】xss漏洞后端进行html消毒。Vue指令之v-htmlShadyPi的IT笔记11-28
421
例如,当Vue实例的data是一个inner html,我们想在网页上渲染这部分html,如果依然使用之前的。在Vue中有很多特殊的标签属性,这些属性一般以’v’开头,用于在标签中实现特殊的功能。,则只会将inner html的源码显示出来,无法进行渲染。但是如果把容器中的元素添加一个标签属性。,并将该属性的值赋为msg,即。html下雨特效代码08-19下面是一个HTML下雨特效的代码示例:“`html
html>
html>下雨特效 .raindrop {
position: absolute;
height: 50px;
width: 2px;
background-color: blue;
animation: raindrop 1s linear infinite;
}@keyframes raindrop {
0% {
transform: translateY(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}html>
“`在上面的代码中,我们使用了CSS的动画属性`animation`来实现下雨的特效。每个雨滴通过`@keyframes`规则定义了一个从天空掉落到地面的动画。通过设置`position: absolute`将每个雨滴定位到页面上的不同位置,并设置`transform: translateY()`来实现雨滴的垂直移动。同时,使用`opacity`属性来控制雨滴的透明度,使其在掉落过程中渐隐渐显。1
#### 引用[.reference_title]
– *1* [HTML5下雨Emoji表情动画特效特效代码](https://download.csdn.net/download/weixin_38506138/15945983)[target=”_blank” data-report-click={“spm”:”1018.2226.3001.9630″,”extra”:{“utm_source”:”vip_chatgpt_common_search_pc_result”,”utm_medium”:”distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2″}}] [.reference_item style=”max-width: 100%”]
[ .reference_list ]“相关推荐”对你有帮助么?
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
window.csdn.csdnFooter.options = {
el: ‘.blog-footer-bottom’,
type: 2
}- 25
- 原创
- 2731
- 周排名
- 5万+
- 总排名
- 7528
- 访问
-
- 等级
- 509
- 积分
- 354
- 粉丝
- 257
- 获赞
- 13
- 评论
- 83
- 收藏
私信关注(adsbygoogle = window.adsbygoogle || []).push({});
热门文章
-
WebRTC这么火,前端靓仔,请收下这篇入门教程
1283 -
前端面试必考题:介绍项目和项目难点
1211 -
入职之前,狂补技术,4w字的前端技术解决方案送给你(vue3 + vite
1032 -
低代码引擎 TinyEngine 正式开源!!!
664 -
八百年不面试,一面试就面得一塌糊涂
655
最新评论
您愿意向朋友推荐“博客详情页”吗?
-
强烈不推荐 -
不推荐 -
一般般 -
推荐 -
强烈推荐
提交
最新文章
- vue3 + mark.js | 实现文字标注功能
- 入职之前,狂补技术,4w字的前端技术解决方案送给你(vue3 + vite
- WebRTC这么火,前端靓仔,请收下这篇入门教程
2023年25篇目录
$(“a.flexible-btn”).click(function(){
$(this).parents(‘div.aside-box’).removeClass(‘flexible-box’);
$(this).parents(“p.text-center”).remove();
}) - 然后,利用 Math.random() 方法生成一些随机值,将这些随机值应用到创建的
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
CSDN-Ada助手:
恭喜你写了第20篇博客!看到你对axios源码的探索,让我也感到了一丝惊喜。不过,我觉得你可以尝试写一些关于axios的实际应用案例,或者是和其他网络请求库的比较分析,这样可以让读者更好地理解axios的优势和适用场景。希望你能继续保持创作的热情,期待你更多精彩的文章!
CSDN-Ada助手:
恭喜作者开源低代码引擎 TinyEngine!这是一个了不起的成就!你的持续创作精神值得称赞。在未来的创作中,我希望能够看到更多关于 TinyEngine 的详细介绍和使用案例分享。此外,如果你愿意,也可以考虑探索一些与 TinyEngine 相关的高级功能或者与其他开源项目的集成,以进一步丰富其功能。期待你的下一篇创作,谢谢你的努力!
CSDN-Ada助手:
恭喜你写了第18篇博客!标题看起来很有趣,我对JavaScript的forEach和map也很感兴趣。希望你能继续保持创作的势头,为我们带来更多有价值的内容。下一步,我建议你可以探讨一下这两个方法在实际应用中的使用场景,或者分享一些你个人的经验和技巧。期待你的下一篇博客!
CSDN-Ada助手:
恭喜您写了这么有价值的一篇博客!面试官如何判断两个数组的内容是否相等,这个问题确实很实用,对很多人来说都是一个难题。希望您可以继续分享更多关于面试技巧和编程知识方面的内容,或许可以写一些关于如何优化代码效率的技巧,这对大家来说也会非常有帮助。期待您的下一篇作品!
CSDN-Ada助手:
恭喜您的第16篇博客!看了您的文章,我对“蚊香”式加载有了更深入的理解。您的教程非常详细,让我受益匪浅。不过我觉得下一步可以尝试结合实际案例,或者分享一些个人经验,让读者更容易理解和接受。希望您能继续创作,期待您更多的精彩文章!