{"html":"

\n \n

","css":".container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 5em;\n font-weight: 900;\n color: #e10600;\n position: relative;\n transition: all 1s ease;\n text-align: center;\n}\n\n.container__star {\n transition: all .7s ease-in-out;\n}\n\n.first {\n position: absolute;\n top: 20px;\n left: 50px;\n transition: all .7s ease-in-out;\n}\n\n.svg-icon {\n position: absolute;\n fill: #e94822;\n z-index: 1;\n}\n\n.star-eight {\n background: #efd510;\n width: 150px;\n height: 150px;\n position: relative;\n text-align: center;\n animation: rot 3s infinite;\n}\n\n.star-eight::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 150px;\n width: 150px;\n background: #efd510;\n transform: rotate(135deg);\n}\n\n.container:hover .container__star {\n transform: rotateX(70deg) translateY(250px);\n box-shadow: 0px 0px 120px -100px #e4e727;\n}\n\n.container:hover .svg-icon {\n animation: grow 1s linear infinite;\n}\n\n@keyframes rot {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(340deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes grow {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-5deg);\n }\n\n 75% {\n transform: rotate(5deg);\n }\n\n 100% {\n transform: scale(1) rotate(0deg);\n }\n}"}

wonderful-bobcat-57

👁 实时预览

📝 源代码