原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3
感想: 网格布局-》 display: grid;
HTML code:
<div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS code:
html, body { margin: 0; padding: 0; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; } .loader{ width: 10em; height: 10em; /* 网格布局 */ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.5em; /* 旋转 : 45度 */ transform: rotate(45deg); } /* 以竖向的小菱形为单位,为小菱形涂颜色 */ .loader span{ background-color: var(--c); animation: blinking 2s linear var(--d) infinite; /* animation-delay: var(--d); */ transform: scale(0); } /* blinking : 闪烁 */ @keyframes blinking{ 0%,100%{ transform: scale(0); } 40%,80%{ transform: scale(1); } } .loader span:nth-child(7) { --c: tomato; --d: 0s; } .loader span:nth-child(4), .loader span:nth-child(8) { --c: gold; --d: 0.2s; } .loader span:nth-child(1), .loader span:nth-child(5), .loader span:nth-child(9) { --c: limegreen; --d: 0.4s; } .loader span:nth-child(2), .loader span:nth-child(6) { --c: dodgerblue; --d: 0.6s; } .loader span:nth-child(3) { --c: mediumpurple; --d: 0.8s; }