{"html":"

\n","css":".container {\n padding: 0;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.wave {\n padding: 0;\n margin: 0 auto;\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: flex-end;\n}\n.wave:nth-child(1) .bar {\n padding: 0;\n margin: 0 auto;\n box-sizing: border-box;\n width: 2px;\n height: 220px;\n background-color: #ccc;\n}\n.wave:nth-child(n + 2) .bar {\n padding: 0;\n margin: 0 auto;\n box-sizing: border-box;\n -webkit-animation:\n barHeight 3.9s infinite ease-in-out alternate,\n barSkew 3.9s infinite ease-in-out alternate;\n animation:\n barHeight 3.9s infinite ease-in-out alternate,\n barSkew 3.9s infinite ease-in-out alternate;\n}\n.wave .bar:nth-child(1) {\n -webkit-animation-delay: calc(var(--f) * 0), calc(var(--f) * 0 - 1.95s);\n animation-delay: calc(var(--f) * 0), calc(var(--f) * 0 - 1.95s);\n}\n.wave .bar:nth-child(2) {\n -webkit-animation-delay: calc(var(--f) * 1), calc(var(--f) * 1 - 1.95s);\n animation-delay: calc(var(--f) * 1), calc(var(--f) * 1 - 1.95s);\n}\n.wave .bar:nth-child(3) {\n -webkit-animation-delay: calc(var(--f) * 2), calc(var(--f) * 2 - 1.95s);\n animation-delay: calc(var(--f) * 2), calc(var(--f) * 2 - 1.95s);\n}\n.wave .bar:nth-child(4) {\n -webkit-animation-delay: calc(var(--f) * 3), calc(var(--f) * 3 - 1.95s);\n animation-delay: calc(var(--f) * 3), calc(var(--f) * 3 - 1.95s);\n}\n.wave .bar:nth-child(5) {\n -webkit-animation-delay: calc(var(--f) * 4), calc(var(--f) * 4 - 1.95s);\n animation-delay: calc(var(--f) * 4), calc(var(--f) * 4 - 1.95s);\n}\n.wave .bar:nth-child(6) {\n -webkit-animation-delay: calc(var(--f) * 5), calc(var(--f) * 5 - 1.95s);\n animation-delay: calc(var(--f) * 5), calc(var(--f) * 5 - 1.95s);\n}\n.wave .bar:nth-child(7) {\n -webkit-animation-delay: calc(var(--f) * 6), calc(var(--f) * 6 - 1.95s);\n animation-delay: calc(var(--f) * 6), calc(var(--f) * 6 - 1.95s);\n}\n.wave .bar:nth-child(8) {\n -webkit-animation-delay: calc(var(--f) * 7), calc(var(--f) * 7 - 1.95s);\n animation-delay: calc(var(--f) * 7), calc(var(--f) * 7 - 1.95s);\n}\n.wave .bar:nth-child(9) {\n -webkit-animation-delay: calc(var(--f) * 8), calc(var(--f) * 8 - 1.95s);\n animation-delay: calc(var(--f) * 8), calc(var(--f) * 8 - 1.95s);\n}\n.wave .bar:nth-child(10) {\n -webkit-animation-delay: calc(var(--f) * 9), calc(var(--f) * 9 - 1.95s);\n animation-delay: calc(var(--f) * 9), calc(var(--f) * 9 - 1.95s);\n}\n.wave .bar:nth-child(11) {\n -webkit-animation-delay: calc(var(--f) * 10), calc(var(--f) * 10 - 1.95s);\n animation-delay: calc(var(--f) * 10), calc(var(--f) * 10 - 1.95s);\n}\n.wave .bar:nth-child(12) {\n -webkit-animation-delay: calc(var(--f) * 11), calc(var(--f) * 11 - 1.95s);\n animation-delay: calc(var(--f) * 11), calc(var(--f) * 11 - 1.95s);\n}\n.wave .bar:nth-child(13) {\n -webkit-animation-delay: calc(var(--f) * 12), calc(var(--f) * 12 - 1.95s);\n animation-delay: calc(var(--f) * 12), calc(var(--f) * 12 - 1.95s);\n}\n.wave .bar:nth-child(14) {\n -webkit-animation-delay: calc(var(--f) * 13), calc(var(--f) * 13 - 1.95s);\n animation-delay: calc(var(--f) * 13), calc(var(--f) * 13 - 1.95s);\n}\n.wave .bar:nth-child(15) {\n -webkit-animation-delay: calc(var(--f) * 14), calc(var(--f) * 14 - 1.95s);\n animation-delay: calc(var(--f) * 14), calc(var(--f) * 14 - 1.95s);\n}\n.wave .bar:nth-child(16) {\n -webkit-animation-delay: calc(var(--f) * 15), calc(var(--f) * 15 - 1.95s);\n animation-delay: calc(var(--f) * 15), calc(var(--f) * 15 - 1.95s);\n}\n.wave .bar:nth-child(17) {\n -webkit-animation-delay: calc(var(--f) * 16), calc(var(--f) * 16 - 1.95s);\n animation-delay: calc(var(--f) * 16), calc(var(--f) * 16 - 1.95s);\n}\n.wave .bar:nth-child(18) {\n -webkit-animation-delay: calc(var(--f) * 17), calc(var(--f) * 17 - 1.95s);\n animation-delay: calc(var(--f) * 17), calc(var(--f) * 17 - 1.95s);\n}\n.wave .bar:nth-child(19) {\n -webkit-animation-delay: calc(var(--f) * 18), calc(var(--f) * 18 - 1.95s);\n animation-delay: calc(var(--f) * 18), calc(var(--f) * 18 - 1.95s);\n}\n.wave .bar:nth-child(20) {\n -webkit-animation-delay: calc(var(--f) * 19), calc(var(--f) * 19 - 1.95s);\n animation-delay: calc(var(--f) * 19), calc(var(--f) * 19 - 1.95s);\n}\n.wave .bar:nth-child(21) {\n -webkit-animation-delay: calc(var(--f) * 20), calc(var(--f) * 20 - 1.95s);\n animation-delay: calc(var(--f) * 20), calc(var(--f) * 20 - 1.95s);\n}\n.wave .bar:nth-child(22) {\n -webkit-animation-delay: calc(var(--f) * 21), calc(var(--f) * 21 - 1.95s);\n animation-delay: calc(var(--f) * 21), calc(var(--f) * 21 - 1.95s);\n}\n.wave .bar:nth-child(23) {\n -webkit-animation-delay: calc(var(--f) * 22), calc(var(--f) * 22 - 1.95s);\n animation-delay: calc(var(--f) * 22), calc(var(--f) * 22 - 1.95s);\n}\n.wave .bar:nth-child(24) {\n -webkit-animation-delay: calc(var(--f) * 23), calc(var(--f) * 23 - 1.95s);\n animation-delay: calc(var(--f) * 23), calc(var(--f) * 23 - 1.95s);\n}\n.wave[data-level=\"1\"] .bar {\n width: 11px;\n background-color: #fff;\n --f: -0.24375s;\n --h: 40px;\n}\n.wave[data-level=\"2\"] .bar {\n width: 8px;\n background-color: #eee;\n --f: -0.4875s;\n --h: 100px;\n}\n.wave[data-level=\"3\"] .bar {\n width: 5px;\n background-color: #ddd;\n --f: -0.325s;\n --h: 120px;\n}\n\n@-webkit-keyframes barHeight {\n from {\n height: var(--h);\n }\n to {\n height: calc(var(--h) + 50px);\n }\n}\n\n@keyframes barHeight {\n from {\n height: var(--h);\n }\n to {\n height: calc(var(--h) + 50px);\n }\n}\n@-webkit-keyframes barSkew {\n from {\n transform: skewY(30deg);\n }\n to {\n transform: skewY(-30deg);\n }\n}\n@keyframes barSkew {\n from {\n transform: skewY(30deg);\n }\n to {\n transform: skewY(-30deg);\n }\n}\n"}

short-badger-14

👁 实时预览

📝 源代码