暑假结束迎风启航踏浪逐星告别悠闲夏日奔赴崭新征程本动态网页以「暑假结束迎风启航踏浪筑梦」为主题深邃幽蓝的底色之上流光文字缓缓浮动。流动的海浪、漫天细碎星光搭配不断旋转飘落的闪光碎片营造出奔赴梦想、扬帆起航的氛围感适配开学励志展示。!DOCTYPEhtmlhtmllangzh‑CNheadmetacharsetUTF‑8metanameviewportcontentwidthdevice‑width, initial‑scale1.0title暑假结束迎风启航踏浪筑梦/titlelinkrelpreconnecthrefhttps://fonts.googleapis.comlinkrelpreconnecthrefhttps://fonts.gstatic.comcrossoriginlinkhrefhttps://fonts.googleapis.com/css2?familyNotoSansSC:wght900displayswaprelstylesheetstyle*{margin:0;padding:0;box-sizing:border-box}body{width:100vw;height:100vh;overflow:hidden;background:#05102b;display:flex;justify-content:center;align-items:center;font-family:Noto Sans SC,sans-serif;font-weight:900;}#canvas-bg{position:fixed;top:0;left:0;z-index:1;}.wrap{position:relative;z-index:10;text-align:center;padding:20px;}.main-text{font-size:clamp(2rem,8vw,4.5rem);color:#fff;letter-spacing:10px;background:linear-gradient(90deg,#40c9ff,#4f9eff,#9370ff,#40c9ff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite,softFloat 3.5s ease‑in‑out infinite;filter:drop-shadow(0 0 22pxrgba(80,180,255,0.7));}keyframesshimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}keyframessoftFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-14px)}}.light-line{width:0%;height:3px;margin:28px auto 0;background:linear-gradient(90deg,transparent,#54c7ff,transparent);border-radius:99px;animation:drawLine 2.2s ease‑out forwards 0.6s;box-shadow:0 0 14px #54c7ff;}keyframesdrawLine{to{width:85%}}/style/headbodycanvasidcanvas-bg/canvasdivclasswrapdivclassmain-text暑假结束迎风启航踏浪筑梦/divdivclasslight-line/div/divscriptconstcanvasdocument.getElementById(canvas-bg);constctxcanvas.getContext(2d);letw,h;letpoints[];letwaveList[];letfallItems[];functionresize(){wcanvas.widthinnerWidth;hcanvas.heightinnerHeight;}resize();window.addEventListener(resize,resize);//漂浮粒子classDot{constructor(){this.reset();}reset(){this.xMath.random()*w;this.yMath.random()*h;this.rMath.random()*1.40.4;this.sx(Math.random()-0.5)*0.6;this.sy(Math.random()-0.5)*0.6;this.aMath.random()*0.40.15;}draw(){ctx.beginPath();ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fillStylergba(120,200,255,${this.a});ctx.fill();}update(){this.xthis.sx;this.ythis.sy;if(this.x0||this.xw||this.y0||this.yh)this.reset();this.draw();}}//流动海浪classWave{constructor(offset){this.offsetoffset;this.speed0.018;this.amp25Math.random()*30;}draw(t){ctx.beginPath();ctx.moveTo(0,h*0.65this.offset);for(letx0;xw;x4){constyh*0.65this.offsetMath.sin(x*0.012t*this.speed)*this.amp;ctx.lineTo(x,y);}ctx.strokeStylergba(80,170,255,0.22);ctx.lineWidth1.2;ctx.stroke();}}//从上飘落的闪光碎片classFallItem{constructor(){this.reset();}reset(){this.xMath.random()*w;this.y-20;this.sizeMath.random()*41;this.speedYMath.random()*21;this.speedX(Math.random()-0.5)*1;this.opacityMath.random()*0.50.2;this.rotate0;this.rotateSpeed(Math.random()-0.5)*0.08;}draw(){ctx.save();ctx.translate(this.x,this.y);ctx.rotate(this.rotate);ctx.fillStylergba(180,220,255,${this.opacity});ctx.beginPath();ctx.moveTo(0,-this.size);ctx.lineTo(this.size,0);ctx.lineTo(0,this.size);ctx.lineTo(-this.size,0);ctx.closePath();ctx.fill();ctx.restore();}update(){this.ythis.speedY;this.xthis.speedX;this.rotatethis.rotateSpeed;if(this.yh20){this.reset();}this.draw();}}waveList[newWave(0),newWave(22),newWave(44)];for(leti0;i90;i)points.push(newDot());for(leti0;i35;i)fallItems.push(newFallItem());lettime0;functionloop(){ctx.clearRect(0,0,w,h);time;waveList.forEach(wvwv.draw(time));points.forEach(pp.update());fallItems.forEach(itemitem.update());requestAnimationFrame(loop);}loop();/script/body/html