效果预览

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

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

可交互视频

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

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

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

源代码下载

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

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

代码解读

定义 dom，容器中包含的几个元素分别代表头部、眼睛、嘴、身体和腿：

<div class="buddha"><div class="head"></div><div class="eyes"></div><span class="mouth"></span><span class="body"></span><span class="legs"></span><span class="shadow"></span>
</div>

居中显示：

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

定义容器尺寸、设置子元素水平居中对齐：

.buddha {width: 13em;height: 19em;font-size: 20px;border: 1px dashed black;display: flex;align-items: center;flex-direction: column;position: relative;
}

画出头部轮廓：

.head {width: 12.5em;height: 12.5em;color: peachpuff;background: currentColor;border-radius: 50%;filter: brightness(0.9);
}

用伪元素画出眼睛：

.eyes::before,
.eyes::after {content: '';position: absolute;width: 1em;height: 0.5em;border: 0.6em solid #333;border-radius: 1em 1em 0 0;border-bottom: none;top: 6em;
}.eyes::before {left: 2.5em;
}.eyes::after {right: 2.5em;
}

画出嘴巴：

.mouth {position: absolute;width: 1.5em;height: 0.5em;border: 0.5em solid tomato;border-radius: 0 0 1.5em 1.5em;border-top: none;top: 9em;
}

画出身体：

.body {position: absolute;width: 10em;height: 8em;background-color: coral;border-radius: 4em;bottom: 1em;z-index: -1;
}

画出腿：

.legs {position: absolute;width: inherit;height: 5em;background-color: coral;border-radius: 2.5em;bottom: 0;z-index: -1;
}

用阴影画出耳朵和手：

.head {box-shadow: 5.8em 2em 0 -4.8em, /* ear right*/-5.8em 2em 0 -4.8em, /* ear left*/0 8.6em 0 -4.5em; /* hand */
}

用径向渐变画出眉心：

.head {background: radial-gradient(circle at 50% 40%,tomato 0.6em,transparent 0.6em), /* circle between eyebrows */currentColor;
}

画出身体的阴影：

.shadow {position: absolute;width: inherit;height: 5em;background-color: rgba(0, 0, 0, 0.2);border-radius: 50%;bottom: -4em;transform: rotateX(100deg);
}

让小和尚上下浮动：

.buddha {animation: animate 3s ease-in-out infinite;
}@keyframes animate {50% {transform: translateY(-2em);}
}

让阴影保持在固定位置，不随着人浮动：

.shadow {animation: shadow-animate 3s ease-in-out infinite;
}@keyframes shadow-animate {50% {transform: rotateX(100deg) translateY(-10em) scale(0.7);}
}

大功告成！