前端实现六一儿童节祝福语分享,烟花特效助您表心意

部分数据来源:ChatGPT

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>六一儿童节祝福</title><style>body {background-image: url('https://picsum.photos/1920/1080');background-size: cover;font-family: "微软雅黑", sans-serif;overflow: hidden;}.title {text-align: center;color: #fff;font-size: 48px;margin-top: 200px;text-shadow: 4px 4px rgba(0, 0, 0, 0.2);}.text {text-align: center;color: #fff;font-size: 32px;margin-top: 50px;text-shadow: 2px 2px rgba(0, 0, 0, 0.2);}.icon {display: flex;justify-content: center;margin-top: 50px;}.icon i {font-size: 100px;margin: 0 20px;color: #fff;}.button {text-align: center;margin-top: 50px;}.button a {display: inline-block;background-color: #FF4081;color: #fff;font-size: 32px;padding: 20px 50px;border-radius: 5px;text-decoration: none;transition: all 0.3s ease;}.button a:hover {background-color: #ff6699;}/* 烟花特效 */.firework {width: 9px;height: 9px;background: rgba(255, 255, 255, 0.6);border-radius: 50%;position: absolute;}</style>
</head><body><div class="title">六一儿童节快乐</div><div class="text" id="text"></div><div class="icon"><i class="iconfont">&#xe63c;</i><i class="iconfont">&#xe63c;</i><i class="iconfont">&#xe63c;</i></div><div class="button"><a href="#" id="sendBtn">发送祝福</a></div><script src="https://cdn.staticfile.org/animejs/3.2.1/anime.min.js"></script><script>// 定义祝福语和烟花效果的函数function sendBlessing() {// 获取需要添加祝福语的DOM元素var textEl = document.getElementById('text');// 定义祝福语数组var blessings = ['愿你在六一儿童节里,玩得开心、跑得快乐、笑得灿烂!', '祝愿我们的小朋友健康快乐,甜甜蜜蜜每一天!', '长大后的你,会找不到自己玩的快乐;请不要忘记,小时候我们的快乐是那么简单。'];// 从祝福语数组中随机选择一个var blessing = blessings[Math.floor(Math.random() * blessings.length)];// 设置祝福语textEl.textContent = blessing;// 添加烟花特效for (var i = 0; i < 30; i++) {var firework = document.createElement('div');firework.className = 'firework';document.body.appendChild(firework);// 设置烟花初始位置firework.style.left = Math.random() * window.innerWidth + 'px';firework.style.top = window.innerHeight + 'px';// 定义动画效果var animation = anime({targets: firework,top: Math.random() * window.innerHeight - 100 + 'px',left: Math.random() * window.innerWidth - 100 + 'px',opacity: 0,easing: 'linear',duration: 1500,});// 删除烟花元素animation.finished.then(function () {// 确认烟花元素是否是body的子元素if (document.body.contains(firework)) {document.body.removeChild(firework);}});}}// 为发送祝福按钮添加事件处理函数var sendBtn = document.getElementById('sendBtn');sendBtn.addEventListener('click', function () {sendBlessing();// 添加烟花特效setInterval(function () {sendBlessing();}, 1000);});</script>
</body></html>

在这段代码中,我们使用了anime.js库来创建烟花特效。在sendBlessing函数中,我们选择了一个随机的祝福语,并将其添加到text DOM元素中。然后我们用循环添加多个烟花元素,并且在animation.finished.then中添加了一个判断,以确保我们只会删除已存在的DOM节点。

最后,在sendBtn按钮的click事件处理函数中,我们创建了一个循环定时函数,间隔1秒钟连续添加烟花特效,以为六一儿童节营造一个热烈、欢快的气氛。

祝六一儿童节快乐!

效果图

894a417649404f338402a0a25b545bd2.png

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/14627.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chatgpt赋能python:10个好玩的Python代码-让编程更有趣!

10个好玩的Python代码- 让编程更有趣&#xff01; 作为一名有10年Python编程经验的工程师&#xff0c;我深刻理解到编程可以是一件令人兴奋和有趣的事情。Python是流行且多才多艺的编程语言&#xff0c;具有简洁易懂的语法和丰富的库&#xff0c;可以帮助开发人员快速轻松地实…

大型语言模型与文本摘要

大型语言模型与文本摘要 基于大型语言模型的抽取式摘要基于大型语言模型的零样本跨语言摘要基于大型语言模型的问答式摘要通过摘要任务评估大型语言模型的事实一致性基于大型语言模型的摘要事实一致性评估器未来方向大型语言模型的自我偏好基于大型语言模型生成提示基于大型语言…

ChatGPT玩起来真是上头,AI广泛应用元年体验AI之美

概述 ChatGPT是由人工智能研究实验室OpenAI在2022年11月30日发布的全新聊天机器人模型&#xff0c;一款人工智能技术驱动的自然语言处理工具。它能够通过学习和理解人类的语言来进行对话&#xff0c;还能根据聊天的上下文进行互动&#xff0c;真正像人类一样来聊天交流&#xf…

推荐一款idea神级代码插件【Bito-ChatGPT】而且免费!- 第9篇

历史文章&#xff08;文章累计460&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 文…

ChatGPT - 获取简短的书籍摘要的Prompt

文章目录 Prompt例子 Prompt “总结[书籍名称]&#xff0c;并给我列出最重要的学习和观点。”例子

小米AX6000开启SSH后的高级用法

买的是RA72版本的AX6000,售价599,高通的CPU。 看看高颜值和唬人的外观,图示如下: 关于AX6000开启SSH的方法有很多介绍的,这里关键讲几点: 先升级RA72对应的固件,降级到41版本。 附上:miwifi_ra72_firmware_59812_1.0.41.bin 版本固件地址: http://cdn.cnbj1.fds.a…

为什么我觉得这次的chatGPT是真的智能AI

写在前面 openAI在2022年11月推出了chatGPT&#xff08;全称Chat Generative Pre-trained Transformer【聊天生成型預訓練變換模型】维基百科&#xff09;说的直白一点就是一个目前为止&#xff0c;这个星球上可以见到的最智能的机器人&#xff0c;他可以完成一些人类认知范围内…

第四届中国计算机教育大会“人工智能与大模型论坛”将于4月22日厦门召开

2023 年 ChatGPT 全球爆红&#xff0c;瞬间在国内引起了对大语言模型的热议。全球头部科技大厂再次站上了同一个赛道&#xff0c;很多 AI 领域的创业者、创投机构行动了起来&#xff0c;开启了大语言模型“军备竞赛”。人工智能与大模型技术的发展&#xff0c;离不开高校与产业…

chatgpt赋能python:Python培训:成为一名高薪Python工程师

Python培训&#xff1a;成为一名高薪Python工程师 Python已成为当今最流行的编程语言之一&#xff0c;它广泛应用于人工智能、机器学习、数据科学和Web开发等各个领域。许多公司都在寻找经验丰富的Python工程师来开发他们的产品。如果你想成为一名高薪Python工程师&#xff0c…

记一次和ChatGPT一起排查线上问题

某日现场技术支持找到了我&#xff0c;问我有个数据上报的功能&#xff0c;记录的都是上报失败&#xff0c;让我排查一下。我第一印象当然是甩锅&#xff0c;啊不对问一下情况&#xff0c;准备排查问题。 先交代一下基础情况&#xff1a;功能就是我们将我们系统的数据上报到对方…

AI 2.0时代,再看消费物联网十年

本文是「光锥智能」的「十年系列」之二&#xff0c;对前沿科技影响千行百业数字化和智能化的复盘和展望&#xff0c;第一篇《中国芯片投资十年》获得了业界科技、财经、创投和芯片垂类媒体的广泛关注。 【划重点】 从消费互联网、移动互联网到万物智联&#xff0c;正是一个“…

月薪13K!国企小哥抛弃“铁饭碗”转行测试,亲身经历告诉你选高薪or稳定

对于很多程序员来说&#xff0c;国企or大厂一直都是一个两难的抉择&#xff0c;该选择稳定还是高薪&#xff0c;许多小伙伴都在这个问题犯了难。 可他却用自己的努力和实际行动做出了最好的选择&#xff0c;为自己的职业道路画上了浓墨重彩的一笔。 话不多说&#xff0c;一起…

36张图,一次性补全网络基础知识

点击上方 前端Q&#xff0c;关注公众号 回复加群&#xff0c;加入前端Q技术交流群 转自&#xff1a;网络工程师笔记 OSI和TCP/IP是很基础但又非常重要的知识&#xff0c;很多知识点都是以它们为基础去串联的&#xff0c;作为底层&#xff0c;掌握得越透彻&#xff0c;理解上层时…

基于LLM的生成式AI正在快速变革RPA人机交互

如果问RPA对程序开发以及自动化有哪些贡献&#xff0c;其中一个答案便是它改变了人机交互&#xff08;HCI&#xff0c;human-computer interaction&#xff09;。 在传统工作流自动化工具中&#xff0c;软件开发人员不得不生成一个操作列表&#xff0c;使用内部应用程序编程接…

大模型时代来临,基于LLM的生成式AI正在快速变革RPA人机交互

从“人RPA”到“人生成式AIRPA”&#xff0c;LLM如何影响RPA人机交互&#xff1f;换个角度&#xff0c;从人机交互看LLM如何影响RPA影响程序开发与流程自动化人机交互的RPA&#xff0c;现在也要被LLM改变了LLM如何影响人机交互&#xff1f;生成式AI怎么改变RPA人机交互&#xf…

马斯克开造人形AI 变形金刚要成真?

当5个人形机器人迎面走来&#xff0c;你会下意识地期待它们具备怎样的能力。特斯拉最近公布的视频给出答案&#xff0c;它自研的机器人“擎天柱”&#xff08;Optimus&#xff09;能够探索环境&#xff0c;复刻人类动作&#xff0c;自主操纵物品。 特斯拉CEO埃隆马斯克对这些与…

chatgpt大模型赋能人形机器人之我见

我个人的看法&#xff08;不涉及任何和他项目相关的细节或商业机密&#xff0c;仅仅是我个人的泛泛而谈&#xff09;&#xff1a; 1、从大趋势来说&#xff0c;人形机器人的灵活度和通用性确实非常的高&#xff0c;是有前景的。另外轮式足式也不是他独一例&#xff0c;像 ETH …

Python吞噬世界,GPT吞噬Python!ChatGPT 上线最强应用:分析数据、生成代码都精通

当地时间 7 月 7 日&#xff0c;OpenAI 在社交平台表示&#xff0c;将向所有 ChatGPT Plus 用户开放代码解析器&#xff08;Code Interpreter&#xff09;功能。消息一出便瞬间引发了开发者们的广泛关注&#xff0c;该功能被有的开发者认为是自 OpenAI 发布 GPT-4 以来最强大的…

【回答问题】ChatGPT上线了!给我推荐20个比较流行的ROS(Robot Operating System)算法模型

给我推荐20个比较流行的ros算法模型 很好,下面是20个比较流行的ROS(Robot Operating System)算法模型: 便携式机器人操作系统(PR2) 全向轮操作系统(TurtleBot) 机器人操作系统(ROS)用于机器人操作 基于空间相对导航的机器人操作系统(SLAM) 自适应机器人操作系统(ARoS) 自主…

【回答问题】ChatGPT上线了!给我推荐20个比较流行的自动驾驶算法模型

给我推荐20个比较流行的自动驾驶算法模型 当前比较流行的自动驾驶模型有: 卷积神经网络(CNN) 长短时记忆网络(LSTM) 自适应调和滤波器(ADF) 自适应估计滤波器(AEF) 线性预测滤波器(LPF) 线性卡尔曼滤波器(LKF) 高斯完全数据卡尔曼滤波器(EKF) 非线性最小二乘(…