{"html":"

\n \n \n

\n \n \n \n \n

\n\n

\n \n

\n \n \n \n \n

\n \n

\n","css":"#checkbox {\n display: none;\n}\n\n.switch {\n position: relative;\n width: 70px;\n height: 70px;\n background-color: rgb(99, 99, 99);\n border-radius: 50%;\n z-index: 1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid rgb(126, 126, 126);\n box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;\n}\n.switch svg {\n width: 1.2em;\n}\n.switch svg path {\n fill: rgb(48, 48, 48);\n}\n#checkbox:checked + .switch {\n box-shadow:\n 0px 0px 1px rgb(151, 243, 255) inset,\n 0px 0px 2px rgb(151, 243, 255) inset,\n 0px 0px 10px rgb(151, 243, 255) inset,\n 0px 0px 40px rgb(151, 243, 255),\n 0px 0px 100px rgb(151, 243, 255),\n 0px 0px 5px rgb(151, 243, 255);\n border: 2px solid rgb(255, 255, 255);\n background-color: rgb(146, 180, 184);\n}\n#checkbox:checked + .switch svg {\n filter: drop-shadow(0px 0px 5px rgb(151, 243, 255));\n}\n#checkbox:checked + .switch svg path {\n fill: rgb(255, 255, 255);\n}\n\n/* The switch - the box around the speaker*/\n.switch {\n width: 50px;\n height: 50px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(39, 39, 39);\n border-radius: 50%;\n cursor: pointer;\n transition-duration: 0.3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);\n overflow: hidden;\n}\n\n/* Hide default HTML checkbox */\n#checkbox {\n display: none;\n}\n\n.bell {\n width: 18px;\n}\n\n.bell path {\n fill: white;\n}\n\n.speaker {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n transition-duration: 0.3s;\n}\n\n.speaker svg {\n width: 18px;\n}\n\n.mute-speaker {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n z-index: 3;\n transition-duration: 0.3s;\n}\n\n.mute-speaker svg {\n width: 18px;\n}\n\n#checkbox:checked + .switch .speaker {\n opacity: 0;\n transition-duration: 0.3s;\n}\n\n#checkbox:checked + .switch .mute-speaker {\n opacity: 1;\n transition-duration: 0.3s;\n}\n\n#checkbox:active + .switch {\n transform: scale(0.7);\n}\n\n.card {\n width: min(300px, 100%);\n margin: auto;\n background-color: #ffffff;\n text-align: center;\n border-top-left-radius: 4rem;\n border-top-right-radius: 4rem;\n border: 2px solid #fff;\n position: relative;\n}\n\n.card__body {\n padding: 2rem 1.5rem;\n max-width: 25ch;\n margin: auto;\n}\n\n.card__title {\n font-weight: 800;\n color: #121513;\n font-size: 1.25rem;\n margin-block: 1.5rem 0.75rem;\n}\n\n.card__paragraph {\n color: #303830;\n font-size: 0.875rem;\n}\n\n.card__ribbon {\n margin-top: 1.5rem;\n display: grid;\n place-items: center;\n height: 50px;\n background-color: #393e7f;\n position: relative;\n width: 110%;\n left: -5%;\n top: 10px;\n position: relative;\n border-radius: 0 0 2rem 2rem;\n}\n\n.card__ribbon::after,\n.card__ribbon::before {\n content: \"\";\n position: absolute;\n width: 20px;\n aspect-ratio: 1/1;\n bottom: 100%;\n z-index: -2;\n background-color: #191c39;\n}\n\n.card__ribbon::before {\n left: 0;\n transform-origin: left bottom;\n transform: rotate(45deg);\n}\n\n.card__ribbon::after {\n right: 0;\n transform-origin: right bottom;\n transform: rotate(-45deg);\n}\n\n.card__ribbon-label {\n display: block;\n width: 84px;\n aspect-ratio: 1/1;\n background-color: #fff;\n position: relative;\n transform: translateY(-50%);\n border-radius: 50%;\n border: 8px solid #393e7f;\n display: grid;\n place-items: center;\n font-weight: 900;\n line-height: 1;\n font-size: 1.5rem;\n}\n\n.card__ribbon-label::before,\n.card__ribbon-label::after {\n content: \"\";\n position: absolute;\n width: 25px;\n height: 25px;\n bottom: 50%;\n}\n\n.card__ribbon-label::before {\n right: calc(100% + 4px);\n border-bottom-right-radius: 20px;\n box-shadow: 5px 5px 0 #393e7f;\n}\n\n.card__ribbon-label::after {\n left: calc(100% + 4px);\n border-bottom-left-radius: 20px;\n box-shadow: -5px 5px 0 #393e7f;\n}\n\n.container {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n height: 70px;\n width: 70px;\n animation: rotate_3922 1.2s linear infinite;\n background-color: #9b59b6;\n background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);\n}\n\n.container span {\n position: absolute;\n border-radius: 50%;\n background-color: #9b59b6;\n background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);\n}\n.container span:nth-of-type(1) {\n filter: blur(5px);\n}\n.container span:nth-of-type(2) {\n filter: blur(10px);\n}\n.container span:nth-of-type(3) {\n filter: blur(25px);\n}\n.container span:nth-of-type(4) {\n filter: blur(50px);\n}\n.container::after {\n content: \"\";\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n bottom: 10px;\n background-color: #fff;\n border: solid 5px #ffffff;\n border-radius: 50%;\n}\n\n@keyframes rotate_3922 {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n"}

gentle-fly-10

👁 实时预览

📝 源代码