效果预览
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。
https://codepen.io/comehope/pen/RBjdzZ
可交互视频
此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
立即学习“前端免费学习笔记（深入）”；
https://scrimba.com/p/pEgDAM/cgkE6C6
代码解读
定义 dom，容器中包含 2 个元素，分别代表插头和线缆：
居中显示：
body { margin: 0; height: 100vh; display: flex; align-items: center;}
定义容器尺寸：
.cable { display: flex; align-items: center; font-size: 10px; margin-left: 5em;}
画出插头的轮廓：
.head { width: 8.5em; height: 8.5em; border-radius: 2em 0 0 2em;}
画出插头上针脚的轮廓：
.head { position: relative;}.head::before { content: ''; position: absolute; width: 3em; height: 7.3em; top: calc((8.5em - 7.3em) / 2); left: 0.7em; border-radius: 1em; box-sizing: border-box;}
画出线缆中手持部位的轮廓：
.body { width: 15.5em; height: 11em; border-radius: 0.5em;}
画出线缆中稍粗部位的轮廓：
.body { position: relative; display: flex; align-items: center;}.body::before { content: ''; position: absolute; width: 13.5em; height: 6em; left: 15.5em;}
画出线缆的延长线部分：
.body::after { content: ''; position: absolute; width: 100vh; height: 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-gradient( white, 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%), white 15%, 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-color: white;}.head::after { content: ''; position: absolute; box-sizing: border-box; width: 2.2em; height: 0.4em; color: goldenrod; background-color: currentColor; border-radius: 0.5em; left: 1.1em; top: 1.2em; box-shadow: 0 0.8em 0, 0 1.6em 0, 0 2.4em 0, 0 3.2em 0, 0 4em 0, 0 4.8em 0, 0 5.6em 0;}
接下来添加阴影，使线缆更立体。
绘制插头上的阴影：
.head { background: linear-gradient( 90deg, transparent 80%, 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 { background: linear-gradient( 45deg, rgba(0,0,0,4%) 10%, transparent 20% ), linear-gradient( 90deg, rgba(0,0,0,4%), transparent 10% ), linear-gradient( white, 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%), transparent 4% ), linear-gradient( 90deg, rgba(0,0,0,4%), transparent 2% ), linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 97%) 25%, hsl(0, 0%, 95%) 40%, hsl(0, 0%, 81%) 95%, white );}
最后，为画面增加入场动画
.cable { animation: show 5s linear infinite;}@keyframes show { 0% { transform: translateX(100vw); } 20%, 100% { transform: translateX(0); }}
大功告成！
相关文章：
使用纯CSS3创建一个纺锤形分隔线
如何使用纯CSS3创建一个简单的五角星图形
相关视频：
CSS动画实用技巧视频教程
以上就是实例讲解如何用CSS语言创作一根闪电连接线的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610883.html
微信扫一扫 
支付宝扫一扫 
