按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。
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 个元素，即头和尾巴，<head> 再包含 4 个元素，表示脸颊、眼睛、耳朵和鼻子。
<div class="fox"> <div class="head"> <span class="faces"></span> <span class="eyes"></span> <span class="ears"></span> <span class="nose"></span> </div> <div class="tail"></div></div>居中显示：
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;}大功告成！
