{"html":"

\n","css":".container {\n height: 350px;\n width: 350px;\n -webkit-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n.roller {\n height: 45px;\n width: 150px;\n border: 5px solid #040e15;\n border-radius: 7px;\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n color-stop(0, #ffc111),\n color-stop(80%, #ffca3e),\n color-stop(80%, #fc8f2e)\n );\n background-image: -o-linear-gradient(\n top,\n #ffca3e 0,\n #ffca3e 80%,\n #fc8f2e 80%\n );\n background-image: linear-gradient(\n to bottom,\n #ffca3e 0,\n #ffca3e 80%,\n #fc8f2e 80%\n );\n position: absolute;\n margin: auto;\n left: 0;\n right: 0;\n top: 0;\n -webkit-animation: roller 2s infinite;\n animation: roller 2s infinite;\n}\n@-webkit-keyframes roller {\n 40% {\n top: 165px;\n }\n}\n@keyframes roller {\n 40% {\n top: 165px;\n }\n}\n.roller:before {\n position: absolute;\n content: \"\";\n background-color: rgba(255, 255, 255, 0.7);\n height: 7px;\n width: 75px;\n top: 8px;\n left: 8px;\n border-radius: 10px;\n}\n.roller:after {\n position: absolute;\n content: \"\";\n height: 40px;\n width: 85px;\n border: 7px solid #040e15;\n border-left: none;\n right: -20px;\n top: 20px;\n z-index: -1;\n border-radius: 7px;\n}\n.handle {\n height: 30px;\n width: 7px;\n background-color: #040e15;\n position: absolute;\n top: 68px;\n right: 65px;\n}\n.handle:after {\n position: absolute;\n content: \"\";\n height: 75px;\n width: 25px;\n background-color: #040e15;\n bottom: -75px;\n right: -8px;\n border-radius: 5px;\n}\n.paint {\n background-color: #ffca3e;\n height: 0;\n width: 130px;\n position: absolute;\n margin: auto;\n left: 0;\n right: 0;\n z-index: -1;\n -webkit-animation: paint 2s infinite;\n animation: paint 2s infinite;\n}\n@-webkit-keyframes paint {\n 40% {\n height: 165px;\n }\n}\n@keyframes paint {\n 40% {\n height: 165px;\n }\n}\n.roller {\n height: 45px;\n width: 150px;\n border: 5px solid #040e15;\n border-radius: 7px;\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n color-stop(0, #fc8f2e),\n /* Cor laranja clara */ color-stop(80%, #fc8f2e),\n /* Cor laranja */ color-stop(80%, #e86f1a) /* Cor laranja escura */\n );\n background-image: -o-linear-gradient(\n top,\n #fc8f2e 0,\n #fc8f2e 80%,\n #e86f1a 80%\n );\n background-image: linear-gradient(\n to bottom,\n #fc8f2e 0,\n #fc8f2e 80%,\n #e86f1a 80%\n );\n position: absolute;\n margin: auto;\n left: 0;\n right: 0;\n top: 0;\n -webkit-animation: roller 2s infinite;\n animation: roller 2s infinite;\n}\n\n.paint {\n background-color: #fc8f2e;\n height: 0;\n width: 130px;\n position: absolute;\n margin: auto;\n left: 0;\n right: 0;\n z-index: -1;\n -webkit-animation: paint 2s infinite;\n animation: paint 2s infinite;\n}\n"}

jolly-dodo-24

👁 实时预览

📝 源代码