原文地址：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; }