如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 个笔划:
<section class="four-zero-four">
<p class="four">
<span></span>
<span></span>
<span></span>
</p>
<p class="zero">
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<p class="four">
<span></span>
<span></span>
<span></span>
</p>
</section>
居中显示:
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;
}
大功告成!
知识点
- opacity https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Functions
- nth-child() https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
- transition https://developer.mozilla.org/en-US/docs/Web/CSS/transition
原文地址:https://segmentfault.com/a/1190000014818274
如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效的更多相关文章
- 前端每日实战:18# 视频演示如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教程 此视频 ...
- 18.纯 CSS 创作 404 文字变形为 NON 文字的交互特效
原文地址:https://segmentfault.com/a/1190000014818274 感想: positon:absolute 和 :hover HTML代码: <!-- < ...
- 如何用纯 CSS 创作一种按钮被瞄准的交互特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视 ...
- 9.纯 CSS 创作一种按钮被瞄准的交互特效
原文地址:https://segmentfault.com/a/1190000014680999 吃鸡倍镜,哈哈哈 HTML代码: <div class="box"> ...
- 如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教 ...
- 如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...
- 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...
- 如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
随机推荐
- Luogu P2170选学霸【并查集+背包】By cellur925
题目传送门 开始看到本题完全认为就是个彻头彻尾的并查集,只要把实力相当的人都并到一个集合中,最后再找一共有多少联通块即可. 后来发现这是大错特错的qwq.因为选了一个集合中的某人,那这个集合中所有人就 ...
- 关于ios7 以上版本 view被导航栏遮挡的问题 解决方案
self.edgesForExtendedLayout = UIRectEdgeNone; 如果导航栏是默认带磨砂透明效果的,使用了edgesForExtendedLayout可能会出现导航栏变不透明 ...
- android 百度地图
展示当前位置地图 参考百度定位demo (LocationDemo) 实现此功能,运行发现 BDLocationListener 的onReceiveLocation方法无法执行,原因是 Androi ...
- Caffe实战三(依赖包解析及环境配置)
前面的文章使用的软件环境是开始时通过apt-get命令所安装的,本文将通过编译源码的方式重新配置一个可迁移的软件环境.(参考:<深度学习 21天实战Caffe> 第五天 Caffe依赖包解 ...
- Python函数和面向对象题目
- 【数据结构(C语言版)系列三】 队列
队列的定义 队列是一种先进先出的线性表,它只允许在表的一端进行插入,而在另一端删除元素.这和我们日常生活中的排队是一致的,最早进入队列的元素最早离开.在队列中,允许插入的一端叫做队尾(rear),允许 ...
- httpclient 3.1跳过https请求SSL的验证
一.因为在使用https发送请求的时候会涉及,验证方式.但是这种方式在使用的时候很不方便.特别是在请求外部接口的时候,所以这我写了一个跳过验证的方式.(供参考) 二.加入包,这里用的是commons- ...
- Plugging an Unplugged Pluggable Database issue 2
因为原库和目标库版本不一制,出现各种问题,强烈建议保持2个版本一致 http://www.cndba.cn/dave/article/220 Log 提示查看PDB_PLUG_IN_VIOLATION ...
- Python Selenium设计模式 - PO设计模式
整理一下python selenium自动化测试实践中使用较多的po设计模式. 为什么要用PO 基于python selenium2开始开始ui自动化测试脚本的编写不是多么艰巨的任务.只需要定位到元素 ...
- Android Studio编译开源项目(含NDK开发)常见报错
1.未设置NDK的路径 Error:Execution failed for task ':library:ndkBuild'. > A problem occurred starting pr ...