如何使用HTML+CSS实现抖音热梗“尊嘟假嘟”

前言

思路：表情可以通过两个部分组成，分别是问号和脸部，使用阴影box-shadow属性可以通过逗号“，”同时设置多个阴影块的原理，将表情的问号部分和脸部部分分割成由多个像素块组成，通过位置的调整，实现一些有趣的效果

提前剧透：文章使用了CSS组件库，不想阅读可直接跳至文章底部，通过组件库地址自行使用该组件库

（第一步）、创建两个容器

这里使用的是div容器，原因：方便设置属性，在后续对其内部添加阴影box-shadow时不会影响到容器本身的位置。（其实是我不知道如何通过box-shadow去影响div本身的位置）

<div class="pixelart-to-css">

</div>
<div class="pixelart-to-css_copy">

</div>

当然，此时的容器内部是什么都没有的，即使运行代码也无法达到封面的效果。

（第二步）、将阴影填充至两个div容器中

通过CSS样式，对div容器的box-shadow属性进行设置，这里设置的是每个像素块占10px的宽，10px的高，多个像素块组合。

2.1 首先我们进行表情中问号的制作：

        .pixelart-to-css_copy {
            box-shadow: 70px 60px 0 0 rgba(255, 205, 210, 1), 80px 60px 0 0 rgba(255, 205, 210, 1), 90px 60px 0 0 rgba(255, 205, 210, 1), 60px 70px 0 0 rgba(255, 205, 210, 1), 100px 70px 0 0 rgba(255, 205, 210, 1), 100px 80px 0 0 rgba(255, 205, 210, 1), 100px 90px 0 0 rgba(255, 205, 210, 1), 80px 100px 0 0 rgba(255, 205, 210, 1), 90px 100px 0 0 rgba(255, 205, 210, 1), 80px 110px 0 0 rgba(255, 205, 210, 1), 80px 130px 0 0 rgba(255, 205, 210, 1);
            height: 10px;
            width: 10px;
            margin: auto;
            margin-left: 50.0px;
        }

建议是各位如果需要使用的话，直接复制粘贴即可。

2.2 接着我们来进行表情中脸部的制作：

        .pixelart-to-css {
            box-shadow: 90px 70px 0 0 rgba(96, 125, 139, 1), 100px 70px 0 0 rgba(96, 125, 139, 1), 70px 80px 0 0 rgba(96, 125, 139, 1), 80px 80px 0 0 rgba(96, 125, 139, 1), 90px 80px 0 0 rgba(96, 125, 139, 1), 100px 80px 0 0 rgba(96, 125, 139, 1), 110px 80px 0 0 rgba(96, 125, 139, 1), 120px 80px 0 0 rgba(96, 125, 139, 1), 60px 90px 0 0 rgba(96, 125, 139, 1), 70px 90px 0 0 rgba(96, 125, 139, 1), 80px 90px 0 0 rgba(96, 125, 139, 1), 90px 90px 0 0 rgba(96, 125, 139, 1), 100px 90px 0 0 rgba(96, 125, 139, 1), 110px 90px 0 0 rgba(96, 125, 139, 1), 120px 90px 0 0 rgba(96, 125, 139, 1), 130px 90px 0 0 rgba(96, 125, 139, 1), 50px 100px 0 0 rgba(96, 125, 139, 1), 60px 100px 0 0 rgba(96, 125, 139, 1), 70px 100px 0 0 rgba(96, 125, 139, 1), 80px 100px 0 0 rgba(96, 125, 139, 1), 90px 100px 0 0 rgba(96, 125, 139, 1), 100px 100px 0 0 rgba(96, 125, 139, 1), 110px 100px 0 0 rgba(96, 125, 139, 1), 120px 100px 0 0 rgba(96, 125, 139, 1), 130px 100px 0 0 rgba(96, 125, 139, 1), 140px 100px 0 0 rgba(96, 125, 139, 1), 50px 110px 0 0 rgba(96, 125, 139, 1), 60px 110px 0 0 rgba(255, 205, 210, 1), 70px 110px 0 0 rgba(255, 205, 210, 1), 80px 110px 0 0 rgba(96, 125, 139, 1), 90px 110px 0 0 rgba(96, 125, 139, 1), 100px 110px 0 0 rgba(96, 125, 139, 1), 110px 110px 0 0 rgba(96, 125, 139, 1), 120px 110px 0 0 rgba(255, 205, 210, 1), 130px 110px 0 0 rgba(96, 125, 139, 1), 140px 110px 0 0 rgba(96, 125, 139, 1), 40px 120px 0 0 rgba(96, 125, 139, 1), 50px 120px 0 0 rgba(96, 125, 139, 1), 60px 120px 0 0 rgba(255, 205, 210, 1), 70px 120px 0 0 rgba(255, 205, 210, 1), 80px 120px 0 0 rgba(96, 125, 139, 1), 90px 120px 0 0 rgba(96, 125, 139, 1), 100px 120px 0 0 rgba(96, 125, 139, 1), 110px 120px 0 0 rgba(96, 125, 139, 1), 120px 120px 0 0 rgba(96, 125, 139, 1), 130px 120px 0 0 rgba(96, 125, 139, 1), 140px 120px 0 0 rgba(96, 125, 139, 1), 150px 120px 0 0 rgba(96, 125, 139, 1), 50px 130px 0 0 rgba(96, 125, 139, 1), 60px 130px 0 0 rgba(96, 125, 139, 1), 70px 130px 0 0 rgba(96, 125, 139, 1), 80px 130px 0 0 rgba(96, 125, 139, 1), 90px 130px 0 0 rgba(96, 125, 139, 1), 100px 130px 0 0 rgba(96, 125, 139, 1), 110px 130px 0 0 rgba(96, 125, 139, 1), 120px 130px 0 0 rgba(96, 125, 139, 1), 130px 130px 0 0 rgba(96, 125, 139, 1), 140px 130px 0 0 rgba(96, 125, 139, 1), 60px 140px 0 0 rgba(158, 158, 158, 1), 70px 140px 0 0 rgba(158, 158, 158, 1), 80px 140px 0 0 rgba(255, 255, 255, 1), 90px 140px 0 0 rgba(255, 255, 255, 1), 100px 140px 0 0 rgba(255, 255, 255, 1), 110px 140px 0 0 rgba(255, 255, 255, 1), 120px 140px 0 0 rgba(158, 158, 158, 1), 130px 140px 0 0 rgba(158, 158, 158, 1), 70px 150px 0 0 rgba(158, 158, 158, 1), 80px 150px 0 0 rgba(158, 158, 158, 1), 90px 150px 0 0 rgba(158, 158, 158, 1), 100px 150px 0 0 rgba(158, 158, 158, 1), 110px 150px 0 0 rgba(158, 158, 158, 1), 120px 150px 0 0 rgba(158, 158, 158, 1), 80px 160px 0 0 rgba(158, 158, 158, 1), 90px 160px 0 0 rgba(158, 158, 158, 1), 100px 160px 0 0 rgba(158, 158, 158, 1), 110px 160px 0 0 rgba(158, 158, 158, 1);
            height: 10px;
            width: 10px;
            margin: auto;
            margin-left: 250px;
        }

（不要看代码很长，其实是使用组件库生成的）

（第三步）、对两个容器的位置进行微调

这里使用的方法是在两个div外再次各嵌套一个div，使其能够达到随意调整位置的效果（如果不设置div将两个容器包裹，在调整位置时会比较奇怪）：

        .face {
            width: 48%;
            height: 200px;
            float: left;
        }

        .why {
            width: 48%;
            height: 200px;
            float: left;
        }

    <div class="face">
        <div class="pixelart-to-css">
        </div>
    </div>
    <div class="why">
        <div class="pixelart-to-css_copy">
        </div>
    </div>

（第四步）、查看效果

如图（彩蛋：使用新版本谷歌浏览器打开，可以将div的高设置为250，放大至250%时，出现如下原图）：

 （尾语）、全文使用CSS组件库编写

直接步入主题，网址如下：

Pixel Art to CSS

更多功能可自行尝试。