HTML+CSS+JS ❤ 9.10教师节祝福网页制作 (3D炫酷烟花祝福)
HTML+CSS+JS 9.10教师节祝福网页 (烟花祝福)
九月金秋，老师是这个季节的主题，空气中弥漫着感念师恩的情绪。尊师重教是永远的美德。过去的，现在的，将来的，所有的教师都应该享受崇敬与祝福。
这一年一度的节日是来庆祝您的无私，是来庆祝您的辛勤，是来庆祝您对我们如母亲般的关怀。“一日为师终生为父”，您永远是我们的母亲。最后祝您教师节快乐！
今天，我在不断地翻阅字典，我想寻找最美的辞藻献给我们的老师；今天，我在不断酝酿感情，我想把最真挚的问候送给我们的老师！祝教师节一切都好！
一、效果演示
二、代码实现
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" href="css/style.css" /> <script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script> <style> html, body { margin: 0; padding: 0; overflow: hidden; background-color: black; user-select: none; margin: 0; } .city { width: 100%; position: fixed; bottom: 0px; z-index: 100; } .city img { width: 100%; } audio { opacity: 0; } .shape { z-index: 9999 !important; } </style> <title>教师节快乐</title> <link href="modal.css" rel="stylesheet" /> </head> <body onselectstart="return false"> <div class="star comet"></div> <script src="js/index.js"></script> <!--烟花部分--> <div class="city"> <img src="img/city.png" alt="" /> </div> <img src="img/moon.png" alt="" id="moon" style="visibility: hidden" /> <div style="display: none"> <div class="shape">9.10教师节</div> <div class="shape">老师您辛苦了</div> <div class="shape">祝您节日快乐!</div> <div class="shape">万事如意</div> <div class="shape">工作顺利</div> <div class="shape">开开心心过每分钟</div> <div class="shape">高欢快兴过每一天！</div> </div> <!--音乐部分/可替换--> <audio autoplay loop id="music"> <source src="mp3/xinnian.mp3" /> </audio> <iframe id="iframMusic" allow="autoplay" style="display: none" src="mp3/xinnian.mp3" ></iframe> <script src="jquery.min.js"></script> <script src="fire.js"></script> <script src="talk.js"></script> </body> </html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374css
html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #03061A; position: relative; overflow: hidden; } .star { width: 3px; height: 3px; border-radius: 50%; position: absolute; background-color: rgba(237, 205, 163, 0.8); box-shadow: 0 0 40px 0 rgba(237, 205, 163, 0.8), 0 0 20px 0 #FFFFFF; animation: glow 5s infinite; } .star--medium { width: 6px; height: 6px; } .star--big { width: 9px; height: 9px; box-shadow: 0 0 40px 0 #EDCDA3, 0 0 20px 0 #FFFFFF, inset 0 0 4px #FFFFFF; } .comet { width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 40px 0 #EDCDA3, 0 0 20px 0 #FFFFFF, inset 0 0 8px rgba(255, 255, 255, 0.6); top: 0; left: 80%; opacity: 0.3; transform: rotate(-45deg) translate(0, -50px); animation: comet 6s infinite; } .comet:after { content: ''; width: 20vw; height: 6px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 20px rgba(237, 205, 163, 0.4); position: absolute; top: 0; left: 0; } @keyframes glow { 0% { opacity: 0.9; } 50% { opacity: 0.2; } 100% { opacity: 0.9; } } @keyframes comet { 0% { transform: rotate(-45deg) translateX(0); opacity: 0.3; } 10% { opacity: 1; } 20% { transform: rotate(-45deg) translateX(-100vw); opacity: 0; } 100% { transform: rotate(-45deg) translateX(-100vw); opacity: 0; } }
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485js
var canvas = document.getElementById("cas"); var ocas = document.createElement("canvas"); var octx = ocas.getContext("2d"); var ctx = canvas.getContext("2d"); ocas.width = canvas.width = window.innerWidth; ocas.height = canvas.height = window.innerHeight; var bigbooms = []; document.getElementById("iframMusic").onload = function () { var music = document.getElementById("music"); music.src = "./mp3/music.mp3"; music.oncanplay = function () { music.play(); }; }; // 开始放烟花 function initAnimate() { drawBg(); lastTime = new Date(); animate(); } var lastTime; function drawMoon() { var moon = document.getElementById("moon"); var centerX = canvas.width - 200, centerY = 100, width = 80; if (moon.complete) { ctx.drawImage(moon, centerX, centerY, width, width); } else { moon.onload = function () { ctx.drawImage(moon, centerX, centerY, width, width); }; } var index = 0; for (var i = 0; i < 10; i++) { ctx.save(); ctx.beginPath(); ctx.arc( centerX + width / 2, centerY + width / 2, width / 2 + index, 0, 2 * Math.PI ); ctx.fillStyle = "rgba(240,219,120,0.005)"; index += 2; ctx.fill(); ctx.restore(); } } function putValue(canvas, context, ele, dr, callback) { context.clearRect(0, 0, canvas.width, canvas.height); var img = new Image(); if (ele.innerHTML.indexOf("img") >= 0) { img.src = ele.getElementsByTagName("img")[0].src; imgload(img, function () { context.drawImage( img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.width / 2 ); dots = getimgData(canvas, context, dr); callback(dots); }); } else { var text = ele.innerHTML; context.save(); // 烟花字体大小 var fontSize = 0; if ( navigator.userAgent.match( /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ) ) { // 移动端字体 fontSize = 180; console.log("移动端"); } else { // pc端字体 fontSize = 200; } context.font = fontSize + "px 宋体 bold"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = "rgba(" + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + " , 1)"; context.fillText(text, canvas.width / 2, canvas.height / 2); context.restore(); dots = getimgData(canvas, context, dr); callback(dots); } } function imgload(img, callback) { if (img.complete) { callback.call(img); } else { img.onload = function () { callback.call(this); }; } } function getimgData(canvas, context, dr) { var imgData = context.getImageData(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height); var dots = []; for (var x = 0; x < imgData.width; x += dr) { for (var y = 0; y < imgData.height; y += dr) { var i = (y * imgData.width + x) * 4; if (imgData.data[i + 3] > 128) { var dot = { x: x, y: y, a: imgData.data[i], b: imgData.data[i + 1], c: imgData.data[i + 2], }; dots.push(dot); } } } return dots; } function getRandom(a, b) { return Math.random() * (b - a) + a; } var maxRadius = 1, stars = []; function drawBg() { for (var i = 0; i < 100; i++) { var r = Math.random() * maxRadius; var x = Math.random() * canvas.width; var y = Math.random() * 2 * canvas.height - canvas.height; var star = new Star(x, y, r); stars.push(star); star.paint(); } } var Star = function (x, y, r) { this.x = x; this.y = y; this.r = r; }; Star.prototype = { paint: function () { ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.fillStyle = "rgba(255,255,255," + this.r + ")"; ctx.fill(); ctx.restore(); }, }; var focallength = 250; var Frag = function (centerX, centerY, radius, color, tx, ty) { this.tx = tx; this.ty = ty; this.x = centerX; this.y = centerY; this.dead = false; this.centerX = centerX; this.centerY = centerY; this.radius = radius; this.color = color; }; Frag.prototype = { paint: function () { ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); ctx.fillStyle = "rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ",1)"; ctx.fill(); ctx.restore(); }, moveTo: function (index) { this.ty = this.ty + 0.3; var dx = this.tx - this.x, dy = this.ty - this.y; this.x = Math.abs(dx) < 0.1 ? this.tx : this.x + dx * 0.1; this.y = Math.abs(dy) < 0.1 ? this.ty : this.y + dy * 0.1; if (dx === 0 && Math.abs(dy) <= 80) { this.dead = true; } this.paint(); }, };
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200三、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
四、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可wx公Z号 ---> web前端小日记 获取更多源码 !
五、更多源码
1.❤100款 html+css+JavaScript 表白源码演示地址
相关知识
HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 (浪漫的求婚动画) HTML+CSS+JavaScript
9.10教师节鲜花贺词集锦
520表白网页,程序员浪漫表白,求婚倒计时网站制作 HTML+CSS+JS
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码
鲜花静态HTML网页作业作品 大学生鲜花网页设计制作成品 简单DIV CSS布局网站
html5期末大作业鲜花花卉主题网页设计html网页模板源码？
学生花卉网网页设计作品 学生鲜花网页模板 简单在线花店主页成品 鲜花网页制作 HTML学生花店商城网站作业设计
web网页设计实例作业 ：鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript
网址: HTML+CSS+JS ❤ 9.10教师节祝福网页制作 (3D炫酷烟花祝福) https://m.huajiangbk.com/newsview793082.html
| 上一篇: HTML生日快乐 |
下一篇: 爱情表白祝福语 |
