大家好，我是陳橘又青，蘭經(jīng)香風(fēng)滿，松窗夜月圓！都說我們程序員過節(jié)最沒儀式感，再過兩周就是中秋節(jié)了，今天我們就來制作一個(gè)簡單的中秋祝福小網(wǎng)頁，祝愿看到的所有人好運(yùn)安康！（附上完整源碼，需要的小伙伴自取即可）
目錄
寫在前面
效果展示
代碼展示
HTML
css
小彩蛋
寫在前面
又是一年中秋到，不知道在座各位今年的中秋將迎來與家人團(tuán)聚的幸福，還是“舉杯邀明月，低頭寫代碼。”的苦澀加班，甚至一邊吃團(tuán)圓飯一邊加班的惱人場景，想想都心酸。以上無論哪種情況都是程序員生活的真實(shí)寫照呀（笑哭）。
我想離家近的小伙伴們肯定是下班立馬趕回家與親友們吃團(tuán)圓飯，那么離家遠(yuǎn)，身處他鄉(xiāng)的朋友們，有同事的地方就有家，屆時(shí)和節(jié)日還公司一起加班的幾個(gè)好兄弟，在月下來個(gè)痛快暢飲吧！
不管怎樣，都祝福在IT行業(yè)奮斗的各位同仁們能過一個(gè)好的中秋節(jié)，工作順順利利，出入平平安安，家庭和和睦睦，天天開開心心，月月獎(jiǎng)金多多，年年業(yè)績高高，世世幸福安康。
代碼完美無BUG，中秋團(tuán)圓不加班！
效果展示
代碼展示
由于代碼十分簡單，在這里就不做過多講解了。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>中秋節(jié)快樂</title>
</head>
<body>
<div class="container">
<div class="moon"></div>
<h1>2022 祝愿中秋快樂</h1>
<p>陳橘又青</p>
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="wave wave_1"></div>
<div class="wave wave_2"></div>
<div class="wave wave_3"></div>
</div>
</body>
</html> css
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
body {
background: #4a47e9f1;
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
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);
}
.moon {
position: absolute;
left: 4rem;
top: 3rem;
width: 6rem;
height: 6rem;
border-radius: 50%;
background-image: linear-gradient(to left top, #b1b1c5, #928fa3, #746f82, #575162, #3c3444);
}
.moon:hover {
transform: scale(1.2);
transition: 3s;
}
h1 {
position: absolute;
top: 30%;
left:24%;
font-size: 2.2rem;
color: goldenrod;
}
p {
position: absolute;
top: 40%;
left:60%;
font-family: 'Italianno', cursive;
color:goldenrod;
font-size: 2rem;
}
.star {
background: white;
border-radius: 50%;
position: absolute;
}
.star1 {
width: .2rem;
height: .2rem;
top: 3rem;
right: 4rem;
}
.star2, .star3 {
width: .1rem;
height: .1rem;
}
.star2 {
top: 5rem;
right: 10rem;
}
.star3 {
top: 14rem;
left: 3rem;
}
.wave {
position: absolute;
width: 150%;
bottom: 0;
}
.wave::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 20px;
background-size: 40px 40px;
}
.wave::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
background-repeat: repeat;
height: 27px;
background-size: 80px 40px;
}
.wave {
transition: 3s;
}
.wave_1 {
height: 80px;
background: #7375f5;
z-index: 30;
}
.wave_1::before {
background-image: radial-gradient(circle at 20px 28px, transparent 24px, #525ce2 25px);
}
.wave_1::after {
background-image: radial-gradient(circle at 10px 0px, #525ce2 14px, transparent 25px);
}
.wave_2 {
left: -30px;
height: 120px;
background: #525ce2;
z-index: 20;
}
.wave_2::before {
background-image: radial-gradient(circle at 20px 28px, transparent 24px, #181e7e 25px);
}
.wave_2::after {
background-image: radial-gradient(circle at 10px 0px, #181e7e 14px, transparent 15px);
}
.wave_3 {
left: -10px;
height: 150px;
background: #181e7e;
z-index: 10;
}
.wave_3::before {
background-image: radial-gradient(circle at 20px 28px, transparent 24px, #080b31 25px);
}
.wave_3::after {
background-image: radial-gradient(circle at 10px 0px, #080b31 14px, transparent 25px);
}
.wave_1 {
animation: wave1 10s infinite;
}
@keyframes wave1 {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(-50px);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(-30px);
}
100% {
transform: translateX(0px);
}
}
.wave_2 {
animation: wave2 12s infinite;
}
@keyframes wave2 {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(25px);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(30px);
}
100% {
transform: translateX(0px);
}
}
.wave_3 {
animation: wave3 9s infinite;
}
@keyframes wave3 {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(-30px);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0px);
}
} 
小彩蛋
對(duì)于程序員來說，加班是常態(tài)。程序員的中秋有月餅，肯定也有代碼要敲，有bug要改。當(dāng)你回著微信信息、瀏覽朋友圈、刷新微博熱搜榜、聽著音樂軟件的歌曲、和小伙伴們集體開黑時(shí)，背后可能有一群程序員在加班加點(diǎn)，用代碼守候著你的小確幸。
在程序員的世界里，這個(gè)世界上只有兩種人：一種是懂程序的，另一種是不懂的。
在你們的想象中“程序員過中秋”是這樣子的嗎？
?? 無時(shí)無刻不在敲代碼
?? 買一件格子襯衫送給自己當(dāng)中秋禮物
?? 頭頂比八月十五的月亮還亮
其實(shí)都錯(cuò)了，程序員哪能這么簡單的過中秋呢，作為一個(gè)掙得了高薪，吃得了泡面的程序員，不但能行云流水的寫代碼，還可以低頭寫代碼之余吟詩一首：
#include<stdio.h>
#include<string.h>
void main
{
char name[3][15]={"明月","月餅","中秋"};
int i,j,k;
for ( i=0;i<3;i++ )
if ( strcmp(name[i],"明月")==0 )
{
printf("明月幾時(shí)有，把餅問青天。n",name[i]);
}
for ( j=0;j<3;j++ )
if ( strcmp(name[j],"月餅")==0 )
{
printf("不知餅中何餡，今日是榴蓮。n",name[j]);
}
for ( k=0;k<3;k++ )
if ( strcmp(name[k],"中秋")==0 )
{
printf("祝大家和和美美、團(tuán)團(tuán)圓圓，節(jié)日快樂！n",name[k]);
}
}運(yùn)行結(jié)果：
明月幾時(shí)有，把餅問青天。
不知餅中何餡，今日是榴蓮。
祝大家和和美美、團(tuán)團(tuán)圓圓，節(jié)日快樂！文章來源：http://www.zghlxwxcb.cn/news/detail-433430.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-433430.html
到了這里，關(guān)于程序員過中秋丨用代碼制作一個(gè)祝福小網(wǎng)頁(html+css)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
