月华圆满正秋中，天上人间此夕同。
每年的农历八月十五，是中国的传统节日中秋节。
每逢这个传统节日，我们都要给亲朋好友送中秋礼品以示祝福。
那么，程序员会用什么样的方式来送中秋祝福呢？
是分享小程序卡片，还是有其他创意？欢迎大家用自己熟悉的编程能力，给你的亲朋好友们带来不一样的中秋祝福~
即日起至2024年9月17日，在下方评论区晒出你制作的中秋贺卡代码与预览交互图，社区将精选用户的留言送出中秋大礼包一份。
偷偷告诉你，中秋贺卡越精美越有创意，被精选评论的机会越大噢！
快来看看，中秋大礼包里都有什么？
王者荣耀充电宝*1+微信气泡狗语音条抱枕阿白*1+微信红包收纳包*1=微信社区的中秋大礼包*1份
感谢大家对社区中秋话题的关注与参与！我们收到了来自各位程序员朋友们的不一样的中秋祝福，有用小程序形式的，有用html编译，有用java编译的...等等，果然，程序员们中秋祝福都很特别呢。
我们精选以上 6 位用户的回答并送出微信周边礼物。2024 年 9 月 20 日前，我们将通过社区私信联系以上得奖者确定邮寄地址，如本周内未收到回复（即 2024 / 9 / 22 0点前），视为放弃奖品。
“但愿人长久，千里共婵娟。” 希望彼此思念的人都平安长久，相隔千山万水，只能将思念寄托于满月，让月亮传达每一份思念。
简单写了个卡片效果，祝大家中秋节快乐🎑 ，愿所有家庭都团团圆圆🌕
部分代码片段
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>中秋快乐</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style type="text/css">.img1{position:absolute;width:300px;height:300px;background:url('./ii.png')no-repeat;background-size:100%100%;border-radius:50%;top:220px;left:30px;transition:all 1s ease-in-out 0.8s;z-index:10}.img2{position:absolute;width:240px;height:240px;background:url('./iii.png')no-repeat;background-size:100%100%;border-radius:50%;top:100px;right:-500px;transition:all 1s ease-in-out 0.8s;z-index:10}.cont1{position:absolute;width:352px;text-align:justify;right:10%;top:50%;color:#fff;font-size:24px;transform:translate(0,-50%);z-index:8;transition:all 1s ease-in-out 0.7s;line-height:36px}.cont2{position:absolute;width:360px;left:-400px;top:50%;color:#fff;font-size:24px;transform:translate(0,-50%);z-index:8;transition:all 1s ease-in-out 0.5s}.cont2 p{padding:20px 0}p:nth-child(2){padding-left:20px}p:nth-child(3){padding-left:40px}p:nth-child(4){padding-left:60px}.tomove{top:-534px;left:461px}.tomove1{left:-248px}.tomove2{right:10%}.tomove3{left:-500px;top:400px}.tomove4{top:300px;right:50px}.tomove5{right:-360px}.tomove6{left:10%}.tomove7{top:-734px}.tomove8{top:30%;left:56%;font-size:320px;opacity:1}.tomove9{top:-1000px;left:60%;font-size:820px;opacity:1}</style></head><body><img src="star.svg"class="img"><div class="yuan1">🌕</div><div class="box"><div class="yuan">🌕</div><div class="ta1 t1"><div>也许你望着月亮时，我正在想你!</div><div class="ta_1"onclick="ckick1()">睹月</div></div><div class="img1"></div><div class="cont1"><span>“举头望明月，低头思故乡。”一个独处他乡的人，白天奔波忙碌，倒还能冲淡离愁，然而一到夜深人静的时候，心头就难免泛起阵阵思念故乡的波澜。何况是在月明之夜，更何况是月色如霜的秋夜。从天上的月亮联想到人间的团圆，这是中国人特有的思念方式。</span></div><div class="ta1 t2"><div>星星是银河递给月亮的情书，你是世间赠于我的恩赐。</div><div class="ta_1"onclick="ckick2()">思人</div></div><div class="img2"></div><div class="cont2"><p>中天明月照人间，</p><p>秋意浓浓喜气添。</p><p>快马加鞭奔前程，</p><p>乐享团圆共婵娟。</p></div></div></body><script>$().ready(function(){var img=$("img");var arr=new Array();function starInit(){for(let num=1;num<=166;num++){var starX=parseInt(Math.random()*1920);var starY=parseInt(Math.random()*1080);var starR=parseInt(Math.random()*16+10);var cloneImg=img.clone();cloneImg.css({"bottom":starY});cloneImg.css({"right":starX});cloneImg.css({"width":starR});arr[num]=cloneImg;$("body").append(cloneImg)}img.css("right",parseInt(Math.random()*1920));img.css("top",parseInt(Math.random()*400));arr.push(img)}function flash(){var start=parseInt(Math.random()*50+1);var end=parseInt(Math.random()*arr.length);var temp=null;if(start>end){temp=start;start=end;end=temp}for(var i=start;i<=end;i++){var func=(function(){var index=i;var interval=parseInt(Math.random()*500+500);return function(){if(arr[index]){arr[index].toggle(interval)}}})();func()}}starInit();setInterval(flash,40)});function ckick1(){$(".yuan").addClass('tomove')$(".t1").addClass('tomove1')$(".t2").addClass('tomove2')$(".img1").addClass('tomove3')$(".img2").addClass('tomove4')$(".cont1").addClass('tomove5')$(".cont2").addClass('tomove6')setTimeout(()=>{$(".yuan").addClass('tomove7')$(".yuan1").addClass('tomove9')},1000)$(".yuan1").addClass('tomove8')}function ckick2(){$(".yuan").removeClass('tomove')$(".yuan").removeClass('tomove7')$(".t1").removeClass('tomove1')$(".t2").removeClass('tomove2')$(".img1").removeClass('tomove3')$(".img2").removeClass('tomove4')$(".cont1").removeClass('tomove5')$(".cont2").removeClass('tomove6')$(".yuan1").removeClass('tomove9')setTimeout(()=>{$(".yuan1").removeClass('tomove8')},100)}</script></html>完整代码上传至Gitee: https://gitee.com/hkxiao-li/mid-autumn-festival
我在等腾讯定制的月饼，哈哈～
这种话题就很有意思，用HTML简单实现了一个贺卡
让月亮🌙显得更加饱满圆润有光泽，星⭐星能够动态闪烁
同时祝愿大家中秋快乐，阖家幸福美满！
在线访问地址：
https://bmob-cdn-8786.bmobcloud.com/2024/09/09/72ce6bec4008bc7380b711ed2d4a0559.html
图片转的有点糊，看在线吧~
代码片段：
<body> <div class="container"> <div class="main-content"> <div class="moon"></div> <div class="content"> <div class="font2">祝大家中秋快乐</div> <div class="font2 mT10">  祝社区越来越好</div> <div class="font2 mT10">    祝祖国繁荣昌盛</div> </div> <div class="author">By：一笑皆春 2024年</div> <div class="star star1"></div> <div class="star star2"></div> <div class="star star3"></div> <div class="star star4"></div> <div class="star star5"></div> <div class="star star6"></div> <div class="cloud cloud_1"></div> <div class="cloud cloud_2"></div> <div class="cloud cloud_3"></div> </div> </div> </body> .container { width: 100%; overflow: auto; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; } .main-content { position: relative; width: 700px; height: 400px; border-radius: 2px; box-shadow: .5rem 1rem 1rem 0 rgba(0, 0, 0, 0.6); overflow: hidden; color: #333; background-image: linear-gradient(to top, #191730, #10131d, #19125f, #050e44); } .content { position: absolute; top: 15%; left: 35%; color: goldenrod; letter-spacing: 5px; animation: flip-animation 5s infinite ease-in-out; } @keyframes flip-animation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @keyframes starcloud { 0% { scale: 1; } 50% { scale: 2; } 100% { scale: 1; } } .author { position: absolute; right: 20px; bottom: 20px; color: rgba(225, 225, 225, 0.5); letter-spacing: 2px; font-size: 0.8rem; z-index: 10000; }效果：
代码片段：
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
:root { --w: 100px; --h: 50px; --color1: #707dda; --color2: #09135e; --bg: linear-gradient(30deg, var(--color1) 0, var(--color1) 30%, transparent 30%), linear-gradient(-30deg, var(--color1) 0, var(--color1) 30%, transparent 30%), radial-gradient(at center bottom, var(--color2) 0%, var(--color1) 2%, var(--color1) 2%, var(--color1) 6%, var(--color2) 6%, var(--color2) 8%, var(--color1) 8%, var(--color1) 12%, var(--color2) 12%, var(--color2) 15%, var(--color1) 15%, var(--color1) 19%, var(--color2) 19%, var(--color2) 23%, var(--color1) 23%, var(--color1) 28%, var(--color2) 28%, var(--color2) 32%, var(--color1) 32%, var(--color1) 37%, var(--color2) 37%, var(--color2) 42%, var(--color1) 42%, var(--color1) 48%, var(--color2) 48%, var(--color2) 54%, var(--color1) 54%, var(--color1) 61%, var(--color2) 61%, var(--color2) 70%, var(--color1) 70%, var(--color1) 100%); }
@font-face { font-family: "阿里妈妈东方大楷 Regular"; font-weight: 400; src: url("//at.alicdn.com/wf/webfont/3JTCJEEgmPFa/tImJlangMrw8.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/3JTCJEEgmPFa/u4Nis8eXTxbL.woff") format("woff"); font-display: swap; }
@font-face { font-family: "阿里妈妈数黑体 Bold"; font-weight: 700; src: url("//at.alicdn.com/wf/webfont/3JTCJEEgmPFa/V89BjBNVQTiw.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/3JTCJEEgmPFa/WkPNRPnAeEho.woff") format("woff"); font-display: swap; }
body { width: 100%; height: 100vh; overflow: hidden; background: var(--bg); background-size: var(--w) var(--h); }
body::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; --color1: #707dda; --color2: #09135e; background: var(--bg); background-size: var(--w) var(--h); background-position: calc(var(--w) / 2) calc(var(--h) / 2); mix-blend-mode: multiply; }
.circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70vmin; height: 70vmin; border-radius: 50%; }
#moon_behind { background: #faca23; background: #fff; display: flex; justify-content: center; align-items: center; mix-blend-mode: screen; }
h1 { position: absolute; left: 15%; top: 10%; font-family: '阿里妈妈东方大楷 Regular'; font-size: 28vmin; font-weight: bold; line-height: 1; color: #000; pointer-events: none; }
h1:last-of-type { left: 40%; top: 50%; }
#moon_yellow { z-index: 2; background: linear-gradient(#FF0, #FC0); display: flex; justify-content: center; align-items: center; mix-blend-mode: multiply; }
#moon_yellow h1 { color: #fff; }
#moon_yellow::after { content: ''; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; border-radius: 100%; box-shadow: 0 0 30px 5px rgba(255, 255, 240, 1); }
#moon_body { z-index: 3; box-shadow: 0 0 30px 5px rgba(255, 255, 240, 1); }
.heyu { position: absolute; top: 35%; right: 7%; font-family: '阿里妈妈数黑体 Bold'; font-size: 2.5vmin; font-weight: bold; line-height: 1; color: var(--color2); }
#rabbit { position: absolute; right: 1vmin; top: 2vmin; width: 18vmin; height: 18vmin; }
#rabbit div { position: absolute; }
#rabbit .body { width: 100%; height: 100%; left: 20%; top: 40%; }
#rabbit .body1 { width: 60%; height: 40%; top: -12%; left: -7%; background-color: #fff; box-shadow: 0 2px 4px 0 #bbb9a7; border-radius: 50%; transform: rotate(30deg); }
#rabbit .body2 { width: 50%; height: 50%; top: -13%; left: 8%; background-color: #fff; box-shadow: 5px 2px 4px 0 #bbb9a7; border-radius: 50%; transform: rotate(30deg); }
#rabbit .hand1 { width: 50%; height: 15%; top: 0; left: -32%; background-color: #fff; border-left: 1px solid #bbb9a7; border-radius: 50%; transform: rotate(13deg); animation: hand .8s linear infinite alternate; }
@keyframes hand { to { transform: rotate(8deg); } }
#rabbit .foot1 { width: 50%; height: 15%; top: 26%; left: 12%; background-color: #fff; border-radius: 50%; transform: rotate(74deg); animation: foot1 .8s linear infinite alternate; }
@keyframes foot1 { to { transform: rotate(82deg); } }
#rabbit .foot2 { width: 50%; height: 15%; top: 15%; left: 24%; background-color: #fff; border-radius: 50%; transform: rotate(70deg); animation: foot2 .8s linear infinite alternate; }
@keyframes foot2 { to { transform: rotate(76deg); } }
#rabbit .tail { width: 15%; height: 15%; top: 0; left: 51%; background-color: #fff; border-radius: 50%; }
#rabbit .head { width: 40%; height: 40%; top: 0; left: 0; background: #fff; border-radius: 50%; border-bottom: 1px solid rgb(133, 130, 130); }
#rabbit .head::after { content: ''; position: absolute; width: 2.5%; height: 20%; background: #a6aaa4; box-shadow: 0 0 2px 0 rgb(53, 52, 52); border-radius: 12.5%; left: 35%; top: 50%; transform: rotate(-64deg); }
#rabbit .mouth { width: 45%; height: 62.5%; top: 32.5%; left: -7.5%; background: #fff; border-left: 1px solid #ccc; border-radius: 50%; transform: rotate(-60deg); }
#rabbit .mouth::before { content: ''; position: absolute; left: 5%; top: 7.5%; width: 7.5%; height: 2.5%; background: #a6aaa4; transform: rotate(84deg); }
#rabbit .ear1 { width: 125%; height: 37.5%; top: -22.5%; right: -75%; background-color: #fff; border-radius: 50%; transform: rotate(-30deg); }
#rabbit .ear2 { width: 125%; height: 32.5%; top: 17.5%; right: -95%; background-color: #fff; border-bottom: 1px solid #8f8c74; border-radius: 50%; }
#rabbit .ear2::after { content: ''; position: absolute; right: 5%; bottom: 5%; width: 70%; height: 70%; border-radius: 50%; background: pink; }
#rabbit_little { --footH: 2.5vmin; position: absolute; left: 14%; bottom: 20%; font-size: 1.2vmin; width: 12vmin; height: 7vmin; border-radius: 41% 59% 41% 41% / 54% 60% 40% 41%; background-color: #fff; background-image: radial-gradient(circle at 80% 48% #000 0% #000 4%, transparent 4%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); animation: rabbit_little 1s linear infinite; }
@keyframes rabbit_little { 20% { --footH: 2.5vmin; transform: rotate(-10deg) translate(1em, -2em); box-shadow: -0.2em 3em 0 -1e #928282 }
40% { --footH: 2.5vmin; transform: rotate(10deg) translate(3em, -4em); box-shadow: -0.2em 3.25em 0 -1.1e #928282 }
60%, 75% { --footH: 0; transform: rotate(0) translate(4em, 0); box-shadow: -0.2em 1em 0 -0.75e #928282 } }
/* 小兔子耳朵 */ #rabbit_little::before { content: ''; position: absolute; right: 22%; top: -50%; --earW: 1.65vmin; width: var(--earW); height: 6vmin; border-radius: 50%; background: #fff; transform: rotate(-35deg); box-shadow: -2vmin .2vmin 0px .3vmin #fff; }
/* 小兔子脚 */ #rabbit_little::after { content: ''; position: absolute; left: 3%; bottom: -.3vmin; width: 2.5vmin; height: var(--footH); border-radius: 50%; background: #fff; box-shadow: 7vmin 0 0px .05vmin #fff; }
#rabbit_little>p { position: absolute; left: -1vmin; top: .8vmin; width: 2.5vmin; height: 2.5vmin; border-radius: 50%; background: #fff; }
.lantern { --lanternLine: #d7061f; --lanternWidth: 7vw; --lanternHeight: 12.5vw; position: absolute; left: var(--l); top: var(--t); right: var(--r); transform: scale(var(--scale)); width: var(--lanternWidth); height: var(--lanternHeight); border-radius: 12px 12px 12px 12px / 10px 10px 10px 10px; background: radial-gradient(circle at center, #febb75 0%, transparent var(--radius)), repeating-linear-gradient(to right, transparent 0%, transparent 15%, var(--lanternLine) 15%, var(--lanternLine) 25%); background-position: center, calc(var(--lanternWidth) / 6) 0; background-color: #fd3c4e; animation: lantern 1s linear infinite alternate; }
.lantern::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: -8px; width: 45%; height: 8px; background: #aa0317; }
.lantern::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(0px - var(--lanternWidth) * 3 / 5); width: 40%; height: calc(var(--lanternWidth) * 3 / 5); background: repeating-linear-gradient(to right, var(--lanternLine) 0%, var(--lanternLine) 5%, transparent 5%, transparent 10%); }
@property --radius { syntax: '<percentage>'; inherits: false; initial-value: 35%; }
@keyframes lantern { to { --radius: 50%; } }
.cloud { position: absolute; --cloudW: 13.1vw; --cloudH: 5.5vw; --time: 1s; --color: #fff; --clounLine: .5vw; left: calc(0px - var(--cloudW)); top: var(--t); color: var(--color); /* color: #fff; */ width: var(--cloudW); height: var(--cloudH); transform: scale(var(--scale)) rotateY(var(--rotateY)); animation-name: cloud; animation-duration: 15s; animation-delay: var(--time); animation-timing-function: cubic-bezier(.27, .42, .58, .77); animation-iteration-count: infinite; }
@keyframes cloud { to { left: 100vw; } }
.cloud_reverse { left: calc(100vw + var(--cloudW)); animation-name: cloud_reverse; }
@keyframes cloud_reverse { to { left: calc(0px - var(--cloudW)); } }
.cloud div { position: absolute; }
.cloud1 { width: 31.57%; height: 87.5%; border-radius: 55% 40% 40% 50%; border: var(--clounLine) solid currentColor; border-right: none; }
.cloud1::after { content: ''; position: absolute; right: 0px; bottom: -2.857%; width: 50%; height: 50%; border-radius: 50% 50% 50% 0; border: var(--clounLine) solid currentColor; border-left: none; border-bottom: none; }
.cloud2 { left: 29.4%; top: -8%; width: 48%; height: 60%; border-radius: 50%; border-top: var(--clounLine) solid currentColor; }
.cloud3 { right: 0; top: 5%; width: 42.11%; height: 112.5%; border-radius: 50% 50% 50% 40%; border: var(--clounLine) solid currentColor; border-left: none; }
.cloud3::after { content: ''; position: absolute; left: 2.5%; bottom: calc(0px - var(--clounLine)); width: 50%; height: 50%; border-radius: 50% 50% 0% 50%; border: var(--clounLine) solid currentColor; border-right: none; }
.cloud4 { left: 20%; bottom: -43.75%; width: 40%; height: 62.5%; border-radius: 50%; border-bottom: var(--clounLine) solid currentColor; transform: rotate(-10deg); }
.cloud5 { left: -42.105%; top: 50%; width: 42.105%; height: 87.5%; border-radius: 90% 0% 50% 50%; border-top: var(--clounLine) solid currentColor; transform: rotate(10deg); }
.cloud6 { left: -18.422%; bottom: -40%; width: 42.105%; height: 50%; border-radius: 0% 0% 50% 50%; border-bottom: var(--clounLine) solid currentColor; transform: rotate(10deg); }
.cloud6::after { content: ''; position: absolute; left: -63%; top: 40%; width: 75%; height: 100%; border-radius: 40% 60% 0 0; border-top: var(--clounLine) solid currentColor; } </style></head>
<body> <!-- 月亮底图镂空文字 --> <div id="moon_behind" class="circle"> <h1>中</h1> <h1>秋</h1> </div>
<!-- 月亮上色 --> <div id="moon_yellow" class="circle"> <h1>中</h1> <h1>秋</h1> <div class="heyu"> <p>但愿人长久千里共婵娟</p> <p>MID-Autumn Festival</p> </div> </div>
<!-- 月亮主体内容 --> <div id="moon_body" class="circle"> <!-- 右上角兔子 --> <div id="rabbit"> <div class="body"> <div class="body1"></div> <div class="body2"></div> <div class="hand1"></div> <div class="foot1"></div> <div class="foot2"></div> <div class="tail"></div> </div> <div class="head"> <div class="mouth"></div> <div class="ear1"></div> <div class="ear2"></div> </div> </div>
<!-- 左下角小兔子 --> <div id="rabbit_little"> <p></p> </div>
</div>
<!-- 灯笼 --> <div class="lantern" style="--l: 15%;--t: 7%;--scale: .9"></div> <div class="lantern" style="--r: 15%;--t: 5%;--scale: 1"></div> <div class="lantern" style="--l: 8%;--t: 30%;--scale: .3"></div> <div class="lantern" style="--r: 6%;--t: 20%;--scale: .6"></div> <div class="lantern" style="--r: 12%;--t: 38%;--scale: .2"></div>
<!-- 祥云 --> <div class="cloud" style="--t: 77%;--scale: .8;--rotateY: 0;--color: #ce7808;--time: 8s;"> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> <div class="cloud4"></div> <div class="cloud5"></div> <div class="cloud6"></div> </div>
<div class="cloud" style="--t: 77%;--scale: .9;--rotateY: 0;--color: #05aaab;--time: 4s"> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> <div class="cloud4"></div> <div class="cloud5"></div> <div class="cloud6"></div> </div>
<div class="cloud" style="--t: 52%;--scale: .5;--rotateY: 0;--color: #fff;--time: 0s;"> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> <div class="cloud4"></div> <div class="cloud5"></div> <div class="cloud6"></div> </div>
<div class="cloud cloud_reverse" style="--t: 68%;--scale: .8;--rotateY: 180deg;--color: #fff;--time: 8s;"> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> <div class="cloud4"></div> <div class="cloud5"></div> <div class="cloud6"></div> </div>
<div class="cloud cloud_reverse" style="--t: 64%;--scale: .4;--rotateY: 180deg;--color: #fa0e7c;--time: 3s;"> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> <div class="cloud4"></div> <div class="cloud5"></div> <div class="cloud6"></div> </div>
<div class="cloud cloud_reverse" style="--t: 85%;--scale: .3;--rotateY: 180deg;--color: #6ee136;--time: 0s"> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> <div class="cloud4"></div> <div class="cloud5"></div> <div class="cloud6"></div> </div></body>
</html>
烂的一般不看，这么烂的不得看一下？？？
中秋祝福小黑板
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>月华圆满正秋中，天上人间此夕同。</title><style>body,html{height:100%;margin:0;padding:0;display:flex;justify-content:center;align-items:center;background-color:#f4f4f4;overflow:hidden}.wall{position:relative;width:80vw;min-height:500px;max-height:80vh;background-color:#fff;border:2px dashed#ccc;padding:20px;box-sizing:border-box;background-size:100%100%;background-image:url('https://images.pexels.com/photos/3825303/pexels-photo-3825303.jpeg')}.label{position:absolute;width:100px;height:50px;background-color:#f9f9f9;border:1px solid#ddd;border-radius:4px;padding:5px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;color:#333;font-size:14px;z-index:1}@media(max-width:768px){.wall{width:95vw;padding:10px}.label{width:80px;height:40px;font-size:12px}}.label::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('https://images.pexels.com/photos/6692131/pexels-photo-6692131.jpeg');background-size:cover;opacity:0.3;z-index:-1}</style></head><body><div class="wall"></div><script>const wall=document.querySelector('.wall');const labels=['月华圆满正秋中！','天上人间此夕同！','码上中秋！','愿君心如满月！','照亮前程万里！','皓月当空！','星河滚烫！','共赏一轮明月！','遥寄相思之情！','家人幸福美满！','事事圆满！','共享天伦之乐！','心情如明月般皎洁！','生活似月饼般甜蜜！','生活充满光明与希望！','无尽的喜悦和幸福！','丹桂飘香！','照亮您的梦想！','幸福和成功伴您左右！','温馨甜蜜！','佳音相伴！','情意满满！','王者荣耀充电宝！','微信气泡狗！','语音条抱枕！','微信红包收纳包！','微信社区中秋大礼包！','阖家欢乐！','月圆人团圆，中秋共婵娟！','明月寄相思，中秋福满堂！','佳节如意，福寿双全！','月饼香甜，情意绵绵！','幸福美满，中秋吉祥！','明月高悬，照亮幸福路！','中秋佳节，福星高照！','花好月圆夜，幸福永相随！','明月清风，共赏中秋景！','家庭和睦！','吉祥如意！','中秋安康！','祝福声声！','幸福心中留！','幸福安康！','思念绵长！','光明圆满！','天伦之乐！','笑口常开！','温情脉脉！','甜蜜如饼！','星光璀璨！','岁月静好！','欢乐祥和！','明月寄情！','甜蜜温馨！','幸福相守！','福气临门！','事业有成！','嫦娥舞袖迎佳节！','玉兔呈祥送祝福！','愿君事业如月！','月圆花好人相聚！','中秋佳节共此时！','月圆人更圆！','幸福常相伴！','明月清辉洒满园！','中秋佳节共婵娟！','明月高悬照人间！','家家户户庆团圆！','嫦娥舞袖迎佳节！','玉兔呈祥送祝福！','同享天伦之乐！','月圆饼香，甜蜜共享！','微信开放社区！',];function getRandomInt(min,max){return Math.floor(Math.random()*(max-min+1))+min}function createLabel(text){const label=document.createElement('div');label.classList.add('label');label.textContent=text;const x=getRandomInt(0,wall.offsetWidth-label.offsetWidth);const y=getRandomInt(0,wall.offsetHeight-label.offsetHeight);label.style.left=`${x}px`;label.style.top=`${y}px`;label.style.zIndex=getRandomInt(1,10);wall.appendChild(label)}labels.forEach(createLabel);</script></body></html>好友中秋祝福，支持增加照片，祝福语。
<block wx:for="{{viewData}}" wx:key="index" wx:if="{{viewData}}"> <!-- 第一层 --> <view wx:if="{{item.node == 'view'}}" style="{{item.style}}" class="{{item.class}}"> <block wx:for="{{item.child}}" wx:for-item="childItem2" wx:key="index"> <!-- 第二层 --> <block wx:if="{{childItem2.node == 'view'}}"> <view style="{{childItem2.style}}" class="{{childItem2.class}}"> <block wx:for="{{childItem2.child}}" wx:for-item="childItem3" wx:key="index"> <!-- 第三层 --> <block wx:if="{{childItem3.node == 'view'}}"> <view style="{{childItem3.style}}" class="{{childItem3.class}}"> <!-- 第四层 --> <block wx:for="{{childItem3.child}}" wx:for-item="childItem4" wx:key="index"> <block wx:if="{{childItem4.node == 'view'}}"> <view style="{{childItem4.style}}" class="{{childItem4.class}}">{{childItem4.text}}</view> </block> <block wx:if="{{childItem4.node == 'image'}}"> <image src="{{childItem4.src}}" mode="{{childItem4.mode}}" style="{{childItem4.style}}" class="{{childItem4.class}}"></image> </block> <block wx:if="{{childItem4.node == 'pre'}}"> <pre style="{{childItem4.style}}" class="{{childItem4.class}}">{{childItem4.text}}</pre> </block> <block wx:if="{{childItem4.node == 'rich-text'}}"> <rich-text style="{{childItem4.style}}" class="{{childItem4.class}}" nodes="{{childItem4.html}}"></rich-text> </block> </block> </view> </block> </block> </view> </block> </block> </view> </block> // 把动画代码包装为了JSON，字数超限，放在腾讯文档了 // https://docs.qq.com/doc/DTGZZQ1hPTmxEaHB1别等了，运行一下就有了
console.info('%c\uD83E\uDD6E','font-size:20em')我那个微信红包收纳包坏了，能舔着脸再要一个王者荣耀充电宝么。给你们秀一段代码
print(""" 中秋佳节至，明月照心间。 愿君生活美，幸福永绵延， 家人常相伴，团圆乐无边。 """)程序员的浪漫，肯定是来自命令行里的中秋祝福啦！嘿嘿
开源库：https://github.com/knrt10/asciiConvert
等你的月饼！