ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

手机浏览器可运行中秋祝福代码

手机浏览器可运行中秋祝福代码 !DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalablenotitle中秋节快乐/titlestyle*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;}.envelope-page{width:100vw;height:100vh;background-image:url(https://p3-flow-image-sign.douyinpic.com/tos-cn-i-3n3d0c7fce/51c415f330f3476899ac4f2499a7b741~tplv-3n3d0c7fce-image.jpeg);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:99;position:absolute;top:0;left:0;}.envelope{font-size:120px;color:#ff77dd;filter: drop-shadow(0 0 12px #ff77dd);cursor:pointer;animation: envelopeShine 1.5s ease-in-out infinite alternate;margin-top:60vh;}.envelope-tip{color:#ffffff;margin-top:10px;font-size:18px;text-shadow:0 0 8px #000000;}keyframes envelopeShine{0%{opacity:0.7;transform:scale(0.96)}100%{opacity:1;transform:scale(1.02)}}.danmu-page{width:100vw;height:100vh;background:radial-gradient(circle at 20% 10%, rgba(30,144,255,0.18), transparent 28%),radial-gradient(circle at 80% 15%, rgba(72,255,170,0.12), transparent 32%),linear-gradient(180deg, #050b2c 0%, #08143a 45%, #0d1f50 100%);display:none;overflow:hidden;position:absolute;top:0;left:0;}.polar-light{position:absolute;width:100%;height:100%;background:radial-gradient(ellipse at 15% 25%, rgba(30,144,255,0.35), transparent 28%),radial-gradient(ellipse at 85% 20%, rgba(72,255,170,0.25), transparent 32%),radial-gradient(ellipse at 50% 10%, rgba(255,255,255,0.08), transparent 40%);animation: polarLightDrift 8s ease-in-out infinite alternate;z-index:1;}.snow-fog{position:absolute;width:100%;height:100%;background:radial-gradient(circle at 10% 90%, rgba(255,255,255,0.12), transparent 24%),radial-gradient(circle at 90% 85%, rgba(255,255,255,0.08), transparent 28%);z-index:1;animation: snowFogSlow 12s ease-in-out infinite alternate;}.danmu{position:absolute;white-space:nowrap;color:#ff77dd;text-shadow: 0 0 8px #ff55cc;font-size:24px;animation: move 12s linear infinite;z-index:3;}.star{position:absolute;color:#ffdd77;font-size:40px;animation: move 14s linear infinite, twinkle 1s ease-in-out infinite alternate;z-index:2;}.cold-star{position:absolute;width:3px;height:3px;background:#ffffff;border-radius:50%;box-shadow:0 0 4px #ffffff;z-index:2;}.moon{position:absolute;top:8vh;left:50%;width:70px;height:70px;margin-left:-35px;border-radius:50%;background:#fff8cc;box-shadow:0 0 25px #ffdd77, 0 0 50px #ffdd77;z-index:4;animation: moonGlow 3s ease-in-out infinite alternate;}keyframes polarLightDrift{0%{transform:translateX(-8px) translateY(4px);}100%{transform:translateX(8px) translateY(-4px);}}keyframes snowFogSlow{0%{opacity:0.35;}100%{opacity:0.55;}}keyframes moonGlow{0%{box-shadow:0 0 25px #ffdd77, 0 0 50px #ffdd77;}100%{box-shadow:0 0 35px #ffdd77, 0 0 70px #ffdd77;}}keyframes shineText {0% {opacity:0.7;text-shadow:0 0 8px #ffd700,0 0 15px #ffb900;}100% {opacity:1;text-shadow:0 0 16px #ffd700,0 0 30px #ffb900;}}keyframes move{0% {transform: translateX(100vw);}100% {transform: translateX(-120%);}}keyframes twinkle{0% {opacity:0.4;text-shadow:0 0 3px #ffdd77;}100% {opacity:1;text-shadow:0 0 12px #fff8aa;}}keyframes coldStarTwinkle{0%{opacity:0.2;}100%{opacity:1;}}/style/headbodydiv classenvelope-page idenvelopeWrapdiv classenvelope idenvelope✉️/divdiv classenvelope-tip点击信封开启祝福/div/divdiv classdanmu-page iddanmuWrapdiv classpolar-light/divdiv classsnow-fog/divdiv classmoon/div/divscriptconst textList [中秋节快乐,中秋别感冒,中秋月明如白昼 门窗开启迎丰收,祝福声声传千里 幸福年年有增无减,明月高挂照九州 中秋祝福送给你,愿你吉祥如意绕身旁 开心快乐无忧愁];function createDanmu(){const text textList[Math.floor(Math.random()*textList.length)];const div document.createElement(div);div.className danmu;div.innerText text;div.style.top ${Math.random() * 90}vh;div.style.fontSize ${16 Math.random()*22}px;div.style.animationDuration ${8 Math.random()*8}s;document.getElementById(danmuWrap).appendChild(div);setTimeout(()div.remove(),16000);}function createStar(){const star document.createElement(div);star.className star;star.innerText ★;star.style.top ${Math.random() * 90}vh;star.style.animationDuration ${9 Math.random()*7}s;document.getElementById(danmuWrap).appendChild(star);setTimeout(()star.remove(),17000);}function createColdStar(){const star document.createElement(div);star.className cold-star;star.style.top ${Math.random() * 100}vh;star.style.left ${Math.random() * 100}vw;star.style.animationDelay ${Math.random() * 2}s;document.getElementById(danmuWrap).appendChild(star);setTimeout(()star.remove(),8000);}const envelopeWrap document.getElementById(envelopeWrap);const danmuWrap document.getElementById(danmuWrap);document.getElementById(envelope).onclick function(){envelopeWrap.style.display none;danmuWrap.style.display block;setInterval(createDanmu,450);setInterval(createStar,1200);setInterval(createColdStar,600);}/script/body/html
返回列表