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?