效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/RBjdzZ

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cgkE6C6

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 2 个元素,分别代表插头和线缆:

<div class="cable">
<span class="head"></span>
<span class="body"></span>
</div>

居中显示:

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);
}
}

大功告成!

原文地址:https://segmentfault.com/a/1190000015809333

如何用纯 CSS 创作一根闪电连接线的更多相关文章

  1. 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...

  2. 如何用纯 CSS 创作一个单元素抛盒子的 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 ...

  3. 如何用纯 CSS 创作一个行驶中的火车 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 ...

  4. 如何用纯 CSS 创作文本滑动特效的 UI 界面

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...

  5. 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...

  6. 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教 ...

  7. 如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...

  8. 如何用纯 CSS 创作一个渐变色动画边框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

  9. 如何用纯 CSS 创作条形图,不用任何图表库

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教 ...

随机推荐

  1. 页面出现滚动条时,body里面的内容不能自动居中?

    弹窗后允许页面滚动 这种方式通常使用 position: absolute; ,可以看看我做的这个 Demo.主要用来应对弹窗内容很大很多的情况,超过了屏幕的宽高需要产生滚动条来方便浏览者查看.有一些 ...

  2. 在线获取键盘按键值(ascii码)工具

    在线获取键盘按键值(ascii码)工具 http://www.bejson.com/othertools/keycodes/ 可以根据输入的值获取对应的键盘ascii码值

  3. [TCP/IP]ICMP和IGMP的区别

    ICMP(Internet 控制消息协议,Internet Control Message Protocol)协议用来给IP协议提供控制服务,允许路由器或目标主机给数据的发送方提供反馈信息.需要发送反 ...

  4. Net Core应用,在CentOS上运行

    Net Core应用,在CentOS上运行 本文主要介绍下运用docker虚拟技术打包Asp.net core应用. Docker作为一个开源的应用容器引擎,近几年得到广泛的应用,使用Docker我们 ...

  5. FusionCharts的类 - 实例功能

    一.FusionCharts的类 - 实例功能 1.configure(name:string , value:string)  or  configure(configurations: Objec ...

  6. (转)磁盘阵列RAID原理、种类及性能优缺点对比

    磁盘阵列RAID原理.种类及性能优缺点对比 原文:http://www.cnblogs.com/chuncn/p/6008173.html 磁盘阵列(Redundant Arrays of Indep ...

  7. 实现Sublime Text3中vue文件高亮显示的最有效的方法

    今天第一次使用Sublime Text3软件,在实现vue文件高亮显示的过程中一直报错,经过了半天时间的不停尝试终于找到了最有效的一种解决方法!错误提示如下: 刚开始尝试了很多方法都不行,只要打开in ...

  8. CentOS7.5安装JDK1.8

    1.准备JDK安装包 [1]查看环境 cat /etc/redhat-release [2]下载JDK1.8 网址: https://www.oracle.com/technetwork/java/j ...

  9. SQL Server 2012安装配置(Part1 )

    1 安装前准备 安装 SQL Server 2012 服务器及客户端前,需要提前做以下两项准备: SQL Server2012 依赖于.Net Framework 3.5.1 组件.Windows S ...

  10. python+selenium之验证码的处理

    对于web应用来说,大部分的系统在用户登录时都要求用户输入验证码.验证码的类型很多,有字母数字的,有汉字的.甚至还有需要用户输入一道算术题的答案的.对于系统来说,使用验证码可以有效地防止采用机器猜测方 ...