{"html":"\t\t\t\n\t

\n\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t

\n\t\t\t

\n\t\t

\n\t

","css":".piggy-wrapper {\n position: relative;\n width: 350px;\n height: 350px;\n display: block;\n margin: 0 auto;\n margin-top: 0px;\n}\n\n.piggy-wrap {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n transform-origin: bottom center;\n animation: trembling 5s linear infinite;\n}\n\n@keyframes trembling {\n 0% {\n transform: scale(1);\n }\n\n 19% {\n transform: scale(1);\n }\n\n 21% {\n transform: scale(0.99);\n }\n\n 22% {\n transform: scale(1);\n }\n\n 23% {\n transform: scale(0.99);\n }\n\n 24% {\n transform: scale(1);\n }\n\n 25% {\n transform: scale(0.99);\n }\n\n 26% {\n transform: scale(1);\n }\n\n 25% {\n transform: scale(0.99);\n }\n\n 26% {\n transform: scale(1);\n }\n\n 27% {\n transform: scale(0.99);\n }\n\n 28% {\n transform: scale(1);\n }\n\n 29% {\n transform: scale(0.99);\n }\n\n 30% {\n transform: scale(1);\n }\n\n 60% {\n transform: scale(0.95);\n }\n\n 61% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.piggy {\n position: absolute;\n bottom: 40px;\n left: 50%;\n margin-left: -160px;\n width: 270px;\n height: 200px;\n display: block;\n border-radius: 100px;\n background-color: #d88fa0;\n}\n\n.nose {\n position: absolute;\n top: 80px;\n left: -25px;\n width: 40px;\n height: 60px;\n display: block;\n background-color: #d88fa0;\n z-index: 1;\n border-radius: 4px;\n}\n\n.mouth {\n position: absolute;\n top: 95px;\n left: -15px;\n width: 0;\n height: 0;\n z-index: 8;\n display: block;\n border-bottom: 60px solid #d88fa0;\n border-left: 20px solid transparent;\n border-right: 20px solid transparent;\n border-radius: 4px;\n}\n\n.ear {\n position: absolute;\n top: -35px;\n left: 70px;\n width: 45px;\n height: 40px;\n display: block;\n border-top-right-radius: 60px;\n background-color: #d88fa0;\n z-index: 1;\n}\n\n.piggy:before {\n position: absolute;\n content: '';\n top: -25px;\n left: 55px;\n width: 60px;\n height: 60px;\n display: block;\n border-top-right-radius: 60px;\n background-color: #cb6980;\n z-index: -1;\n}\n\n.tail {\n position: absolute;\n left: 254px;\n top: 125px;\n}\n\n.tail span {\n position: absolute;\n left: 0;\n top: 0;\n width: 20px;\n height: 5px;\n transform: rotate(30deg);\n background-color: #d88fa0;\n}\n\n.tail span:nth-child(2) {\n left: 3px;\n top: -38px;\n width: 50px;\n height: 50px;\n transform: rotate(-20deg);\n background-color: transparent;\n border-radius: 50%;\n border-width: 5px;\n border-style: solid;\n border-color: transparent #d88fa0 #d88fa0 transparent;\n}\n\n.tail span:nth-child(3) {\n left: 22px;\n top: -36px;\n width: 30px;\n height: 30px;\n transform: rotate(-40deg);\n background-color: transparent;\n border-radius: 50%;\n border-width: 5px;\n border-style: solid;\n border-color: #d88fa0 transparent transparent #d88fa0;\n}\n\n.tail span:nth-child(4) {\n left: 7px;\n top: -66px;\n width: 60px;\n height: 60px;\n transform: rotate(-40deg);\n background-color: transparent;\n border-radius: 50%;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #d88fa0 transparent;\n}\n\n.eye {\n position: absolute;\n left: 35px;\n top: 75px;\n width: 30px;\n height: 30px;\n transform: rotate(45deg);\n border-radius: 50%;\n border-width: 4px;\n border-style: solid;\n border-color: #555 transparent transparent #555;\n animation: blink 5s linear infinite;\n}\n\n@keyframes blink {\n 0% {\n border-color: #555 transparent transparent #555;\n }\n\n 19% {\n border-color: #555 transparent transparent #555;\n }\n\n 20% {\n border-color: transparent #555 #555 transparent;\n }\n\n 60% {\n border-color: transparent #555 #555 transparent;\n }\n\n 61% {\n border-color: #555 transparent transparent #555;\n }\n\n 100% {\n border-color: #555 transparent transparent #555;\n }\n}\n\n.hole {\n position: absolute;\n left: 121px;\n top: 0;\n width: 60px;\n height: 5px;\n background-color: #555;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n\n.coin-wrap {\n position: absolute;\n top: 0;\n left: -8px;\n z-index: 9;\n width: 100%;\n height: 100%;\n opacity: 0;\n transform-origin: bottom center;\n animation: trembling 5s linear infinite, moveCoin 5s linear infinite;\n}\n\n.coin {\n position: absolute;\n top: 110px;\n left: 143px;\n z-index: 9;\n width: 61.5px;\n height: 61.5px;\n border-radius: 50%;\n border: 6px solid #e67e22;\n background-color: #f39c12;\n text-align: center;\n line-height: 68px;\n font-size: 45px;\n font-weight: 500;\n color: rgba(32,32,32,0.5);\n box-shadow: inset 0 0 4px #777;\n}\n\n@keyframes moveCoin {\n 0% {\n opacity: 0;\n top: 0;\n }\n\n 19% {\n opacity: 1;\n top: 0;\n }\n\n 21% {\n top: -7px;\n }\n\n 22% {\n top: -7px;\n }\n\n 23% {\n top: -14px;\n }\n\n 24% {\n top: -14px;\n }\n\n 25% {\n top: -21px;\n }\n\n 26% {\n top: -21px;\n }\n\n 27% {\n top: -28px;\n }\n\n 28% {\n top: -28px;\n }\n\n 29% {\n top: -35px;\n }\n\n 30% {\n top: -35px;\n }\n\n 60% {\n top: -35px;\n }\n\n 66% {\n top: -220px;\n opacity: 1;\n }\n\n 67% {\n top: -220px;\n opacity: 0;\n }\n\n 99% {\n top: 0;\n opacity: 0;\n }\n\n 100% {\n opacity: 0;\n top: 0;\n }\n}\n\n.legs {\n position: absolute;\n bottom: 14px;\n left: 96px;\n width: 40px;\n height: 60px;\n display: block;\n background-color: #cb6980;\n border-radius: 3px;\n z-index: 1;\n}\n\n.legs:after {\n position: absolute;\n content: '';\n bottom: 0;\n left: 0;\n width: 30px;\n height: 12px;\n display: block;\n background-color: #d88fa0;\n border-bottom-left-radius: 3px;\n border-top-right-radius: 3px;\n z-index: 1;\n}\n\n.legs.back {\n left: 206px;\n}"}

light-lion-86

👁 实时预览

📝 源代码