{"html":"

","css":"#load {\n position: absolute;\n width: 600px;\n height: 36px;\n left: 50%;\n top: 40%;\n margin-left: -300px;\n overflow: visible;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: default;\n}\n\n#load div {\n position: absolute;\n width: 20px;\n height: 36px;\n opacity: 0;\n font-family: Helvetica, Arial, sans-serif;\n animation: move 2s linear infinite;\n -o-animation: move 2s linear infinite;\n -moz-animation: move 2s linear infinite;\n -webkit-animation: move 2s linear infinite;\n transform: rotate(180deg);\n -o-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n -webkit-transform: rotate(180deg);\n color: #35C4F0;\n}\n\n#load div:nth-child(2) {\n animation-delay: 0.2s;\n -o-animation-delay: 0.2s;\n -moz-animation-delay: 0.2s;\n -webkit-animation-delay: 0.2s;\n}\n\n#load div:nth-child(3) {\n animation-delay: 0.4s;\n -o-animation-delay: 0.4s;\n -webkit-animation-delay: 0.4s;\n -webkit-animation-delay: 0.4s;\n}\n\n#load div:nth-child(4) {\n animation-delay: 0.6s;\n -o-animation-delay: 0.6s;\n -moz-animation-delay: 0.6s;\n -webkit-animation-delay: 0.6s;\n}\n\n#load div:nth-child(5) {\n animation-delay: 0.8s;\n -o-animation-delay: 0.8s;\n -moz-animation-delay: 0.8s;\n -webkit-animation-delay: 0.8s;\n}\n\n#load div:nth-child(6) {\n animation-delay: 1s;\n -o-animation-delay: 1s;\n -moz-animation-delay: 1s;\n -webkit-animation-delay: 1s;\n}\n\n#load div:nth-child(7) {\n animation-delay: 1.2s;\n -o-animation-delay: 1.2s;\n -moz-animation-delay: 1.2s;\n -webkit-animation-delay: 1.2s;\n}\n\n@keyframes move {\n 0% {\n left: 0;\n opacity: 0;\n }\n\n 35% {\n left: 41%;\n -moz-transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 65% {\n left: 59%;\n -moz-transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 100% {\n left: 100%;\n -moz-transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n transform: rotate(-180deg);\n opacity: 0;\n }\n}\n\n@-moz-keyframes move {\n 0% {\n left: 0;\n opacity: 0;\n }\n\n 35% {\n left: 41%;\n -moz-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 65% {\n left: 59%;\n -moz-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 100% {\n left: 100%;\n -moz-transform: rotate(-180deg);\n transform: rotate(-180deg);\n opacity: 0;\n }\n}\n\n@-webkit-keyframes move {\n 0% {\n left: 0;\n opacity: 0;\n }\n\n 35% {\n left: 41%;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 65% {\n left: 59%;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 100% {\n left: 100%;\n -webkit-transform: rotate(-180deg);\n transform: rotate(-180deg);\n opacity: 0;\n }\n}\n\n@-o-keyframes move {\n 0% {\n left: 0;\n opacity: 0;\n }\n\n 35% {\n left: 41%;\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 65% {\n left: 59%;\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 100% {\n left: 100%;\n -o-transform: rotate(-180deg);\n transform: rotate(-180deg);\n opacity: 0;\n }\n}"}

old-grasshopper-0

👁 实时预览

📝 源代码