使用CSS实现中秋民风民俗-拜月
前言
好像有些粗糙，哈哈哈哈。图片是网络的，我用我浅薄的Photoshop知识做了简单的处理。
看了一圈，感觉大家都好🐂 🍺，有做日地月公转的，有做月全食的，有做日落月出的，等等。可谓是八仙过海，各显神通，通览下来真是“精彩”渐欲迷人眼，但是好像没有做拜月的，那我来吧。
拜月，在我国是一种十分古老的习俗，实际上是源自我国一些地方古人对“月神”的一种崇拜活动。中秋节是上古天象崇拜——敬月习俗的遗痕，祭月作为中秋节重要的祭礼之一，从古代延续至今，逐渐演化为民间的赏月、颂月活动，同时也成为现代人渴望团聚、寄托对生活美好愿望的主要形态。「以上来自百度百科」
不知道大家那边有没有这个习俗，我老家是有的，每次拜月都会准备很多好吃的，可把我高兴坏了，因为第二天就是我生日，也就是八月十六，所以好吃的贼多。
废话不多说，开始进入正题，源码在这里：中秋拜月
HTML
一个大的div里面套了三个div，分别代表月亮，月亮上的嫦娥玉兔，月亮下的拜月人群。
<!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">
<title>中秋拜月</title>
</head>
<body>
<div class="background">
<div class="moon"></div>
<div class="change"></div>
<div class="table"></div>
</div>
</body>
CSS
星星背景
背景图片是从某位大佬的那里获取的，自己作图能力不行，流汗。很常规，设置了一个长宽适应全屏幕，然后就是背景图。
body {
margin: 0;
}
.background {
width: 100%;
height: calc(100vh);
background: #000 url("https://test-jou.oss-cn-beijing.aliyuncs.com/3760b5e2cc46f556.png") repeat top center;
z-index: 1;
}
月亮
月亮的颜色用的是#ff0，搭配了一个相符的阴影，之所以没有用白色，是我感觉主色调用黄色更能显示拜月的“神圣性”「非迷信」
.moon {
position: absolute;
left: 108px;
top: 81px;
width: 180px;
height: 180px;
background-color: #ff0;
border-radius: 50%;
box-shadow: 0 0 20px 20px rgba(247, 247, 9, 0.5);
}
嫦娥和月兔
把嫦娥和月兔放到月亮上，有种嫦娥就在注视人间的味道
.change {
background-image: url("https://test-jou.oss-cn-beijing.aliyuncs.com/unnamed.png");
background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
position: absolute;
left: 100px;
top: 81px;
width: 180px;
height: 180px;
z-index: 99;
}
拜月人群
我感觉这是最不搭配的图了，如有不适，敬请谅解
.table{
background-image: url("https://test-jou.oss-cn-beijing.aliyuncs.com/table.png");
background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
bottom: 0;
width: 640px;
right: 0;
height: 450px;
position: absolute;
}
总结
好几年中秋没有回家了，也有可能是忙或者其他原因，家里近几年中秋也不拜月了。有的时候会很怀念小时候，长大了，小时候也回不去了，因为是后端的缘故，页面也不是很懂，留作纪念吧……
附言
以前，车马很远，书信很慢，一生只够爱一个人「有感」
作者：Jouzeyu
链接：https://juejin.cn/post/7007288677831278628
