前端日常实践：151#视频演示如何使用纯CSS制作超级陆战队的大白
时间：2023-04-05 22:24:44
HTML5
效果预览。按右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/ReGRaO互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cEJDKSg源码下载日常前端实战系列的全部源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读图中分为头部、身体、腿部3个部分，依次画出，先画出头部。定义dom，container.baymax表示大白，head表示头部：
中心显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:rgba(176,0,0,0.75);}定义容器大小和子元素Alignment:.baymax{width:30em;高度：41em；字体大小：10px；显示：弹性；证明内容：居中；position:relative;}绘制头部轮廓:.head{position:absolute;宽度：9em；高度：6em；背景色：白色；边界半径：50%；box-shadow:inset0-1.5em3emrgba(0,0,0,0.2),00.5em1.5emrgba(0,0,0,0.2);}在眼睛之间画线：.head.eyes{位置：绝对；宽度：4.8em；高度：0.1em；背景色：#222；顶部：2.3em；左：calc((9em-4.8em)/2);}画眼睛：.head.eyes::before,.head.eyes::after{content:'';位置：绝对；宽度：0.8em；高度：0。9em;背景色：#222；边界半径：50%；top:-0.3em;}.head.eyes::after{right:0;}接下来画身体在html文件中添加body的dom元素：
