前端日常实践：35#视频演示如何将CSS径向渐变发挥到极致，只用一个DOM元素就可以画出国宝大熊猫
时间：2023-03-30 19:12:34
CSS
效果预览点击右侧“点击预览”按钮即可预览当前页面，单击链接可全屏预览。https://codepen.io/comehop??e/pen/odKrpy交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cV7J6SK源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有一个元素：
centerdisplay:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:mediumturquoise;}定义容器尺寸：.panda{width:21em;高度：16em；background-color:white;}绘制头部轮廓：.panda{border:0.5emsolid#333;边框左上角半径：11em；border-top-right-radius:11em;border-bottom-left-radius:11em6em;border-bottom-right-radius:11em6em;}画出右眼的轮廓：.panda{position:relative;}.panda::before{content:'';位置：绝对；宽度：7em；高度：4em；左：2.9em；顶部：5.5em；背景色：#333；42%；transform:rotate(-45deg);}同样，绘制左眼的轮廓：.panda::after{content:'';位置：绝对；宽度：7em；高度：4em；左：11.1em;顶部：5.5em；背景色：#333；边界半径：50%50%42%45%；transform:rotate(45deg);}画两只耳朵：.panda::before{box-shadow:1em-7.2em0-0.4em#333;}.panda::after{box-shadow:-1em-7.2em0-0.4em#333;}画两只眼睛：.panda::before{background-image:radial-gradient(circleat5.1em2em,white0.3em,transparent0.3em),radial-gradient(circleat4.6em2em,#3330.7em,transparent0.7em),radial-gradient(circleat4.5em2em,white1em,transparent1em);}.panda::after{background-image:radial-gradient(circleat2.4em1.5em,白色0.3em,transparent0.3em),radial-gradient(circleat2.4em2em,#3330.7em,transparent0.7em),radial-gradient(circleat2.5em2em,white1em,transparent1em);}画鼻子和嘴巴:.panda{背景图像：径向渐变（椭圆50%60%，#3331.2em，透明1.2em），径向渐变（椭圆50%80%，#5550.6em，透明0.6em）；}添加一点立体效果：.panda{border-bottom-width:1em;box-shadow:inset1em-1em0#eee;}让右眼移动：.panda::before{animation:before-animate1sease-in-outinfinitealternate;}@keyframesbefore-animate{to{background-图像：径向渐变（圆形4.9em1.8em，白色0.3em，透明0.3em），径向渐变（圆形4.4em1.8em，#3330.7em，透明0.7em），径向渐变（圆形4.5em2em,白色1em,透明1em);}}同样，让左眼移动：.panda::after{animation:after-animate1sease-in-outinfinitealternate-1s;}@keyframesafter-animate{to{background-image:radial-gradient(circleat2.6em1.3em,white0.3em,transparent0.3em),radial-gradient(circleat2.6em1.8em,#3330.7em,transparent0.7em),radial-gradient(circleat2.5em2em,white1em,transparent)1em);}}最后让黑眼圈和耳朵动起来：@keyframesbefore-animate{to{transform:r旋转（-40度）；}}@keyframesafter-animate{to{transform:rotate(40deg);}}你完成了！
