I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details
preface
Saw a circle, feel everyone good 🐂 🍺, have to do the sun to the moon revolution, have to do the total lunar eclipse, have to do the sunset moon, and so on. It can be said that the eight immortals cross the sea, each show their powers, look down is really “wonderful” gradually charming eyes, but it seems that there is no worship of the moon, then I come.
Worship the moon, in Our country is a very old custom, in fact, is derived from the ancients in some places of our country to the “moon god” a worship activity. The Mid-Autumn Festival is the ancient sky worship – worship the moon custom remains, offering to the moon as one of the important festival worship, from ancient times to this day, gradually evolved into the folk moon, moon activities, but also become modern people eager to reunite, sustains the good wishes of the main form of life. “Above from Baidu Baike”
I do not know whether there is this custom, my hometown is some, every time to worship the moon will prepare a lot of delicious, but I am very happy, because the next day is my birthday, that is, August 16, so the delicious thief.
Nonsense not to say, began to enter the subject, source here: Mid-Autumn worship month
HTML
A big DIV set of three div, respectively on behalf of the moon, the moon on the jade Rabbit, the moon worship crowd.
<! DOCTYPEhtml>
<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>The Mid-Autumn festival moon worship</title>
</head>
<body>
<div class="background">
<div class="moon"></div>
<div class="change"></div>
<div class="table"></div>
</div>
</body>
Copy the codeCSS
The stars background
The background picture is from some big guy’s from, own drawing ability is not good, sweat. As usual, a length and width are set to fit the full screen, followed by a background image.
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;
}
Copy the code
The moon
The color of the moon is # FF0, matched with a matching shadow. The reason why white is not used is that I feel yellow as the main color can better show the “sanctity” and “non-superstition” of worshiping the moon.
.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);
}
Copy the code
Chang ‘e and the Moon Rabbit
Put chang ‘e and moon rabbit on the moon, there is a taste of Chang ‘e watching the world
.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;
}
Copy the code
Worship the crowd
I feel this is the most mismatched picture, please forgive me if you feel uncomfortable
.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;
}
Copy the code
conclusion
Several years Mid-Autumn festival did not go home, may also be busy or other reasons, the family in recent years the Mid-Autumn festival is not worship. Sometimes I will miss my childhood. When I grew up, I could not go back to my childhood. Because it is the backend, the page is not very understanding, so as to commemorate it…
P.S.
In the past, the carriage was far away, the letter was slow, and the whole life was only enough to love one person “feeling”.