{"html":"

\n","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n transform: perspective(70px) rotateX(55deg);\n overflow: hidden;\n}\n\n.street {\n width: 60px;\n height: 110px;\n background-color: #525c62;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.lines {\n width: 5px;\n height: 100%;\n background: repeating-linear-gradient(\n #fff 0px,\n #fff 10px,\n transparent 10px,\n transparent 20px\n );\n animation: moveLines 0.6s linear infinite;\n}\n\n.trees-path {\n width: 20px;\n height: 110px;\n background-color: #696868;\n}\n\n.sidewalk {\n width: 8px;\n height: 110px;\n position: relative;\n background: repeating-linear-gradient(\n #fff 0px,\n #fff 11px,\n #313131 9px,\n #313131 19px\n );\n animation: moveLines 0.6s linear infinite;\n}\n\n.sidewalk-shadow {\n position: absolute;\n top: 0px;\n width: 5px;\n height: 100%;\n background: repeating-linear-gradient(\n #535353 0px,\n #535353 12.5px,\n #000 9px,\n #000 19px\n );\n animation: moveLines 0.6s linear infinite;\n}\n\n.left {\n left: 100%;\n transform: skew(0deg, 30deg);\n}\n\n.right {\n left: -5px;\n transform: skew(0deg, -30deg);\n}\n\n@keyframes moveLines {\n 0% {\n background-position: 0 0;\n }\n\n 100% {\n background-position: 0 20px;\n /* Change this value based on your design */\n }\n}\n"}

big-wombat-31

👁 实时预览

📝 源代码