原文地址：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: 0; ???padding: 0; ???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 为母亲节创作一颗像素画风格的爱心
原文地址：https://www.cnblogs.com/FlyingLiao/p/10260957.html