效果预览

在线演示

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

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. Luogu P2257 YY的GCD 莫比乌斯反演

    第一道莫比乌斯反演...$qwq$ 设$f(d)=\sum_{i=1}^n\sum_{j=1}^m[gcd(i,j)==d]$ $F(n)=\sum_{n|d}f(d)=\lfloor \frac{N ...

  2. MPlayer 常用操作和快捷键列表

    MPlayer,一款强大的老牌开源播放器,非常适合命令行重度用户和极简主义者.很多时候它是作为其他著名播放器的后端存在的,直接使用基于命令行的本身对于很多新手来说就一头雾水了.比如播放视频的时候,窗口 ...

  3. Python 开发基础-字符串类型讲解(字符串方法)-2

    s = 'Hello World!'print(s.index('W',0,9))#返回某个字母的索引值,本例返回6.没有该字母会报错,和FIND比较像,find不会报错,没找到会返回-1print( ...

  4. Net Core2.0下使用Dapper

    Net Core2.0下使用Dapper 今天成功把.Net Framework下使用Dapper进行封装的ORM成功迁移到.Net Core 2.0上,在迁移的过程中也遇到一些很有意思的问题,值得和 ...

  5. bzoj 2301: [HAOI2011]Problem b mobius反演 RE

    http://www.lydsy.com/JudgeOnline/problem.php?id=2301 设f(i)为在区间[1, n]和区间[1, m]中,gcd(x, y) = i的个数. 设F( ...

  6. SQL server 游标,随机数使用

    SELECT * FROM [goods] DECLARE test_cursor CURSOR scroll FOR SELECT goods_no, [unitprice] FROM [goods ...

  7. dede用户登录时,跳转到提示页时报404错误

    做了一个项目,本地运行,用的是Apache服务器,一切正常. 可是当我把项目放到VPS中运行时,每当输入用户名登录时,调转到"成功登录,3秒钟后转向网站主页"的提示页面时,页面的顶 ...

  8. Kendo MVVM 数据绑定(十一) Value

    Kendo MVVM 数据绑定(十一) Value Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性.当用户修改 DOM 元素或 UI ...

  9. css简单动画

    这几天公司需要更新一个移动端web的页面,因为任务简单,就交给作为菜鸟新人的我来做.第一次接触css还是在14年刚上大一的时候跟着html一起学习的,之后就再也没有接触过.所以只好一边学习,一边完成任 ...

  10. SpringBoot服务监控

    SpringBoot服务监控分为客户端和服务端,即服务端是监控方,客户端为被监控方. 例如需要对线上的SpringBoot服务project-A进行监控,则project-A 为客户端.而监控的服务p ...