使用CSS实现中秋民风民俗-拜月

前言


image.png
好像有些粗糙,哈哈哈哈。图片是网络的,我用我浅薄的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;
}

image.png


月亮


月亮的颜色用的是#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);
}

image.png


嫦娥和月兔


把嫦娥和月兔放到月亮上,有种嫦娥就在注视人间的味道


.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;
}

image.png


拜月人群


我感觉这是最不搭配的图了,如有不适,敬请谅解


  .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;
}

image.png


总结


好几年中秋没有回家了,也有可能是忙或者其他原因,家里近几年中秋也不拜月了。有的时候会很怀念小时候,长大了,小时候也回不去了,因为是后端的缘故,页面也不是很懂,留作纪念吧……


附言


以前,车马很远,书信很慢,一生只够爱一个人「有感」


作者:Jouzeyu
链接:https://juejin.cn/post/7007288677831278628

0 个评论

要回复文章请先登录注册