如何用纯 CSS 创作一根闪电连接线
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 创作一根闪电连接线的更多相关文章
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个单元素抛盒子的 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 ...
- 如何用纯 CSS 创作一个行驶中的火车 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 ...
- 如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...
- 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...
- 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教 ...
- 如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作条形图,不用任何图表库
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教 ...
随机推荐
- python进阶06 常用问题库(2)datetime模块 base64
python进阶06 常用问题库(2)datetime模块 base64 一.datetime模块(时间) 1.datetime.time() t=datetime.time(20,43,30,1) ...
- ubuntu上安装ansible
1 在最新的ubuntu系统上安装ansible : sudo ape-get install ansible 2 切换到root用户 生成ssh免密登陆 ssh-keygen -t rsa ssh- ...
- GUI的最终选择 Tkinter(九):事件
Tkinter事件处理 Tkinter应用会花费大部分的时间在处理事件循环中(通过mainloop()方法进入),事件可以是触发的鼠标,键盘的操作,管理窗口触发的重绘事件(在多数情况下都是有用户间接引 ...
- Hypertext Application Language(HAL)
Hypertext Application Language(HAL) HAL,全称为Hypertext Application Language,它是一种简单的数据格式,它能以一种简单.统一的形式, ...
- (转)linux traceroute命令参数及用法详解--linux跟踪路由命令
linux traceroute命令参数及用法详解--linux跟踪路由命令 原文:http://blog.csdn.net/liyuan_669/article/details/25362505 通 ...
- 查询获取所有数据库名及数据库中表的集合、数据库连接字符串(类生成器,暂时支持mysql,sql server,后期有oracle再更新)
现所在公司做项目开发时,经常会自己创建model类,网上的生成器也很多,完全满足自己的不太现实,所以感觉自己做一个更有底气,主要针对过程中的一些语句进行整理,也供其他人学习参考. 连接字符串: mys ...
- 个人博客 attack.cf
新开了个emlog搭的博客 地址:attack.cf 主要分享一下网络安全方面的东西和一些精品资源 欢迎来访
- js字符串与十六进制之间的转换
在寻找加密解密的时候看到一个方法,代码图片转换.原理为:字符可以转为16进制,与图片RGB的一个R/G/B相对应,即一个像素点可容纳3个字符(注:Canvas的RGBA,透明度A似乎不能使用,使用后, ...
- ServletContext--HttpServletResponse--web项目执行流程
一.ServletContext 接口(javax.servlet) 定义:public interface ServletContext 原理: Tomcat启动的时候,需要识别webapp ...
- C语言中的static和extern
c语言中,全局变量是一个非常重要的概念.全局变量定义在函数外,可以被所有的函数共同使用. #include <iostream> ; void display() { printf(&qu ...