前端日常实践：87#视频演示如何使用1个DOM元素和纯CSS打造并排冰箱
时间：2023-04-05 21:11:58
HTML5
效果预览点击右侧“点击预览”按钮可在当前页面进行预览,单击链接以全屏预览。https://codepen.io/comehop??e/pen/EpWagM互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cZwGRTL源码下载前端日常实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有1个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(floralwhite,wheat);}定义容器的大小：.fridge{width:24em;高度：38em；font-size:10px;}绘制冰箱的轮廓：.fridge{border-top:1emsolid#333;底部边框：1emsolid#333；背景：银色；边界半径：4em/0.5em；box-shadow:00.5em1em-0.5emrgba(0,0,0,0.5);}用线性渐变绘制冰箱的金属表面：.fridge{background:linear-gradient(toright,darkgray,lightgray10%,silver40%,silver80%,darkgray90%,dimgray);}用线性渐变画冰箱的把手：.冰箱{背景：线性渐变（向右，透明40%，灰色40%，silver41%,dimgray43%,transparent43%,transparent48%,grey48%,silver49%,dimgray51%,transparent51%)no-repeatcenter/100%90%,/*handles*/线性渐变(toright,darkgray,lightgray10%,silver40%,silver80%,darkgray90%,dimgray);}在冰柜表面的线条变形中加画门缝：.fridge{background:linear-gradient(toright,transparent40%,gray40%,silver41%,dimgray43%,transparent43%,transparent48%,grey48%,silver49%,dimgray51%,transparent51%)无重复中心/100%90%,/*handles*/线性渐变（向右，深灰色，浅灰色10%，银色40%，银色45%，黑色45%，黑色46%，silver46%,silver80%,darkgray90%,dimgray);}使用before伪元素绘制饮水机的轮廓：.fridge::before{content:'';位置：绝对；宽度：6em；高度：7.5em；背景：黑色；顶部：计算（（100%-7.5em）/2）；left:2.5em;}使用线性渐变绘制饮水机的边框，使用径向渐变绘制饮水机的出口：.fridge::before{background:radial-gradient(circleat50%22%,black,black1em,transparent1em),linear-gradient(transparent25%,#22225%)无重复中心顶部/94%98%,black;}绘制4个带径向渐变的led灯：.fridge::before{background:radial-gradient(circleat88%10%,limegreen,limegreen0.2em,transparent0.2em),radial-gradient(circleat75%10%,hotpink,hotpink0.2em,transparent0.2em),radial-gradient(circleat25%10%,闪避rblue,dodgerblue0.2em,transparent0.2em),radial-gradient(circleat12%10%,gold,gold0.2em,transparent0.2em),radial-gradient(circleat50%22%,black,black1em,透明1em),linear-gradient(transparent25%,#22225%)no-repeatcentertop/94%98%,black;}使用after伪元素绘制杯子的轮廓：.fridge::after{内容：'';位置：绝对；宽度：2em；高度：3em；背景：深天蓝；底部：计算（（100%-7.5em）/2）；左：计算（2.5em+（6em-2em）/2）；修剪杯子的形状，使顶部变大，底部变小：.fridge::after{clip-path:polygon(00,100%0,90%100%,10%100%);}制作顶部cuplighter，看起来杯子里有水：.fridge::after{background:linear-gradient(tobottom,lightskyblue25%,transparent25%),deepskyblue;}最后，在水中加入一些气泡:.fridge::after{背景und:radial-gradient(circleat35%40%,lightblue,lightblue0.1em,transparent0.4em),radial-gradient(circleat65%60%,lightblue,lightblue0.1em,transparent0.3em),径向渐变(circleat45%80%,lightblue,lightblue0.1em,transparent0.2em),linear-gradient(tobottom,lightskyblue25%,transparent25%),deepskyblue;}大功告成！
