前端日常实践：93#视频演示纯CSS制作闪电连接线
时间：2023-03-30 17:40:23
CSS
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览全文屏幕。https://codepen.io/comehop??e/pen/RBjdzZ互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cgkE6C6源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含2个元素，分别代表插头和电缆：/span>
居中显示：body{margin:0;高度：100vh；显示：弹性；align-items:center;}定义容器尺寸：.cable{display:flex;对齐项目：居中；字体大小：10px；margin-left:5em;}勾勒插头：.head{width:8.5em;高度：8.5em；border-radius:2em002em;}勾勒出插头上的引脚：.head{position:relative;}.head::before{内容：'';位置：绝对；宽度：3em；高度：7.3em；顶部：计算（（8.5em-7.3em）/2）；左：0.7em；边界半径：1em；box-sizing:border-box;}绘制电缆手持部分的轮廓：.body{width:15.5em;高度：11em；border-radius:0.5em;}绘制电缆稍粗部分的轮廓：.body{position:relative;显示：弹性；对齐项目：居中；}.body::before{内容：'';位置：绝对；宽度：13.5em；高度：6em；left:15.5em;}绘制电缆的延伸部分：.body::after{content:'';位置：绝对；宽度：100vh；高度：3.9em；left:calc(15.5em+13.5em);}隐藏屏幕外的部分:body{overflow:hidden;}接下来绘制细节将渐变应用于扩展：.body::after{background:linear-gradient(white,hsl(0,0%,96%)5%,hsl(0,0%,97%)25%,hsl(0,0%,95%)40%,hsl(0,0%,81%)95%,white);}在电缆稍粗的部分应用渐变颜色：.body::before{background:linear-渐变(白色,hsl(0,0%,96%)5%,hsl(0,0%,98%)20%,hsl(0,0%,95%)50%,hsl(0,0%,81%)95%,white);}为电缆的手持部分绘制渐变颜色：.body{background:linear-gradient(hsl(0,0%,91%),white15%,hsl(0,0%,93%)50%,hsl(0,0%,87%)70%,hsl(0,0%,79%)90%,hsl(0,0%,84%),hsl(0,0%,86%));}将渐变应用于标题：.head{background:linear-gradient(-45deg,hsl(0,0%,75%),hsl(0,0%,79%),hsl(0,0%,78%),hsl(0,0%,87%)80%);}在插头上绘制引脚：.head::before{background-颜色：白色；}.head::after{内容：''；位置：绝对；框大小：边框框；宽度：2.2em；高度：0.4em；颜色：金黄色；半径：0.5em；左：1.1em；顶部：1.2em；em0;}接下来添加阴影，让电缆更有立体感在插头上绘制阴影：.head{background:linear-gradient(90deg,transparent80%,rgba(0,0,0,12%)),linear-gradient(-45deg,hsl(0,0%,75)%),hsl(0,0%,79%),hsl(0,0%,78%),hsl(0,0%,87%)80%);}绘制电缆手持部分的阴影:.body::before{背景：线性渐变（45deg，rgba（0,0,0,4％）10％，透明20％），线性渐变（90deg，rgba（0,0,0,4％),透明10%),线性渐变(白色,hsl(0,0%,96%)5%,hsl(0,0%,98%)20%,hsl(0,0%,95%)50%,hsl(0,0%,81%)95%,white);}绘制电缆稍粗部分的阴影：.body::after{background:linear-gradient(45deg,rgba(0,0,0,4%),透明4%),线性渐变(90deg,rgba(0,0,0,4%),transparent2%),linear-gradient(white,hsl(0,0%,96%)5%,hsl(0,0%,97%)25%,hsl(0,0%,95%)40%,hsl(0,0%,81%)95%,white);}最后给screen.cable添加一个入口动画{animation:show5slinearinfinite;}@keyframesshow{0%{变换：translateX(100vw);}20%,100%{变换:translateX(0);}}你完成了！
