当前位置: 首页 > Web前端 > CSS

前端日常实践:102#视频演示如何用纯CSS制作小和尚

时间:2023-03-30 15:11:02 CSS

效果预览按右边“点击预览”按钮在当前页面预览,点击链接全屏预览。https://codepen.io/comehop??e/pen/oMmYXp互动视频本视频为互动视频,您可以随时暂停视频,编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cydezCM源码下载日常前端实战系列完整源码请到github下载:https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom,容器中包含的几个元素代表头、眼、嘴、身体和腿:

居中显示:body{margin:0;高度:100vh;显示:弹性;对齐项目:居中;证明内容:居中;background:linear-gradient(white,bisque);}定义容器大小,设置子元素水平居中对齐:.buddha{width:13em;高度:19em;字体大小:20px;边框:1px黑色虚线;显示:弹性;对齐项目:居中;弹性方向:列;position:relative;}绘制头部轮廓:.head{width:12.5em;高度:12.5em;颜色:桃红色;背景:当前颜色;边界半径:50%;过滤器:亮度(0.9);}用伪元素画眼睛:.eyes::before,.eyes::after{content:'';位置:绝对;宽度:1em;高度:0.5em;边框:0.6em实心#333;边界半径:1em1em00;底部边框:无;top:6em;}.eyes::before{left:2.5em;}.eyes::after{right:2.5em;}画嘴:.mouth{position:absolute;宽度:1.5em;高度:0.5em;边框:0.5em实心番茄;边界半径:001.5em1.5em;边框顶部:无;top:9em;}画主体:.body{position:absolute;宽度:10em;高度:8em;背景色:珊瑚色;边界半径:4em;底部:1em;z-index:-1;}画腿:.legs{position:absolute;宽度:继承;高度:5em;背景色:珊瑚色;边界半径:2.5em;底部:0;z-index:-1;}用阴影画耳朵和手:.head{box-shadow:5.8em2em0-4.8em,/*earrightright*/-5.8em2em0-4.8em,/*earleft*/08.6em0-4.5em;/*hand*/}用径向渐变绘制眉毛中心:.head{background:radial-gradient(circleat50%40%,tomato0.6em,transparent0.6em),/*circlebetweeneyebrows*/currentColor;}绘制身体阴影:.shadow{position:absolute;宽度:继承;高度:5em;背景色:rgba(0,0,0,0.2);边界半径:50%;底部:-4em;transform:rotateX(100deg);}让小和尚上下浮动:.buddha{animation:animate3sease-in-outinfinite;}@keyframesanimate{50%{transform:translateY(-2em);}}保持阴影在固定位置,不随人浮动:.shadow{animation:shadow-animate3sease-in-outinfinite;}@keyframesshadow-animate{50%{transform:rotateX(100deg)translateY(-10em)scale(0.7);}}你完成了!