PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

过年时，大门的样子

春节来了，思念家乡之情不可言喻，等回到家的时候，春联是已经贴好，还是等着你去完成这项非常有意义的活动呢？

这里画了一个家里的大门场景（非常简易），贴上春联，用心去感觉家里的味道。

HTML

此次主要讲述的是一个家的场景，所以技术部分大家可以不用太关注，通过形成的这个场景图，去感觉你的家乡，你家的大门，你家里所想的一切。

这个场景，我们需要给个简单的dom结构，如下：

<div class="house">
<div class="wall"></div>
<div class="door">
    <div class="blessing blessing1"><span>福</span></div>
    <div class="blessing blessing2"><span>福</span></div>
    <div class="blessing blessing3"><span>福</span></div>
    <div class="hc">瑞气盈门</div>
    <div class="c lc">龙腾虎跃人间乐</div>
    <div class="c rc">鸟语花香天下春</div>
</div

CSS

场景使用CSS画的，没有炫酷的动画，只有一颗思念家的♥，来看看上面dom结构的新衣服把。

先给个基础的样式

html {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: radial-gradient(transparent, #f5aaaa);
    --pw: 4rem;
}

至于为什么要定义--pw变量，那是因为此处场景用在另一篇文章的场景中：🐅虎年到，春节到，😵萌虎就要回家了 - 掘金 (juejin.cn)

家

先给家固定一个轮廓，代码如下：

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

墙

为了衬托家的大门，水泥墙怎么能少的了呢？

.wall {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70%;
    background-color: currentColor;
}

大门

这个大门🚪很普通，所以增加一个家字，增加家的味道。

.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: '家';
    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;
    }
}

春联

家的大门上，基本上贴的春联有：三福或两福一春、横批、左右对联，福有两种贴法，正福：代表正在福气中，倒福：代表福到了。

/* 福 */
.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);
}
/* 横联 */
.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);
}
/* 对联 */
.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);
}

总结

XDM，此刻回家的心情是否特别强烈，在家的时候，是否又会自己去贴家里的春联呢？

画一个家里🏘大门的场景，提前贴个春联

过年时，大门的样子

HTML

CSS

总结