效果预览

在线演示

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

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

可交互视频教程

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

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

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

源代码下载

本地下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/018-stroke-morphing-404-effects

代码解读

定义 dom,容器中包含 3 个 <p>,每个 <p> 代表 1 个数字;每个 p 标签包含若干 <span>,每个 <span> 代表 1 个笔划:

&lt;section class="four-zero-four"&gt;
&lt;p class="four"&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;p class="zero"&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;p class="four"&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;/section&gt;

居中显示:

html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(gray, silver);
}

整体布局:

.four-zero-four p {
width: 10em;
height: 10em;
border: 1px dashed white;
display: inline-block;
margin: 1em;
position: relative;
}

设置笔划共有属性:

.four-zero-four p span {
position: absolute;
box-sizing: border-box;
filter: opacity(0.8);
}

画出数字 4 的笔划:

.four span:nth-child(1) {
width: 20%;
height: 80%;
left: 10%;
} .four span:nth-child(2) {
width: 100%;
height: 20%;
bottom: 30%;
} .four span:nth-child(3) {
width: 20%;
height: 100%;
right: 10%;
}

画出数字 0 的笔划:

.zero span:nth-child(1) {
width: 20%;
height: 100%;
left: 10%;
} .zero span:nth-child(2) {
width: 100%;
height: 20%;
top: 10%;
} .zero span:nth-child(3) {
width: 20%;
height: 100%;
right: 10%;
} .zero span:nth-child(4) {
width: 100%;
height: 20%;
bottom: 10%;
}

给笔划上色:

.four span:nth-child(1) {
background-color: yellowgreen;
} .four span:nth-child(2) {
background-color: turquoise;
} .four span:nth-child(3) {
background-color: pink;
} .zero span:nth-child(1) {
background-color: skyblue;
} .zero span:nth-child(2) {
background-color: plum;
} .zero span:nth-child(3) {
background-color: lightcoral;
} .zero span:nth-child(4) {
background-color: peachpuff;
}

设置划过数字时笔划的变化效果:

.four-zero-four p:hover span {
border: 1px solid black;
background-color: transparent;
filter: opacity(1);
transition: 0.3s;
}

设置划过数字时笔划的偏移量:

.four:hover span:nth-child(1) {
left: 0;
} .four:hover span:nth-child(2) {
bottom: 0;
} .four:hover span:nth-child(3) {
right: 0;
} .zero:hover span:nth-child(1) {
left: 0;
} .zero:hover span:nth-child(2) {
top: 0;
} .zero:hover span:nth-child(3) {
right: 0;
} .zero:hover span:nth-child(4) {
bottom: 0;
}

最后,设置缓动时长:

.four-zero-four p span {
transition: 0.3s;
} .four-zero-four p:hover span {
transition: 0.3s;
}

大功告成!

知识点

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

如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效的更多相关文章

  1. 前端每日实战:18# 视频演示如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效

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

  2. 18.纯 CSS 创作 404 文字变形为 NON 文字的交互特效

    原文地址:https://segmentfault.com/a/1190000014818274 感想: positon:absolute  和 :hover HTML代码: <!-- < ...

  3. 如何用纯 CSS 创作一种按钮被瞄准的交互特效

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

  4. 9.纯 CSS 创作一种按钮被瞄准的交互特效

    原文地址:https://segmentfault.com/a/1190000014680999 吃鸡倍镜,哈哈哈 HTML代码: <div class="box"> ...

  5. 如何用纯 CSS 创作在文本前后穿梭的边框

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

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

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

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

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

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

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

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

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

随机推荐

  1. Luogu P2170选学霸【并查集+背包】By cellur925

    题目传送门 开始看到本题完全认为就是个彻头彻尾的并查集,只要把实力相当的人都并到一个集合中,最后再找一共有多少联通块即可. 后来发现这是大错特错的qwq.因为选了一个集合中的某人,那这个集合中所有人就 ...

  2. 关于ios7 以上版本 view被导航栏遮挡的问题 解决方案

    self.edgesForExtendedLayout = UIRectEdgeNone; 如果导航栏是默认带磨砂透明效果的,使用了edgesForExtendedLayout可能会出现导航栏变不透明 ...

  3. android 百度地图

    展示当前位置地图 参考百度定位demo (LocationDemo) 实现此功能,运行发现 BDLocationListener 的onReceiveLocation方法无法执行,原因是 Androi ...

  4. Caffe实战三(依赖包解析及环境配置)

    前面的文章使用的软件环境是开始时通过apt-get命令所安装的,本文将通过编译源码的方式重新配置一个可迁移的软件环境.(参考:<深度学习 21天实战Caffe> 第五天 Caffe依赖包解 ...

  5. Python函数和面向对象题目

  6. 【数据结构(C语言版)系列三】 队列

    队列的定义 队列是一种先进先出的线性表,它只允许在表的一端进行插入,而在另一端删除元素.这和我们日常生活中的排队是一致的,最早进入队列的元素最早离开.在队列中,允许插入的一端叫做队尾(rear),允许 ...

  7. httpclient 3.1跳过https请求SSL的验证

    一.因为在使用https发送请求的时候会涉及,验证方式.但是这种方式在使用的时候很不方便.特别是在请求外部接口的时候,所以这我写了一个跳过验证的方式.(供参考) 二.加入包,这里用的是commons- ...

  8. Plugging an Unplugged Pluggable Database issue 2

    因为原库和目标库版本不一制,出现各种问题,强烈建议保持2个版本一致 http://www.cndba.cn/dave/article/220 Log 提示查看PDB_PLUG_IN_VIOLATION ...

  9. Python Selenium设计模式 - PO设计模式

    整理一下python selenium自动化测试实践中使用较多的po设计模式. 为什么要用PO 基于python selenium2开始开始ui自动化测试脚本的编写不是多么艰巨的任务.只需要定位到元素 ...

  10. Android Studio编译开源项目(含NDK开发)常见报错

    1.未设置NDK的路径 Error:Execution failed for task ':library:ndkBuild'. > A problem occurred starting pr ...