实例讲解如何用CSS语言创作一根闪电连接线
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了实例讲解如何用CSS语言创作一根闪电连接线，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3387字，纯文字阅读大概需要5分钟。
内容图文
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。
https://codepen.io/comehope/pen/RBjdzZ
可交互视频
此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cgkE6C6
代码解读
定义 dom，容器中包含 2 个元素，分别代表插头和线缆：
<p class="cable">
<span class="head"></span>
<span class="body"></span>
</p>居中显示：
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语言创作一根闪电连接线的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的实例讲解如何用CSS语言创作一根闪电连接线全部内容，希望文章能够帮你解决实例讲解如何用CSS语言创作一根闪电连接线所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。