如何用纯 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
转载于:https://www.cnblogs.com/lalalagq/p/9988732.html
如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效相关推荐
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- css动态彩虹背景,如何用纯 CSS 创作彩虹背景文字
CSS3 渐变(Gradients) https://www.runoob.com/css3/css3-gradients.html 效果预览 按下右侧的"点击预览"按钮可以在当前 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效 1
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
最新文章
- Android开源项目SlidingMenu本学习笔记(两)
- 台湾国立大学郭彦甫Matlab教程笔记(11) advanced 2D plots 上
- PCA原理分析和意义(二)
- css设置不允许复制文本内容
- 图像处理中的傅里叶变换和频率域滤波概念
- unityui等比例缩放_Unity 4.6-如何针对每种分辨率将GUI元素缩放到合适的大小
- P2770 航空路线问题(网络流)
- r语言怎么把txt数据变成一个Rdata格式_甲基化芯片数据下载如何读入到R里面
- 性能测试中容易混淆的概念
- 积温空间分布数据、气温分布数据、日照数据、降雨量分布、太阳辐射数据、地表径流数据、土地利用数据、npp数据、ndvi数据
- Apizza-快如何进行API开发进度管理
- Scrapy框架:Request和Response对象,使用Request发送get请求、FormRequest发送post请求
- PCL ——最小包围盒
- 高分1、2号卫星原始遥感影像数据
- 大数据开发工程师是做什么的?岗位要求高吗?
- pig java api_Pig安装及入门案例
- java 支付宝转账_支付宝api实现转账到单个账号
- Spark大数据分与实践笔记(第二章 Spark基础-03)
- 联想小新一键恢复小孔_联想小新Air系列一键恢复及恢复后首次配置的步骤
- 计算机的操作系统有哪些
热门文章
- 我经常逛的技术网站,个个经典
- 看看华为 Java 编程的军规...
- 为什么我不再推荐使用MVC框架?
- 揭秘2017双11背后的网络-双11的网络产品和技术概览
- 2017年最受欢迎的10个编程挑战网站,值得收藏!
- python解释器使用函数可以进入帮助系统_使用help()命令可以进入帮助系统。
- Mybatis-Spring扫描路径有重叠导致Invalid bound statement(not found)问题
- 第一模块·开发基础-第1章 Python基础语法
- more 分页显示文件内容
- group by having where order by