35.在CSS中 只用一个 DOM 元素就能画出国宝熊猫

<div class="panda"></div>

html, body { ???margin: 0; ???padding: 0; ???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); ???}}