{"html":"

","css":".container {\n position: absolute;\n top: 45%;\n left: 48%;\n}\n\n.square {\n width: 8px;\n height: 30px;\n background: rgb(71, 195, 248);\n border-radius: 10px;\n display: block;\n /*margin:10px;*/\n -webkit-animation: turn 2.5s ease infinite;\n animation: turn 2.5s ease infinite;\n box-shadow: rgb(71, 195, 248) 0px 1px 15px 0px;\n}\n\n.top {\n position: absolute;\n left: 40%;\n top: 50%;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n.bottom {\n position: absolute;\n left: 40%;\n top: 50%;\n -webkit-transform: rotate(-90deg);\n transform: rotate(-90deg);\n}\n\n.left {\n position: absolute;\n left: 40%;\n top: 50%;\n}\n\n.right {\n position: absolute;\n left: 40%;\n top: 50%;\n -webkit-transform: rotate(-180deg);\n transform: rotate(-180deg);\n}\n\n@-webkit-keyframes turn {\n 0% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n\n 50% {\n transform: translateX(400%) translateY(100%) rotate(90deg);\n }\n\n 100% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n}\n\n@keyframes turn {\n 0% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n\n 70% {\n transform: translateX(400%) translateY(100%) rotate(90deg);\n }\n\n 100% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n}"}

moody-fly-80

👁 实时预览

📝 源代码