{"html":"

\n","css":".book,\n.book__pg-shadow,\n.book__pg {\n animation: cover 5s ease-in-out infinite;\n}\n.book {\n background-color: hsl(268, 90%, 65%);\n border-radius: 0.25em;\n box-shadow:\n 0 0.25em 0.5em hsla(0, 0%, 0%, 0.3),\n 0 0 0 0.25em hsl(278, 100%, 57%) inset;\n padding: 0.25em;\n perspective: 37.5em;\n position: relative;\n width: 8em;\n height: 6em;\n transform: translate3d(0, 0, 0);\n transform-style: preserve-3d;\n}\n.book__pg-shadow,\n.book__pg {\n position: absolute;\n left: 0.25em;\n width: calc(50% - 0.25em);\n}\n.book__pg-shadow {\n animation-name: shadow;\n background-image: linear-gradient(\n -45deg,\n hsla(0, 0%, 0%, 0) 50%,\n hsla(0, 0%, 0%, 0.3) 50%\n );\n filter: blur(0.25em);\n top: calc(100% - 0.25em);\n height: 3.75em;\n transform: scaleY(0);\n transform-origin: 100% 0%;\n}\n.book__pg {\n animation-name: pg1;\n background-color: hsl(223, 10%, 100%);\n background-image: linear-gradient(\n 90deg,\n hsla(223, 10%, 90%, 0) 87.5%,\n hsl(223, 10%, 90%)\n );\n height: calc(100% - 0.5em);\n transform-origin: 100% 50%;\n}\n.book__pg--2,\n.book__pg--3,\n.book__pg--4 {\n background-image: repeating-linear-gradient(\n hsl(223, 10%, 10%) 0 0.125em,\n hsla(223, 10%, 10%, 0) 0.125em 0.5em\n ),\n linear-gradient(90deg, hsla(223, 10%, 90%, 0) 87.5%, hsl(223, 10%, 90%));\n background-repeat: no-repeat;\n background-position: center;\n background-size:\n 2.5em 4.125em,\n 100% 100%;\n}\n.book__pg--2 {\n animation-name: pg2;\n}\n.book__pg--3 {\n animation-name: pg3;\n}\n.book__pg--4 {\n animation-name: pg4;\n}\n.book__pg--5 {\n animation-name: pg5;\n}\n\n/* Dark theme */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(223, 10%, 30%);\n --fg: hsl(223, 10%, 90%);\n }\n}\n\n/* Animations */\n@keyframes cover {\n from,\n 5%,\n 45%,\n 55%,\n 95%,\n to {\n animation-timing-function: ease-out;\n background-color: hsl(278, 84%, 67%);\n }\n 10%,\n 40%,\n 60%,\n 90% {\n animation-timing-function: ease-in;\n background-color: hsl(271, 90%, 45%);\n }\n}\n@keyframes shadow {\n from,\n 10.01%,\n 20.01%,\n 30.01%,\n 40.01% {\n animation-timing-function: ease-in;\n transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);\n }\n 5%,\n 15%,\n 25%,\n 35%,\n 45%,\n 55%,\n 65%,\n 75%,\n 85%,\n 95% {\n animation-timing-function: ease-out;\n transform: translate3d(0, 0, 1px) scaleY(0.2) rotateY(90deg);\n }\n 10%,\n 20%,\n 30%,\n 40%,\n 50%,\n to {\n animation-timing-function: ease-out;\n transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);\n }\n 50.01%,\n 60.01%,\n 70.01%,\n 80.01%,\n 90.01% {\n animation-timing-function: ease-in;\n transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);\n }\n 60%,\n 70%,\n 80%,\n 90%,\n to {\n animation-timing-function: ease-out;\n transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);\n }\n}\n@keyframes pg1 {\n from,\n to {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0.4deg);\n }\n 10%,\n 15% {\n animation-timing-function: ease-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(180deg);\n }\n 20%,\n 80% {\n animation-timing-function: ease-in;\n background-color: hsl(223, 10%, 45%);\n transform: translate3d(0, 0, 1px) rotateY(180deg);\n }\n 85%,\n 90% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(180deg);\n }\n}\n@keyframes pg2 {\n from,\n to {\n animation-timing-function: ease-in;\n background-color: hsl(223, 10%, 45%);\n transform: translate3d(0, 0, 1px) rotateY(0.3deg);\n }\n 5%,\n 10% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0.3deg);\n }\n 20%,\n 25% {\n animation-timing-function: ease-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(179.9deg);\n }\n 30%,\n 70% {\n animation-timing-function: ease-in;\n background-color: hsl(223, 10%, 45%);\n transform: translate3d(0, 0, 1px) rotateY(179.9deg);\n }\n 75%,\n 80% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(179.9deg);\n }\n 90%,\n 95% {\n animation-timing-function: ease-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0.3deg);\n }\n}\n@keyframes pg3 {\n from,\n 10%,\n 90%,\n to {\n animation-timing-function: ease-in;\n background-color: hsl(223, 10%, 45%);\n transform: translate3d(0, 0, 1px) rotateY(0.2deg);\n }\n 15%,\n 20% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0.2deg);\n }\n 30%,\n 35% {\n animation-timing-function: ease-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(179.8deg);\n }\n 40%,\n 60% {\n animation-timing-function: ease-in;\n background-color: hsl(223, 10%, 45%);\n transform: translate3d(0, 0, 1px) rotateY(179.8deg);\n }\n 65%,\n 70% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(179.8deg);\n }\n 80%,\n 85% {\n animation-timing-function: ease-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0.2deg);\n }\n}\n@keyframes pg4 {\n from,\n 20%,\n 80%,\n to {\n animation-timing-function: ease-in;\n background-color: hsl(223, 10%, 45%);\n transform: translate3d(0, 0, 1px) rotateY(0.1deg);\n }\n 25%,\n 30% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0.1deg);\n }\n 40%,\n 45% {\n animation-timing-function: ease-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(179.7deg);\n }\n 50% {\n animation-timing-function: ease-in;\n background-color: hsl(223, 10%, 45%);\n transform: translate3d(0, 0, 1px) rotateY(179.7deg);\n }\n 55%,\n 60% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(179.7deg);\n }\n 70%,\n 75% {\n animation-timing-function: ease-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0.1deg);\n }\n}\n@keyframes pg5 {\n from,\n 30%,\n 70%,\n to {\n animation-timing-function: ease-in;\n background-color: hsl(223, 10%, 45%);\n transform: translate3d(0, 0, 1px) rotateY(0);\n }\n 35%,\n 40% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0deg);\n }\n 50% {\n animation-timing-function: ease-in-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(179.6deg);\n }\n 60%,\n 65% {\n animation-timing-function: ease-out;\n background-color: hsl(223, 10%, 100%);\n transform: translate3d(0, 0, 1px) rotateY(0);\n }\n}\n"}

hungry-squid-53

👁 实时预览

📝 源代码