20.纯 CSS 为母亲节创作一颗像素画风格的爱心
原文地址：https://segmentfault.com/a/1190000014837536
感想： 网格grid 又来了；
fr ： （剩余空间长度）单位，
1.当(50px,nfr),nfr代表除50px剩余的长度，
2.当(nfr,mfr), 长度之比 n:m ; n+m=总长度。
HTML代码：
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 描绘出 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>
</body>
</html>
CSS代码：
html, body {
margin:;
padding:;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.heart{
/* grid : 网格 */
display: grid;
grid-template-columns: repeat(9, 1fr);
/* 网格间距 */
grid-gap: 2px;
}
.heart > *{
width: 1em;
height: 1em;
background-color: white;
}
.heart dot{
background-color: red;
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);
}
50%{
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;
}
20.纯 CSS 为母亲节创作一颗像素画风格的爱心的更多相关文章
- 前端每日实战：20# 视频演示如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教程 此视频 ...
- 如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教 ...
- 如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 ...
- 前端每日实战：96# 视频演示如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 此视频是可 ...
- 如何用纯 CSS 和 D3 创作一只扭动的蠕虫
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QBQJMg 可交互视频 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
随机推荐
- Cygwin使用3-修改Cygwin的默认启动路径
原先启动Cygwin后,pwd显示: C:\Documents and Settings\Administrator@IBM-EBDC0EAC4B7 ~$ pwdC:\Documents and Se ...
- URL中传递参数给视图函数
1. 采用在url中使用变量的方式: 在path的第一个参数中,使用<参数名>的方式可以传递参数.然后在视图函数中也要写一个参数,视图函数中的参数必须和url中的参数名称保持一致,不然就找 ...
- ASP防止SQL注入
'防止SQL注入'http://0.0.0.0/bzhs/login.asp?logType=edit';WAITFOR DELAY '0:0:5' --logType = Replace(Repla ...
- Docker Dockerfile 一
1.概述 创建Docker镜像的方式有三种 docker commit命令:由容器生成镜像: Dockerfile文件+docker build命令: 从本地文件系统导入:OpenVZ的模板. 关于这 ...
- DEVC怎么建工程
1.DEVC建工程 1.1 新建项目 打开文件,选择新建-->项目-->ConsoleApplication(控制台程序),输入项目名,选择保存路径.(单独建一个文件夹存放) 项目建成功后 ...
- DS二叉树--二叉树构建与遍历
题目描述 给定一颗二叉树的逻辑结构如下图,(先序遍历的结果,空树用字符‘0’表示,例如AB0C00D00),建立该二叉树的二叉链式存储结构,并输出该二叉树的先序遍历.中序遍历和后序遍历结果 输入 第一 ...
- 天朝屁民每天做T跟菜贩一样，进菜-卖菜，为伟大的菜贩精神点赞
天朝屁民每天做T跟菜贩一样,进菜-卖菜,为伟大的菜贩精神点赞
- leedcode_贪心算法系列
861. 翻转矩阵后的得分 思路: 行首的权值最大,故首先将其置1; 每列由于权值相同,故只需要将0多于1的情况反转即可 763. 划分字母区间 思路: 1.计算每个字母的最右边界下标,并记录到新数组 ...
- VLAN IEEE802.1Q
一. VLAN产生原因-广播风暴 传统的局域网使用的是HUB,HUB只有一根总线,一根总线就是一个冲突域.所以传统的局域网是一个扁平的网络,一个局域网属于同一个冲突域.任何一台主机发出的报文都会被同一 ...
- Js学习(1)
数据类型 简单数据类型 ◆number 数字类型 ◆string 字符串类型 ◆Boolean 布尔类型 ◆true 真 (正确的) ◆false 假(错误的) ◆u ...