{"html":"

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 5px;\n background: lightblue;\n border: 2px solid rgb(49, 161, 198);\n}\n\n.wave {\n transform: translate(0,161px);\n}\n\n.sun {\n transform: translate(-45px, -143px);\n}\n\n.sun-shadow {\n position: absolute;\n width: 190px;\n height: 190px;\n display: flex;\n justify-content: center;\n transform: rotate(-90deg) translate(253px,0);\n border-radius: 10px;\n background: linear-gradient(90deg, rgba(156,224,254,0) 0%, rgba(87,201,251,0) 33%, rgba(250,251,87,0.11545868347338939) 65%, rgba(149,140,0,0.23030462184873945) 100%);\n}\n\n.sun-ring {\n width: 5px;\n height: 20px;\n position: absolute;\n background-color: rgb(249, 215, 46);\n border-radius: 5px;\n}\n\n.sun-ring-container {\n transform: translate(48px,-217px);\n}\n\n.sun-ring:nth-child(1) {\n transform: translate(0,40px);\n}\n\n.sun-ring:nth-child(2) {\n transform: translate(25px,32px) rotate(-35deg);\n}\n\n.sun-ring:nth-child(3) {\n transform: translate(40px,5px) rotate(-80deg);\n}\n\n.sun-ring:nth-child(4) {\n transform: translate(37px,-25px) rotate(-120deg);\n}\n\n.sun-ring:nth-child(5) {\n transform: translate(-25px,34px) rotate(35deg);\n}\n\n.sun-ring:nth-child(6) {\n transform: translate(-38px,13px) rotate(75deg) scaleY(0.7);\n}\n\n.sun-ring:nth-child(7) {\n transform: translate(-38px,-17px) rotate(110deg) scaleY(0.7);\n}\n\n.sun-ring:nth-child(8) {\n transform: translate(-20px,-35px) rotate(160deg) scaleY(0.7);\n}\n\n.sun-ring:nth-child(9) {\n transform: translate(10px,-37px) rotate(195deg) scaleY(0.51);\n}"}

pretty-walrus-13

👁 实时预览

📝 源代码