CSS 绘制「漫画」场景
点击上方蓝色字体，关注我们
CSS 这块内容，一直是想着放下，然后又拿起来，反复了好几次，然后发现现在的 CSS 变化太大了，想要全部涉猎挺难的。一个属性在某个阶段可能使用比较多，也就记住了，但不久之后可能也就忘了，或者仅有一个印象而已。
想要在 CSS 方面有所成就，其实也挺难的。说多了感觉好像是在吐槽了，这样不好不好，还是要好好学习，天天向上。
回归正题，主要是记录一下自己临时想到的，通过 CSS 的形式“画”一个场景出来。甚至还想到了一些武侠场景中，落叶飘过，侠客一剑飞出，然后闪现几个字。😆想想还是挺俗套的，而且没啥意思。
不过既然已经想了，那么就折腾一下呗，于是就有了下图的这个效果。
其实这个效果刚开始的没那么多元素，很简单，就月亮、星星和山坡，还是黄土山坡，还有几棵小树。在回家的路上，脑中还是想着这个，因为有小姑娘说那山坡像是发了芽的土豆🥔……
于是改成了绿油油的青山，结果她说土豆🥔变西瓜🍉了。好吧，那就加上一条道，这样就不是西瓜了吧。😆
最后给月亮和星星加了闪动的效果，整体感觉还是少了点什么，于是就加了流星。其实就是 ★=- 组合后改变的。
<div class="🖼">
<div class="⛰">
<div class="🌲"></div>
<div class="🌲"></div>
<div class="🌲"></div>
<div class="🌲"></div>
<div class="🛤"></div>
</div>
<div class="🌌"></div>
<div class="🌙"></div>
<div class="⭐️"></div>
<div class="🌠"></div>
<div class="🌠 🌠1️⃣"></div>
<div class="🌠 🌠2️⃣"></div>
<div class="🌠 🌠3️⃣"></div>
<div class="🌠 🌠4️⃣"></div>
</div>
娱乐为主，使用了一些 emoji 图作为 className。这种方式，在之前《打……打……打飞机》这篇文章内容中也玩过。主要还就是因为这些 emoji 图标其实也是字符，所以，我们可以作为 className 使用，如果乐意的话，用中文也不是不可以哦。
那么接下来就是 CSS 部分。当然，这所谓的「漫画」场景完全是我脑补的，把脑中所想的绘制出来，不会有那么细致的代码，只是大概就差不多了。先把所有的 CSS 代码放出来，然后再分点介绍一下。
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
}
.🖼 {
position: relative;
width: 100%;
height: 100%;
}
.⛰ {
position: absolute;
left: -10px;
right: 0;
bottom: -130px;
width: 120vw;
height: 40vh;
border-top: 6px solid #212d00;
border-radius: 50% 50vw/20vw 25vw 5vw 3vw;
background: linear-gradient(#445d07 6%, #f0fdd4 100%);
transform: rotate(-5deg);
box-shadow: -20px 8px 20px #1f5f0b inset;
z-index: 10;
}
.🌌 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(#020000, #efa68b);
z-index: 1;
}
.🌙 {
position: absolute;
top: 12%;
left: 15%;
width: 50px;
height: 50px;
border-radius: 50%;
background: transparent;
z-index: 3;
box-shadow: -8px 8px 2px #fff;
transform: rotate(-10deg);
filter: blur(1px);
animation: blink 4s 0ms infinite ease-in-out;
}
.⭐️ {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 80vh;
background-image: radial-gradient(circle at 10vw, #fff 1px, transparent 5px),
radial-gradient(circle at 15vw 5vw, rgba(255, 255, 255, .3) 1px, transparent 15px),
radial-gradient(circle at 80vw 15vh, rgba(255, 255, 255, .3) 1px, transparent 10px),
radial-gradient(circle at 30vw 35vw, #ddd 1px, transparent 5px),
radial-gradient(circle at 60vw 25vw, rgba(255, 255, 255, .5) 1px, transparent 5px),
radial-gradient(circle at 30vw 15vw, rgba(255, 255, 255, .5) 1px, transparent 5px),
radial-gradient(circle at 90vw 45vw, rgba(255, 255, 255, .5) 1px, transparent 5px),
radial-gradient(circle at 66vw 65vw, rgba(255, 255, 255, .2) 1px, transparent 3px);
z-index: 2;
animation: blink 3s 500ms infinite ease-in;
}
.🌲 {
position: absolute;
top: 0;
left: 20%;
width: 20px;
height: 50px;
background-color: green;
border-radius: 40% / 50%;
transform: rotate(5deg);
z-index: 2;
}
.🌲:after {
content: "";
position: absolute;
bottom: -14px;
left: 7px;
width: 6px;
height: 22px;
background-color: brown;
border-radius: 30% 4px 0 0;
box-shadow: 0 1px 1px #6f300b;
}
.🌲 + .🌲 {
transform: rotate(5deg) translate(10vw, 5vh) scale(1.2);
}
.🌲 + .🌲 + .🌲 {
transform: rotate(5deg) translate(35vw, 1vh) scale(1.1);
}
.🌲 + .🌲 + .🌲 + .🌲 {
transform: rotate(5deg) translate(65vw, -5vh) scale(0.8);
}
.🛤 {
position: absolute;
top: -2.2%;
right: 45vw;
height: 100%;
width: 50px;
background: linear-gradient(#794437 0, #905f53 5px, #672e20);
border: solid #212d00;
border-width: 0 6px;
z-index: 1;
transform: rotate(5deg) skew(-15deg);
box-shadow: 0 -2px 7px #6b3325 inset, -2px -1px 7px #6b3325 inset;
}
@keyframes blink {
50% {
opacity: .5;
}
}
@keyframes shootingStar {
to {
transform: rotate(-40deg) scale(1.5) translate(-100vw);
opacity: .6;
}
}
.🌠,
.🌠1️⃣,
.🌠2️⃣,
.🌠3️⃣,
.🌠4️⃣ {
position: absolute;
top: 20vh;
right: 20vw;
color: rgba(243, 234, 200, 50%);
transform: rotate(-30deg) scale(.5);
transform-origin: left center;
opacity: 0;
z-index: 6;
animation: shootingStar 3s 1s infinite ease-in-out;
}
.🌠1️⃣ {
top: 5vh;
right: 5vw;
animation: shootingStar 2s 0s infinite ease-out;
}
.🌠2️⃣ {
top: 55vh;
right: 40vw;
animation: shootingStar 2s 1.5s infinite ease-in;
}
.🌠3️⃣ {
top: 35vh;
right: 30vw;
animation: shootingStar 1.5s 2.5s infinite linear;
}
.🌠4️⃣ {
top: 22vh;
right: 0;
animation: shootingStar 3s 0.5s infinite linear;
}
.🌠::before {
content: "★";
display: inline-block;
font-size: 2em;
filter: drop-shadow(0 0 5px #fff);
}
.🌠::after {
content: "=-";
display: inline-block;
font-size: 2em;
filter: drop-shadow(0 0 5px #fff);
}
代码看着挺多的，主要是对每个元素做了单独的描述。
没太多细想适配不同的分辨率，就考虑使用 vw、vh 来自适应，且是打算满屏展示的，所以才会有 html/body 部分的样式，以及对 .🖼 画框整体的定义。
在 .⛰ 部分，主要是考虑坡度，在 CSS 中能体现的也就是 border-radius 了，因此相对比较随意设定一个宽高，再加上 border-radius: 50% 50vw/20vw 25vw 5vw 3vw;，这样就可以得到一个不规则的圆，旋转一下角度，加上背景色。
这里有一个点需要注意的是，山坡的弧度，黑色部分，粗细不一致。这不需要做过多特殊处理，回想一下边框绘制三角形的原理，然后加上圆角，所以，我们只要有 border-top: 6px solid #212d00; 就可以得到效果了。最后来点阴影，加深一下层次。
依葫芦画瓢，把那条路也加上，同样通过内阴影加深层次，控制好位置。由于 .🛤 是在 .⛰ 内，所以，定位还算比较简单。主要需要注意 .⛰ 旋转后，这里需要转回来。
.🌲 部分就简单了，一个长方形加 border-radius 后变椭圆，然后在 ::after 中画一个树干，稍微加一点 border-radius 的变化，不会显得太生硬。
最后这个小山坡就有了。需要注意稍微错乱一下每一棵树的位置，太整齐了不好看，会呆板。
开始绘制天空部分。整体背景色选择暗一点的色调，毕竟是要晚上看星星，看月亮的。
星星部分可以通过 N 个 div 来实现，不过我偷了个懒，用多个 radial-gradient 来实现了。最后导致星星闪动的节奏是一样的，偷懒的下场……
.🌙 部分也是比较简单，一个正圆，背景色用 transparent 透明色。有了这个透明色之后，我们就可以玩 box-shadow 了。box-shadow: -8px 8px 2px #fff; 根据实际情况设置阴影，不要害怕调整位置，我们可以利用开发者工具直接可视化调整。就像这样：
再就是流星部分，整体而言这部分也没什么很特别的地方，就是设置不同的位置、颜色就好了。如果说有额外需要说明的，那就是这里用 ::before 和 ::after 分别添加了星星和流星尾巴（写到这里突然想到，我为什么不把他们放在一个伪元素里呢🤣）。
还有一个想说的，这个流星是带点发光效果的，但不能使用 box-shadow，否则会显示在容器外层。
所以，需要使用 filter 中的 drop-shadow，这样猜可以得到想要效果。
最后，就是给不同的元素加上动画效果。这个这里就不细说了。具体的 demo 在这里：https://codepen.io/linxz/pen/bGRGdZP 一个比较粗糙的效果，适配上并不理想。