前端每日实战：73# 视频演示如何用纯 CSS 创作一只卡通狐狸

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，容器中包含个元素，即头和尾巴，再包含个元素，表示脸颊眼睛耳朵和鼻子。

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

https://codepen.io/comehope/pen/OEKZed

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

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

https://scrimba.com/p/pEgDAM/cvEm3uq

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

https://github.com/comehope/front-end-daily-challenges

定义 dom，容器中包含 2 个元素，即头和尾巴， 再包含 4 个元素，表示脸颊、眼睛、耳朵和鼻子。

</>复制代码 
    
        
        
        
        
    
    

居中显示：

</>复制代码 
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    --bc: teal;
    background-color: var(--bc);
}

定义容器尺寸：

</>复制代码 
.fox {
    width: 7em;
    height: 9em;
    font-size: 30px;
}

画出圆形的头部轮廓：

</>复制代码 
.fox {
    --c: chocolate;
    position: relative;
    color: var(--c);
}
.fox .head {
    position: absolute;
    width: 6em;
    height: 6em;
    background-color: currentColor;
    border-radius: 50%;
    right: 0;
}

画出叶片形的脸颊：

</>复制代码 
.fox .faces::before,
.fox .faces::after {
    content: "";
    position: absolute;
    width: 3em;
    height: 3em;
    background-color: white;
    border-radius: 0 100% 0 100%;
    top: 3em;
}
.fox .faces::after {
    right: 0;
    transform: rotate(-90deg);
}

画出半圆形的眼睛：

</>复制代码 
.fox .eyes::before,
.fox .eyes::after {
    content: "";
    position: absolute;
    border: 0.3em solid;
    border-color: black black transparent transparent;
    border-radius: 50%;
    top: 4.5em;
}
.fox .eyes::before {
    left: 1em;
}
.fox .eyes::after {
    right: 1em;
    transform: rotate(-90deg);
}

画出扇形的耳朵：

</>复制代码 
.fox .ears::before,
.fox .ears::after {
    width: 3em;
    height: 3em;
    background-color: currentColor;
    filter: brightness(1.25);
    border-radius: 0 100% 0 0;
    z-index: -1;
}
.fox .ears::after {
    right: 0;
    transform: rotate(-90deg);
}

画出圆形的鼻子：

</>复制代码 
.fox .nose{
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: black;
    border-radius: 50%;
    top: calc(6em - 1em / 2);
    right: calc((6em - 1em) / 2);
    transform: scale(0.9);
}

画出圆形的尾巴：

</>复制代码 
.fox .tail{
    width: 7em;
    height: 7em;
    background-color: currentColor;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    bottom: 0;
}

去掉尾巴左上角的扇形：

</>复制代码 
.fox .tail::before {
    content: "";
    position: absolute;
    width: calc(7em / 2);
    height: calc(7em / 2);
    background-color: var(--bc);
    border-radius: 100% 0 0 0;
}

画出扇形的尾巴尖：

</>复制代码 
.fox .tail{
    overflow: hidden;
}
.fox .tail::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 0 0 100% 0;
    background: white;
    bottom: calc(7em / 2 - 1em);
}

最后，增加鼠标悬停效果：

</>复制代码 
.fox {
    transition: 1s;
}
.fox:hover {
    --c: lightblue;
}

大功告成！