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

前端日常实践:63#视频演示如何用纯CSS制作烤面包机

时间:2023-04-05 01:34:13 HTML5

效果预览。按右边的“点击预览”按钮可以在当前页面进行预览,点击链接可以全屏预览。https://codepen.io/comehop??e/pen/OEBJRN互动视频本视频为互动视频,您可以随时暂停视频,编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c6bkqT2源码下载日常前端实战系列完整源码请到github下载:https://github.com/comehop??e/front-end-daily-challenges代码解读定义dom,容器包含5个元素,分别代表body、button、outrigger、handle和bread。

居中显示:body{margin:0;高度:100vh;显示:弹性;对齐项目:居中;证明内容:居中;background:linear-gradient(torightbottom,moccasin,teal);}定义容器尺寸:.toaster{width:30em;高度:30em;背景色:雪;字体大小:10px;border-radius:50%;}画出机身:.toaster{position:relative;}.body{width:16em;高度:14em;背景颜色:海绿色;位置:绝对;顶部:10em;左:6em;边界半径:2.5em;border-right:1.5emsoliddarkgreen;}画出按钮:.button{width:2.5em;高度:2.5em;背景色:番茄;位置:绝对;顶部:13em;左:16em;border-radius:50%;}画出支腿:.legs::before,.legs::after{内容:'';位置:绝对;宽度:1.5em;高度:2em;背景:番茄;top:24em;}.legs::before{left:9em;}.legs::after{right:10em;}drawHandle:.handle{width:4.2em;高度:1.8em;背景色:番茄;位置:绝对;顶部:12em;右:2.4em;border-radius:00.6em0.6em0;}画面包:.toaster{z-index:1;}.toast{width:9em;高度:6em;背景色:金色;位置:绝对;顶部:4em;左:10em;边界半径:2em2em00;-右:0.6em实心一枝黄花;z-index:-1;}给身体添加一些光影:.body::before,.body::after{content:'';位置:绝对;宽度:5em;高度:5em;边框:0.6em实心透明;边界半径:50%;border-left-color:white;}.body::before{transform:rotate(40deg);顶部:1em;left:1em;}.body::after{bottom:1em;右:1em;transform:rotate(210deg);}定义动画效果:@keyframesbake{0%,20%{转换:翻译Y(0);}80%,100%{变换:translateY(6em);}}最后,将动画效果应用于手柄和面包:.handle{animation:bake3sinfinitealternate;}.toast{animation:bake3sinfinitealternate;}大功告成!