{"html":"

","css":"#content {\n width: 250px;\n height: 400px;\n box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n z-index: 1;\n display: flex;\n background-color: bisque;\n border-radius: 15px;\n}\n\n.blob {\n flex-shrink: 0;\n flex-basis: 1;\n width: 230px;\n height: 230px;\n position: relative;\n z-index: 2;\n border-radius: 50%;\n}\n\n.blob:nth-child(2) {\n top: -10px;\n left: -320px;\n background-color: #FFB84C;\n animation: wave 1.5s infinite alternate;\n animation-delay: 0s;\n}\n\n.blob:nth-child(3) {\n top: 0px;\n left: -360px;\n background-color: #F266AB;\n animation: wave 1.5s infinite alternate;\n animation-delay: 0.5s;\n}\n\n.blob:nth-child(4) {\n top: 180px;\n left: -750px;\n background-color: #A459D1;\n animation: wave 1.5s infinite alternate;\n animation-delay: 1s;\n}\n\n.blob:nth-child(5) {\n top: 230px;\n left: -820px;\n background-color: #2CD3E1;\n animation: wave 1.5s infinite alternate;\n animation-delay: 1.5s;\n}\n\n#blurer {\n position: relative;\n z-index: 5;\n width: 100%;\n height: 100%;\n backdrop-filter: blur(40px);\n flex-shrink: 0;\n flex-basis: 1;\n border-radius: 15px;\n}\n\n#article {\n position: relative;\n width: 90%;\n height: 93%;\n flex-shrink: 0;\n flex-basis: 1;\n background-color: rgba(255, 255, 255, 0.6);\n z-index: 10;\n justify-self: center;\n align-self: center;\n border-radius: 15px;\n left: -1157px;\n display: flex;\n justify-content: center;\n align-items: start;\n}\n\n@keyframes wave {\n 0% {\n transform: translateY(-30px);\n }\n\n 50% {\n transform: translateY(30px);\n }\n\n 100% {\n transform: translateY(-30px);\n }\n}\n\n#article h1 {\n padding: 20px 10px;\n color: #303030;\n font-size: 3em;\n font-family: 'Caveat', cursive;\n}"}

plastic-puma-91

👁 实时预览

📝 源代码