{"html":"

Loading . . .

","css":".eye {\n width: 20px;\n height: 8px;\n background-color: rgba(240,220,220,1);\n border-radius: 0px 0px 20px 20px;\n position: relative;\n left: 10px;\n top: 40px;\n box-shadow: 40px 0px 0px 0px rgba(240,220,220,1);\n}\n\n.head {\n backface-visibility: hidden;\n position: relative;\n margin: -250px auto;\n width: 80px;\n height: 80px;\n background-color: #111;\n border-radius: 50px;\n box-shadow: inset -4px 2px 0px 0px rgba(240,220,220,1);\n animation: headAnim 1.5s infinite alternate;\n animation-timing-function: ease-out;\n}\n\n.body {\n position: relative;\n margin: 90px auto;\n width: 140px;\n height: 120px;\n background-color: #111;\n border-radius: 50px/25px;\n box-shadow: inset -5px 2px 0px 0px rgba(240,220,220,1);\n animation: bodyAnim 1.5s infinite alternate;\n animation-timing-function: ease-out;\n}\n\n@keyframes headAnim {\n 0% {\n top: 0px;\n }\n\n 50% {\n top: 10px;\n }\n\n 100% {\n top: 0px;\n }\n}\n\n@keyframes bodyAnim {\n 0% {\n top: -5px;\n }\n\n 50% {\n top: 10px;\n }\n\n 100% {\n top: -5px;\n }\n}\n\n.circ {\n backface-visibility: hidden;\n margin: 60px auto;\n width: 180px;\n height: 180px;\n border-radius: 0px 0px 50px 50px;\n position: relative;\n z-index: -1;\n left: 0%;\n top: 20%;\n overflow: hidden;\n}\n\n.hands {\n margin-top: 140px;\n width: 120px;\n height: 120px;\n position: absolute;\n background-color: #111;\n border-radius: 20px;\n box-shadow: -1px -4px 0px 0px rgba(240,220,220,1);\n transform: rotate(45deg);\n top: 75%;\n left: 16%;\n z-index: 1;\n animation: bodyAnim 1.5s infinite alternate;\n animation-timing-function: ease-out;\n}\n\n.load {\n position: absolute;\n width: 7ch;\n height: 32px;\n text-align: left;\n line-height: 32px;\n margin: -10px auto;\n font-family: 'Julius Sans One', sans-serif;\n font-size: 28px;\n font-weight: 400;\n color: rgb(155, 152, 152);\n left: 2%;\n top: 5%;\n animation: fontAnim 3.75s infinite;\n animation-timing-function: ease-out;\n word-wrap: break-word;\n display: block;\n overflow: hidden;\n}\n\n@keyframes fontAnim {\n 0% {\n width: 7ch;\n }\n\n 16% {\n width: 8ch;\n }\n\n 32% {\n width: 9ch;\n }\n\n 48% {\n width: 10ch;\n }\n\n 64% {\n width: 11ch;\n }\n\n 80% {\n width: 12ch;\n }\n\n 100% {\n width: 13ch;\n }\n}"}

chatty-bird-86

👁 实时预览

📝 源代码