{"html":"

","css":"@-webkit-keyframes follow-the-leader {\n 0% {\n -webkit-transform: rotate(0deg) translateY(-200%);\n transform: rotate(0deg) translateY(-200%);\n }\n\n 60%,\n 100% {\n -webkit-transform: rotate(360deg) translateY(-200%);\n transform: rotate(360deg) translateY(-200%);\n }\n}\n\n@keyframes follow-the-leader {\n 0% {\n -webkit-transform: rotate(0deg) translateY(-200%);\n transform: rotate(0deg) translateY(-200%);\n }\n\n 60%,\n 100% {\n -webkit-transform: rotate(360deg) translateY(-200%);\n transform: rotate(360deg) translateY(-200%);\n }\n}\n\n.follow-the-leader-line {\n height: 14px;\n position: relative;\n width: 14px;\n}\n\n.follow-the-leader-line div {\n -webkit-animation: follow-the-leader 1.25s infinite backwards;\n animation: follow-the-leader 1.25s infinite backwards;\n background-color: #ffffff;\n border-radius: 100%;\n height: 100%;\n width: 100%;\n}\n\n.follow-the-leader-line div:nth-child(1) {\n -webkit-animation-delay: 0.15s;\n animation-delay: 0.15s;\n background-color: rgba(255, 255, 255, 0.9);\n}\n\n.follow-the-leader-line div:nth-child(2) {\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n background-color: rgba(255, 255, 255, 0.8);\n}\n\n.follow-the-leader-line div:nth-child(3) {\n -webkit-animation-delay: 0.45s;\n animation-delay: 0.45s;\n background-color: rgba(255, 255, 255, 0.7);\n}\n\n.follow-the-leader-line div:nth-child(4) {\n -webkit-animation-delay: 0.6s;\n animation-delay: 0.6s;\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.follow-the-leader-line div:nth-child(5) {\n -webkit-animation-delay: 0.75s;\n animation-delay: 0.75s;\n background-color: rgba(255, 255, 255, 0.5);\n}"}

shy-treefrog-52

👁 实时预览

📝 源代码