{"html":"

","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n animation: animate 8s linear infinite;\n}\n\n.pencil {\n width: 150px;\n background: #ffc334;\n border-top: 10px solid #ffd268;\n border-bottom: 10px solid #e3af38;\n overflow: hidden;\n transform-origin: top;\n}\n\n.pencil p {\n margin: 0;\n padding: 0;\n text-align: center;\n font-size: 12px;\n line-height: 15px;\n text-transform: uppercase;\n font-weight: bold;\n color: #d09200;\n}\n\n.pencil:before {\n content: '';\n position: absolute;\n left: -80px;\n top: 0;\n border-style: solid;\n border-color: transparent #e29663 transparent transparent;\n border-width: 17px 40px 18px;\n}\n\n.pencil:after {\n content: '';\n position: absolute;\n left: -80px;\n top: 0;\n border-style: solid;\n border-color: transparent #262626 transparent transparent;\n border-width: 17px 40px 18px;\n transform: scale(.3);\n}\n\n.top {\n position: absolute;\n top: 0;\n right: 0;\n height: 35px;\n width: 35px;\n background: #ccc;\n border-top: 10px solid #dedede;\n border-bottom: 10px solid #b9bfbf;\n}\n\n.top:before {\n content: '';\n position: absolute;\n top: -10px;\n right: -100%;\n width: 150%;\n height: 100%;\n background: #d76f6e;\n border-top: 10px solid #da8e8d;\n border-bottom: 10px solid #c85957;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n z-index: 2;\n}\n\n.stroke {\n position: absolute;\n top: 50%;\n left: calc(100% - 80px);\n transform: translate(-50%,-50%) rotate(45deg);\n border: 5px solid transparent;\n border-left-color: #000;\n border-top-color: #000;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n z-index: 1;\n}\n\n@keyframes animate {\n 0% {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n\n 100% {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n}"}

pink-octopus-20

👁 实时预览

📝 源代码