{"html":"\n","css":"button {\n position: relative;\n padding: 12px 35px;\n background: #fec195;\n font-size: 17px;\n font-weight: 500;\n color: #181818;\n border: 3px solid #fec195;\n border-radius: 8px;\n box-shadow: 0 0 0 #fec1958c;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.star-1 {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);\n}\n\n.star-2 {\n position: absolute;\n top: 45%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-3 {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-4 {\n position: absolute;\n top: 20%;\n left: 40%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-5 {\n position: absolute;\n top: 25%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-6 {\n position: absolute;\n top: 5%;\n left: 50%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s ease;\n}\n\nbutton:hover {\n background: transparent;\n color: #fec195;\n box-shadow: 0 0 25px #fec1958c;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -80%;\n left: -30%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: -25%;\n left: 10%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-3 {\n position: absolute;\n top: 55%;\n left: 25%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: 30%;\n left: 80%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 25%;\n left: 115%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 5%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\n.fil0 {\n fill: #fffdef;\n}\n"}

silent-lizard-44

👁 实时预览

📝 源代码

🔗 相关联的样式