纯CSS实现 | 空调，为什么看起来我就感觉凉凉的？

孤独1201
7,064 阅读3分钟

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

现在的夏天特别热，开个电风扇吹的都是热风，热到受不了，真想一天呆在空调房里，但是又不能一直呆着，吃饭，上学路上，还要透气，电费等原因，是不可能一直呆在空调房里，所以这次使用CSS制作一个空调，安慰我火辣的心情。

苦热中夜起，登楼独褰衣。

山泽凝暑气，星汉湛光辉。

火晶燥露滋，野静停风威。

探汤汲阴井，炀灶开重扉。

image.png

在线演示

Github: 在线演示

制作

大体

主div，设置宽高，添加变宽，设置圆角，设置位置。

<div class="main">

</div>

.main {
    width: 504px;
    height: 150px;
    border: 1px solid rgb(224, 224, 224);
    border-radius: 20px;
    position: relative;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
}

image.png 再给下面加根线：出风口。Tips:后面的所有div都在main内。

设置宽高，高度不要太高，像一个线就好了。使用绝对定位设置到下方。

<div class="xian"></div>

.xian {
    width: 100%;
    height: 2px;
    border: 1px solid rgb(224, 224, 224);
    position: absolute;
    bottom: 18px;
    transform: translateX(-1px);
}

image.png

铭牌

现在就需要使用CSS制作最复杂的地方了。

其实这东西使用canvas制作起来非常简单，也很美观。

这里把他分成一块一块的，一个大div为一行，就这样一行一样的使用CSS制作出来的。

使用了伸缩布局，自动均匀的分开。 image.png

<div class="mp">
    <div class="mp-top">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="mp-body">
        <div>
            <div class="mp-body-1-a"></div>
            <div class="mp-body-1-b"></div>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="mp-body-b">
        <div class="mp-body-b-top">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="mp-body-b-xian"></div>
        <div class="mp-body-b-bottom-a">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="mp-body-b-bottom-b">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="mp-bottom">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

.mp {
    width: 50px;
    height: 70px;
    background-color: #4ea5f5;
    border-radius: 8px;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px;
}

.mp-top {
    width: 100%;
    height: 4px;
    display: flex;
    justify-content: space-between;
}

.mp-top>div {
    width: 3px;
    height: 4px;
    background-color: white;
    border-radius: 50%;
}

.mp-body {
    width: 100%;
    height: 28px;
    background-color: white;
    margin: 4px 0;
    padding: 2px 8px;
    z-index: -1;
}

.mp-body>div:first-child {
    width: 100%;
    height: 3px;
    display: flex;
    justify-content: space-between;
}

.mp-body>div:first-child>div:first-child {
    width: 40%;
    height: 100%;
    background-color: green;
}

.mp-body>div:first-child>div:last-child {
    width: 10%;
    height: 100%;
    background-color: green;
}

.mp-body>div:first-child>div:last-child::before {
    display: block;
    content: '';
    margin-left: -2.2px;
    width: 0;
    height: 0;
    border-width: 1.5px 2px 1.5px 0px;
    border-style: solid;
    border-color: transparent green transparent transparent;
}

.mp-body>div:nth-of-type(2) {
    width: 50%;
    height: 3px;
    background-color: lightgreen;
    margin-top: 2px;
}

.mp-body>div:nth-of-type(3) {
    width: 60%;
    height: 3px;
    background-color: rgb(255, 193, 7);
    margin-top: 2px;
}

.mp-body>div:nth-of-type(4) {
    width: 70%;
    height: 3px;
    background-color: orange;
    margin-top: 2px;
}

.mp-body>div:nth-of-type(5) {
    width: 80%;
    height: 3px;
    background-color: red;
    margin-top: 2px;
}

.mp-body-b {
    width: 42px;
    height: 20px;
    background-color: white;
    margin-bottom: 2px;
    padding-top: 0.8px;
}

.mp-body-b-top {
    width: 100%;
    height: 6px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.mp-body-b-top>div {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
}

.mp-body-b-xian {
    margin-top: 0.8px;
    margin-bottom: 0.8px;
    border-top: 1px solid;
    height: 0%;
    width: 100%;
}

.mp-body-b-bottom-a {
    display: flex;
    height: 5.5px;
    width: 42px;
    justify-content: space-evenly;
    align-items: center;
}

.mp-body-b-bottom-a > div {
    width: 1.5px;
    height: 1.5px;
    background-color: black;
    border-radius: 50%;
}

.mp-body-b-bottom-b {
    width: 42px;
    height: 1.2px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.mp-body-b-bottom-b > div {
    width: 1.2px;
    height: 1.2px;
    background-color: black;
}

.mp-bottom {
    width: 42px;
    height: 2px;   
    display: flex;
    justify-content: space-around;
}

.mp-bottom > div {
    width: 2px;
    height: 2px;
    background-color: white;
    border-radius: 50%;
}

到这里是不是差不多像个空调了！

image.png 中间是不是感觉空空的，给它加上LOGO。

画龙点睛，哈哈哈哈哈哈哈。

LOGO

logo是svg图片，设置宽高和位置，就大功告成了。

<img class="logo" src="images/logo.svg" alt="">

.logo {
    width: 12px;
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
}

image.png 现在是不是个空调该有的样子

最后

入秋感觉也很热啊，脾气也会更躁，疫情又那么严重，四川还发生地震，巴基斯坦大洪水。人类一直破坏环境，老天都看不下去了，祝四川人民早日度过困难，人类早日回到正轨，加油，我们一定可以战胜疫情、天灾！

avatar
文章
阅读
粉丝