73.纯 CSS 创作一只卡通狐狸

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

学习效果地址：https://scrimba.com/c/cz6EzdSd

感想：过渡效果，圆角，定位。

HTML code：

<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>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
body{
    /* 设置body的子元素水平垂直居中 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 定义一个背景变量 */
    --bc: teal;
    background-color: var(--bc);
}
/* 设置fox容器样式 */
.fox{
    position: relative;
    font-size: 30px;
    width: 7em;
    height: 9em;
    border: 1px solid white;
    /* 定义字体颜色变量 */
    --c: chocolate;
    color: var(--c);
    /* 过渡时间 */
    transition: 1s;
}
.fox:hover{
    --c: lightblue;
}
.fox .head{
    position: absolute;
    right: 0;
    width: 6em;
    height: 6em;
    border-radius: 50%;
    background-color: currentColor;
}
/* 画出脸颊 */
.fox .faces::before,
.fox .faces::after{
    position: absolute;
    top: 3em;
    content:'';
    width: 3em;
    height: 3em;
    border-radius: 0 100% 0 100%;
    background-color: white;
}
.fox .faces::after {
    right: 0;
    transform: rotate(-90deg);
}
/* 画出眼睛 */
.fox .eyes::before,
.fox .eyes::after{
    position: absolute;
    top: 4.5em;
    content: '';
    border: 0.3em solid;
    border-color: black black transparent transparent;
    border-radius: 50%;
}
.fox .eyes::before {
    left: 1em;
}
.fox .eyes::after {
    right: 1em;
    transform: rotate(-90deg);
}
/* 画出耳朵 */
.fox .ears::before,
.fox .ears::after {
    position: absolute;
    content:'';
    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;
    top: calc(6em - 1em / 2);
    right: calc((6em - 1em) / 2);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: black;
    transform: scale(0.9);
}
/* 画出尾巴 */
.fox .tail{
    position: absolute;
    bottom: 0;
    width: 7em;
    height: 7em;
    border-radius: 50%;
    background-color: currentColor;
    z-index: -1;
    overflow: hidden;
}
/* 去掉尾巴左上角的扇形 */
.fox .tail::before{
    position: absolute;
    content:'';
    width: calc(7em / 2);
    height: calc(7em / 2);
    border-radius: 100% 0 0 0;
    background-color: var(--bc);
}
/* 尾巴尖 */
.fox .tail::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 0 0 100% 0;
    background: white;
    bottom: calc(7em / 2 - 1em);
}