{"html":"

","css":"@-webkit-keyframes honeycomb {\n 0%,\n 20%,\n 80%,\n 100% {\n opacity: 0;\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 30%,\n 70% {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes honeycomb {\n 0%,\n 20%,\n 80%,\n 100% {\n opacity: 0;\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 30%,\n 70% {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n.honeycomb {\n height: 24px;\n position: relative;\n width: 24px;\n}\n\n.honeycomb div {\n -webkit-animation: honeycomb 2.1s infinite backwards;\n animation: honeycomb 2.1s infinite backwards;\n background: #f3f3f3;\n height: 12px;\n margin-top: 6px;\n position: absolute;\n width: 24px;\n}\n\n.honeycomb div:after, .honeycomb div:before {\n content: '';\n border-left: 12px solid transparent;\n border-right: 12px solid transparent;\n position: absolute;\n left: 0;\n right: 0;\n}\n\n.honeycomb div:after {\n top: -6px;\n border-bottom: 6px solid #f3f3f3;\n}\n\n.honeycomb div:before {\n bottom: -6px;\n border-top: 6px solid #f3f3f3;\n}\n\n.honeycomb div:nth-child(1) {\n -webkit-animation-delay: 0s;\n animation-delay: 0s;\n left: -28px;\n top: 0;\n}\n\n.honeycomb div:nth-child(2) {\n -webkit-animation-delay: 0.1s;\n animation-delay: 0.1s;\n left: -14px;\n top: 22px;\n}\n\n.honeycomb div:nth-child(3) {\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n left: 14px;\n top: 22px;\n}\n\n.honeycomb div:nth-child(4) {\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n left: 28px;\n top: 0;\n}\n\n.honeycomb div:nth-child(5) {\n -webkit-animation-delay: 0.4s;\n animation-delay: 0.4s;\n left: 14px;\n top: -22px;\n}\n\n.honeycomb div:nth-child(6) {\n -webkit-animation-delay: 0.5s;\n animation-delay: 0.5s;\n left: -14px;\n top: -22px;\n}\n\n.honeycomb div:nth-child(7) {\n -webkit-animation-delay: 0.6s;\n animation-delay: 0.6s;\n left: 0;\n top: 0;\n}"}

ancient-quail-68

👁 实时预览

📝 源代码