PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest
The appearance of the gate during Chinese New Year
Spring Festival is coming, the feeling of missing home is indescribable, and so on back home, Spring Festival couplets have been posted, or waiting for you to complete this very meaningful activity?
Here I draw a scene of the front door of my home (very simple), paste the Spring Festival couplets, and feel the taste of home with my heart.
HTML
This time is mainly about a home scene, so you can not pay too much attention to the technical part, through the formation of the scene map, to feel your hometown, your door, everything in your home.
For this scenario, we need to give a simple DOM structure like this:
<div class="house">
<div class="wall"></div>
<div class="door">
<div class="blessing blessing1"><span>blessing</span></div>
<div class="blessing blessing2"><span>blessing</span></div>
<div class="blessing blessing3"><span>blessing</span></div>
<div class="hc">Turn was packed</div>
<div class="c lc">The dragon jumps and the tiger jumps</div>
<div class="c rc">Birds 'twitter and fragrance of flowers make spring</div>
</div
Copy the code
CSS
Scene using CSS painting, no cool animation, only a miss home ♥, to see the dom structure of the new clothes.
Let me give you a basic style
html {
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: radial-gradient(transparent, #f5aaaa);
--pw: 4rem;
}
Copy the code
As for the definition of — PW variable, it is because the scene is used in the context of another article: 🐅 The Year of the Tiger, the Spring Festival, 😵 the lovely tiger is coming home – Nuggets (juejin. Cn)
home
First fix an outline for the home, the code is as follows:
.house {
width: calc(var(--pw) * 12);
height: calc(var(--pw) * 4);
color: #b1a5a5;
position: relative;
}
.house::before {
content: ' ';
position: absolute;
left: calc(var(--pw) * -0.25);
bottom: calc(var(--pw) * -0.5);
width: 100%;
height: calc(var(--pw) * 0.5);
transform: skewX(-45deg);
background-color: currentColor;
opacity: 0.3;
}
Copy the code
wall
In order to foil the door of the home, how can the cement wall be little?
.wall {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 70%;
background-color: currentColor;
}
Copy the code
The door
This gate 🚪 is very common, so add a home word, increase the taste of home.
.door {
font-size: calc(var(--pw) * 0.25);
width: calc(var(--pw) * 3);
height: 100%;
background-color: #fff;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
color: # 000;
}
.door::before{
content: 'home';
position: absolute;
width: 100%;
font-size: calc(var(--pw) * 0.5);
text-align: center;
top: 50%;
transform: translateY(-50%);
animation: _opacity 3s ease-in-out infinite;
}
@keyframes _opacity{
50% {
opacity: 0.2; }}Copy the code
Spring Festival couplets
On the door of the house, the basic paste of Spring Festival couplets are: three blessing or two blessing a spring, hengpi, about the couplet, blessing has two kinds of paste method, positive blessing: representative is blessing, pour blessing: representative blessing arrived.
/* 福 */
.blessing {
width: calc(var(--pw) * 0.5);
height: calc(var(--pw) * 0.5);
background-color: red;
text-align: center;
line-height: calc(var(--pw) * 0.5);
transform: rotate(45deg);
position: absolute;
}
.blessing span {
transform: rotate(-45deg);
display: inline-block;
}
.blessing1 {
top: calc(var(--pw) * 0.25);
left: calc(var(--pw) * 1.25);
}
.blessing2 {
top: calc(var(--pw) * 0.75);
left: calc(var(--pw) * 0.25);
}
.blessing3 {
top: calc(var(--pw) * 0.75);
right: calc(var(--pw) * 0.25);
}
Transverse / * * /
.hc {
width: calc(var(--pw) * 2);
height: calc(var(--pw) * 0.5);
background-color: red;
text-align: center;
line-height: calc(var(--pw) * 0.5);
position: absolute;
top: calc(var(--pw) * 1);
left: calc(var(--pw) * 0.5);
transform: scale(0.7);
}
Couplets / * * /
.c {
width: calc(var(--pw) * 0.25);
background-color: red;
text-align: center;
padding: calc(var(--pw) * 0.15) calc(var(--pw) * 0.1);
position: absolute;
bottom: calc(var(--pw) * 0.15);
transform: scale(0.8);
}
.lc {
left: calc(var(--pw) * 0.25);
}
.rc {
right: calc(var(--pw) * 0.25);
}
Copy the code
conclusion
XDM, is the feeling of going home particularly strong at the moment? When at home, will you paste the family Spring Festival couplets?