如何用纯 CSS 创作一只单眼怪兽

待我称王封你为后i 2022-04-06 05:18 254阅读 0赞

![在这里插入图片描述][20181208131311692.gif]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/pZXzaY][https_codepen.io_comehope_pen_pZXzaY]

## 可交互视频 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/c3qbkh8][https_scrimba.com_p_pEgDAM_c3qbkh8]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义 dom，容器中包含的子元素分别表示耳朵、眼睛和嘴，嘴里还有牙齿：

居中显示：

body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(lightcyan, lightblue);
    }

画出怪兽的轮廓：

.monster {
        width: 10em;
        height: 13em;
        font-size: 16px;
        color: blueviolet;
        background-color: currentColor;
        border-radius: 5em 5em 0 0 / 6em 6em 0 0;
    }

画出眼睛的轮廓：

.monster {
        position: relative;
    }
    
    .eye {
        position: absolute;
        width: 6.5em;
        height: 6.5em;
        background: white;
        border-radius: 77% 77% 77% 77% / 92% 92% 60% 60%;
        top: 2em;
        left: calc((10em - 6.5em) / 2);
        box-shadow: 0.2em 0.9em 0 rgba(0, 0, 0, 0.1);
    }

用径向渐变画出眼珠和瞳孔：

.eye {
        background: 
            radial-gradient(
                circle at 50% 25%,
                white 0.4em,
                transparent 0.4em
            ),
            radial-gradient(
                circle at 50% 40%,
                black 1.7em,
                transparent 1.7em
            ),
            white;
    }

画出嘴的轮廓：

.mouth {
        position: absolute;
        width: 3em;
        height: 2.1em;
        background-color: black;
        border-radius: 70% 70% 3.5em 3.5em;
        bottom: 0.9em;
        left: calc((10em - 3em) / 2);
    }

用伪元素画出舌头：

.mouth {
        overflow: hidden;
    }
    
    .mouth::before {
        content: '';
        position: absolute;
        width: inherit;
        height: 0.6em;
        background-color: tomato;
        border-radius: 50% 50% 0 0;
        bottom: 0;
    }

画出三颗牙齿的中间那颗：

.tooth {
        position: absolute;
        border-top: 0.8em solid white;
        border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;
        left: 1.1em;
    }

用伪元素画出三颗牙齿的左右两颗：

.tooth::before,
    .tooth::after {
        position: absolute;
        border-top: 0.8em solid white;
        border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;
        left: 1.1em;
    }
    
    .tooth::before {
        content: '';
        left: -1.1em;
        top: -0.8em;
    }
    
    .tooth::after {
        content: '';
        left: 0.3em;
        top: -0.8em;
    }

画出耳朵的形状：

.ear {
        position: absolute;
        width: 2.4em;
        height: 4.5em;
        top: -3em;
    }
    
    .ear::before {
        content: '';
        position: absolute;
        width: 0.9em;
        height: inherit;
        background-color: currentColor;
        left: calc((2.4em - 0.9em) / 2);
    }
    
    .ear::after {
        content: '';
        position: absolute;
        width: 2.4em;
        height: 2.4em;
        top: -0.5em;
        background-color: currentColor;
        border-radius: 50%;
        box-shadow: inset -0.3em -0.2em 0 rgba(0, 0, 0, 0.1);
    }

分别定位左耳和右耳：

.ear {
        transform-origin: bottom center;
        transform: rotate(calc(10deg * var(--direction)));
    }
    
    .ear.left {
        left: 2em;
        --direction: -1;
    }
    
    .ear.right {
        right: 2em;
        --direction: 1;
    }

接下来增加动画效果：  
增加身体轻微弹动的效果：

.monster {
        transform-origin: bottom center;
        animation: body-bounce 1s infinite;
    }
    
    @keyframes body-bounce {
        50% {
            transform: scaleX(1.03) scaleY(0.97);
        }
    }

增加耳朵轻微颤动的效果：

.ear {
        animation: ears-shake 5s infinite;
    }
    
    @keyframes ears-shake {
        50% {
            transform: rotate(calc(20deg * var(--direction)));
        }
    }

增加眨眼效果：

.eye {
        animation: eye-blink 5s infinite;
    }
    
    @keyframes eye-blink {
        0%, 6% {
            transform: scaleX(1) scaleY(1);
        }
    
        3% {
            transform: scaleX(1.03) scaleY(0.1);
        }
    }

大功告成！

原文地址：https://segmentfault.com/a/1190000016032348

[20181208131311692.gif]: /images/20220406/11f65714aaf3460fb1e25f0b01f27c94.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F107-monocular-monster&demotitle=%E5%A6%82%E4%BD%95%E7%94%A8%E7%BA%AF%20CSS%20%E5%88%9B%E4%BD%9C%E4%B8%80%E5%8F%AA%E5%8D%95%E7%9C%BC%E6%80%AA%E5%85%BD
[https_codepen.io_comehope_pen_pZXzaY]: https://codepen.io/comehope/pen/pZXzaY
[https_scrimba.com_p_pEgDAM_c3qbkh8]: https://scrimba.com/p/pEgDAM/c3qbkh8
[Link 2]: http://www.jqhtml.com/20917.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges