原文地址：https://segmentfault.com/a/1190000015052653
感想: 真神奇！
HTML code：
<div class="panda"></div>
CSS code：
html, body {
margin:;
padding:;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: mediumturquoise;
}
/* 定义容器尺寸 */
.panda{
position: relative;
width: 21em;
height: 16em;
background-color: white;
/* 画出头部轮廓 */
border: 0.5em solid #333;
border-top-left-radius: 11em;
border-top-right-radius: 11em;
border-bottom-left-radius: 11em 6em;
border-bottom-right-radius: 11em 6em;
background-image:
radial-gradient(ellipse at 50% 60%, #333 1.2em, transparent 1.2em),
radial-gradient(ellipse at 50% 80%, #555 0.6em, transparent 0.6em);
/* 增加一点立体效果 */
border-bottom-width: 1em;
box-shadow: inset 1em -1em 0 #eee;
}
/* 画出左眼轮廓 */
.panda::before{
position: absolute;
top: 5.5em;
left: 2.9em;
content: '';
width: 7em;
height: 4em;
border-radius: 50% 50% 45% 42%;
background-color: #333;
/* CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。 */
transform: rotate(-45deg);
/* 画出左耳朵 */
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 1em -7.2em 0 -0.4em #333;
/* 画出左眼睛 */
background-image:
radial-gradient(circle at 4.7em 1.6em,white 0.3em, transparent 0.3em),
radial-gradient(circle at 4.6em 2em, #333 0.7em, transparent 0.7em),
radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
animation: before-animate 1s ease-in-out infinite alternate;
}
@keyframes before-animate {
to {
transform: rotate(-40deg);
background-image:
radial-gradient(circle at 4.9em 1.8em, white 0.3em, transparent 0.3em),
radial-gradient(circle at 4.4em 1.8em, #333 0.7em, transparent 0.7em),
radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
}
}
.panda::after{
position: absolute;
top: 5.5em;
left: 11.1em;
content: '';
width: 7em;
height: 4em;
border-radius: 50% 50% 42% 45%;
background-color: #333;
transform: rotate(45deg);
box-shadow: -1em -7.2em 0 -0.4em #333;
background-image:
radial-gradient(circle at 2em 1.9em, white 0.3em, transparent 0.3em),
radial-gradient(circle at 2.4em 2em, #333 0.7em, transparent 0.7em),
radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em);
animation: after-animate 1s ease-in-out infinite alternate;
}
@keyframes after-animate{
to {
transform: rotate(40deg);
background-image:
radial-gradient(circle at 2.6em 1.3em, white 0.3em, transparent 0.3em),
radial-gradient(circle at 2.6em 1.8em, #333 0.7em, transparent 0.7em),
radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em);
}
}