{"html":"

\n \n

\n
\n
\n

\n","css":".content {\n width: 50vmin;\n height: 50vmin;\n background: #fff0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.pill {\n background: #fff0;\n width: 15vmin;\n height: 40vmin;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n transform: rotate(180deg);\n animation: spin 4s linear 0s infinite;\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(-540deg);\n }\n}\n\n.pill .side {\n background: #f7c340;\n position: relative;\n overflow: hidden;\n width: 11vmin;\n height: 15vmin;\n border-radius: 6vmin 6vmin 0 0;\n}\n\n.pill .side + .side {\n background: #d9680c;\n border-radius: 0 0 6vmin 6vmin;\n border-top: 1vmin solid #621e1a;\n animation: open 2s ease-in-out 0s infinite;\n}\n\n@keyframes open {\n 0%,\n 20%,\n 80%,\n 100% {\n margin-top: 0;\n }\n 30%,\n 70% {\n margin-top: 10vmin;\n }\n}\n\n.pill .side:before {\n content: \"\";\n position: absolute;\n width: 2vmin;\n height: 10vmin;\n bottom: 0;\n right: 1.5vmin;\n background: #fff2;\n border-radius: 1vmin 1vmin 0 0;\n animation: shine 1s ease-out -1s infinite alternate-reverse;\n}\n\n.pill .side + .side:before {\n bottom: inherit;\n top: 0;\n border-radius: 0 0 1vmin 1vmin;\n}\n\n.pill .side:after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n left: 0;\n border-radius: 6vmin 6vmin 0 0;\n border: 1.75vmin solid #00000022;\n border-bottom-color: #fff0;\n border-bottom-width: 0vmin;\n border-top-width: 1vmin;\n animation: shadow 1s ease -1s infinite alternate-reverse;\n}\n\n.pill .side + .side:after {\n bottom: inherit;\n top: 0;\n border-radius: 0 0 6vmin 6vmin;\n border-top-color: #fff0;\n border-top-width: 0vmin;\n border-bottom-width: 1vmin;\n}\n\n@keyframes shine {\n 0%,\n 46% {\n right: 1.5vmin;\n }\n 54%,\n 100% {\n right: 7.5vmin;\n }\n}\n\n@keyframes shadow {\n 0%,\n 49.999% {\n transform: rotateY(0deg);\n left: 0;\n }\n 50%,\n 100% {\n transform: rotateY(180deg);\n left: -3vmin;\n }\n}\n\n.medicine {\n position: absolute;\n width: calc(100% - 6vmin);\n height: calc(100% - 12vmin);\n background: #fff0;\n border-radius: 5vmin;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.medicine i {\n width: 1vmin;\n height: 1vmin;\n background: #47c;\n border-radius: 100%;\n position: absolute;\n animation: medicine-dust 1.75s ease 0s infinite alternate;\n}\n\n.medicine i:nth-child(2n + 2) {\n width: 1.5vmin;\n height: 1.5vmin;\n margin-top: -5vmin;\n margin-right: -5vmin;\n animation-delay: -0.2s;\n}\n\n.medicine i:nth-child(3n + 3) {\n width: 2vmin;\n height: 2vmin;\n margin-top: 4vmin;\n margin-right: 3vmin;\n animation-delay: -0.33s;\n}\n\n.medicine i:nth-child(4) {\n margin-top: -5vmin;\n margin-right: 4vmin;\n animation-delay: -0.4s;\n}\n\n.medicine i:nth-child(5) {\n margin-top: 5vmin;\n margin-right: -4vmin;\n animation-delay: -0.5s;\n}\n\n.medicine i:nth-child(6) {\n margin-top: 0vmin;\n margin-right: -3.5vmin;\n animation-delay: -0.66s;\n}\n\n.medicine i:nth-child(7) {\n margin-top: -1vmin;\n margin-right: 7vmin;\n animation-delay: -0.7s;\n}\n\n.medicine i:nth-child(8) {\n margin-top: 6vmin;\n margin-right: -1vmin;\n animation-delay: -0.8s;\n}\n\n.medicine i:nth-child(9) {\n margin-top: 4vmin;\n margin-right: -7vmin;\n animation-delay: -0.99s;\n}\n\n.medicine i:nth-child(10) {\n margin-top: -6vmin;\n margin-right: 0vmin;\n animation-delay: -1.11s;\n}\n\n.medicine i:nth-child(1n + 10) {\n width: 0.6vmin;\n height: 0.6vmin;\n}\n\n.medicine i:nth-child(11) {\n margin-top: 6vmin;\n margin-right: 6vmin;\n animation-delay: -1.125s;\n}\n\n.medicine i:nth-child(12) {\n margin-top: -7vmin;\n margin-right: -7vmin;\n animation-delay: -1.275s;\n}\n\n.medicine i:nth-child(13) {\n margin-top: -1vmin;\n margin-right: 3vmin;\n animation-delay: -1.33s;\n}\n\n.medicine i:nth-child(14) {\n margin-top: -3vmin;\n margin-right: -1vmin;\n animation-delay: -1.4s;\n}\n\n.medicine i:nth-child(15) {\n margin-top: -1vmin;\n margin-right: -7vmin;\n animation-delay: -1.55s;\n}\n\n@keyframes medicine-dust {\n 0%,\n 100% {\n transform: translate3d(0vmin, 0vmin, -0.1vmin);\n }\n 25% {\n transform: translate3d(0.25vmin, 5vmin, 0vmin);\n }\n 75% {\n transform: translate3d(-0.1vmin, -4vmin, 0.25vmin);\n }\n}\n"}

happy-cat-22

👁 实时预览

📝 源代码