20.純 CSS 為母親節創作一顆像素畫風格的愛心
阿新 • • 發佈：2019-01-12
http city justify enter out 動畫 center code span
原文地址：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 為母親節創作一顆像素畫風格的愛心