如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/LmrZVX
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cPd9asV
源代码下载
请从 github 下载。
https://github.com/comehope/f...
代码解读
定义 dom,描绘出 8 行 9 列的心形像素图案,其中 <dot> 是指要填充颜色的像素点:
<div class="heart">
<!-- line 1 -->
<span></span>
<dot></dot>
<dot></dot>
<span></span>
<span></span>
<span></span>
<dot></dot>
<dot></dot>
<span></span>
<!-- line 2 -->
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<span></span>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<!-- line 3 -->
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<!-- line 4 -->
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<!-- line 5 -->
<span></span>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<span></span>
<!-- line 6 -->
<span></span>
<span></span>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<dot></dot>
<span></span>
<span></span>
<!-- line 7 -->
<span></span>
<span></span>
<span></span>
<dot></dot>
<dot></dot>
<dot></dot>
<span></span>
<span></span>
<span></span>
<!-- line 8 -->
<span></span>
<span></span>
<span></span>
<span></span>
<dot></dot>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
居中显示:
html,body{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(silver, white);
}
设置心形的样式:
.heart {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-gap: 2px;
}
.heart > * {
width: 1em;
height: 1em;
border-radius: 0.1em;
font-size: 30px;
}
.heart dot{
background: red;
}
定义淡入淡出动画:
.heart dot{
filter: opacity(0);
animation: animation 5s ease-out infinite;
}
@keyframes animation{
0%{
filter: opacity(0);
transform: translateY(-10em);
}
25%{
filter: opacity(1);
transform: translateY(0);
}
75%{
filter: opacity(1);
transform: translateY(0);
}
100%{
filter: opacity(0);
transform: translateY(10em);
}
}
最后,让各像素点按不同时间入场,增强动画效果:
.heart dot:nth-of-type(2n) {
animation-delay: 0.2s;
}
.heart dot:nth-of-type(3n) {
animation-delay: 0.3s;
}
.heart dot:nth-of-type(4n) {
animation-delay: 0.4s;
}
.heart dot:nth-of-type(5n) {
animation-delay: 0.5s;
}
.heart dot:nth-of-type(6n) {
animation-delay: 0.6s;
}
.heart dot:nth-of-type(7n) {
animation-delay: 0.7s;
}
.heart dot:nth-of-type(8n) {
animation-delay: 0.8s;
}
.heart dot:nth-of-type(9n) {
animation-delay: 0.9s;
}
.heart dot:nth-of-type(10n) {
animation-delay: 1.0s;
}
.heart dot:nth-of-type(11n) {
animation-delay: 1.1s;
}
大功告成!
知识点
- grid-template-columns https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
- grid-gap https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap
- :nth-of-type() https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
- animation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
- translateY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY
- filter https://developer.mozilla.org/en-US/docs/Web/CSS/filter
原文地址:https://segmentfault.com/a/1190000014837536
如何用纯 CSS 为母亲节创作一颗像素画风格的爱心的更多相关文章
- 前端每日实战:20# 视频演示如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教程 此视频 ...
- 20.纯 CSS 为母亲节创作一颗像素画风格的爱心
原文地址:https://segmentfault.com/a/1190000014837536 感想: 网格grid 又来了: fr : (剩余空间长度)单位, 1.当(50px,nfr),nfr代 ...
- 如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 ...
- 如何用纯 CSS 和 D3 创作一只扭动的蠕虫
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QBQJMg 可交互视频 ...
- 前端每日实战:96# 视频演示如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 此视频是可 ...
- 如何用纯CSS布局两列,一列固定宽度,另一列自适应?
大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...
- 如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...
- 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...
- 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教 ...
随机推荐
- JVM内存模型详解
内存模型 内存模型如下图所示 堆 堆是Java虚拟机所管理的内存最大一块.堆是所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域唯一的目的就是存放对象实例.所有的对象实例都在这里分配内存 Ja ...
- Nginx系列篇四:Nginx+keepalived搭建一个高可用的双机双主热备
建议:先阅读Nginx+keepalived主从配置,因为此篇是接着上篇开始的 上一篇我们简单的介绍了主从配置及其缺点,我们看一下双主热备配置: 2台Nginx+keepalived互为主备,各自绑定 ...
- 项目上线后出现Bug,该如何处理?
项目在上线之后又出现了Bug,这让很多测试人员和开发人员头痛.但很多时候线上Bug普遍地存在,不可避免. 任何项目都存在未发现 Bug 和 已发现 Bug 两种情况,不存在没有 Bug的情况. 即 ...
- 记录Jmeter集成Jenkins运行Ant做接口监听
最近在鼓捣Jmeter的接口测试,把他集成到了Jenkins上做自动化接口监听.把操作记录下来. 首先就是进行接口测试的编写.打开Jmeter.主要是把接口的测试逻辑和断言处理调通后就OK了,接口程序 ...
- Android逆向分析工具表
逆向分析工具表 工具 描述 网址 androidterm Android Terminal Emulator http://code.google.com/p/androidterm/ droidbo ...
- h5-24-百度地图-地址解析
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Could not open logfile" occurred when run "datapatch -verbose"
CAUSE Due to Bug 25459405 - DATAPATCH FAILS WITH SP2-0768 IF NLS_LANGUAGE IS NOT SET TO AMERICANwhic ...
- 496 Next Greater Element I 下一个更大元素 I
给定两个没有重复元素的数组 nums1 和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的下一个比其大的值.nums1 中数字 x 的下一个更大 ...
- P2044 随机数生成器
链接:https://www.luogu.org/problem/show?pid=2044#sub 题目描述 栋栋最近迷上了随机算法,而随机数是生成随机算法的基础.栋栋准备使用线性同余法(Linea ...
- AJPFX关于对集合中的元素删除操作和注意点
import java.util.ArrayList;import java.util.Iterator;import java.util.List; public class ForeTest2 { ...