原文地址: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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。