{"html":"

\n","css":".flower {\n width: 300px;\n height: 300px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.petal {\n position: absolute;\n width: 35px;\n height: 60px;\n background: linear-gradient(180deg, #fcdbdf, #fd688d);\n border-radius: 50%;\n}\n\n.petal1 {\n transform: rotate(0deg) translateY(-50%);\n animation-delay: 0.1s;\n}\n\n.petal2 {\n transform: rotate(45deg) translateY(-50%);\n animation-delay: 0.2s;\n}\n\n.petal3 {\n transform: rotate(90deg) translateY(-50%);\n animation-delay: 0.3s;\n}\n\n.petal4 {\n transform: rotate(135deg) translateY(-50%);\n animation-delay: 0.4s;\n}\n\n.petal5 {\n transform: rotate(180deg) translateY(-50%);\n animation-delay: 0.5s;\n}\n\n.petal6 {\n transform: rotate(225deg) translateY(-50%);\n animation-delay: 0.6s;\n}\n\n.petal7 {\n transform: rotate(270deg) translateY(-50%);\n animation-delay: 0.7s;\n}\n\n.petal8 {\n transform: rotate(315deg) translateY(-50%);\n animation-delay: 0.8s;\n}\n\n.center {\n position: absolute;\n width: 30px;\n height: 30px;\n background-color: #f1d2d2;\n border-radius: 50%;\n}\n\n.flower:hover .petal {\n animation-name: changeColor;\n animation-duration: 8s;\n animation-direction: reverse;\n animation-iteration-count: infinite;\n}\n\n.flower:hover {\n animation-name: rotateFlower;\n animation-duration: 8s;\n animation-iteration-count: infinite;\n animation-timing-function: ease;\n}\n\n@keyframes changeColor {\n 0% {\n background: linear-gradient(180deg, #fcdbdf, #fd688d);\n }\n 25% {\n background: linear-gradient(180deg, #fcd2e3, #fa6094);\n }\n 50% {\n background: linear-gradient(180deg, #fabefc, #c34ec7);\n }\n 75% {\n background: linear-gradient(180deg, #f7d6d6, #fd6a6a);\n }\n 100% {\n background: linear-gradient(180deg, #fcd3fc, #e844f7);\n }\n}\n\n@keyframes rotateFlower {\n 0% {\n transform: scale(1) rotate(0deg);\n }\n 50% {\n transform: scale(1.5) rotate(360deg);\n }\n 100% {\n transform: scale(1) rotate(0deg);\n }\n}\n"}

polite-sloth-94

👁 实时预览

📝 源代码