{"html":"

\n","css":".candle-wrapper {\n display: flex;\n justify-content: center;\n padding: 20px;\n background: #00000000;\n}\n\n.candle-chart {\n display: flex;\n align-items: flex-end;\n height: 80px;\n gap: 4px;\n}\n\n.candle {\n width: 6px;\n height: 110%;\n position: relative;\n animation: fade 2.6s infinite ease-in-out;\n filter: drop-shadow(0 0 2.7px #ffff);\n}\n\n.candle::after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n background: #ffff;\n border: 1px solid #ffff;\n bottom: var(--b);\n height: var(--h);\n}\n\n.candle::before {\n content: \"\";\n position: absolute;\n left: 63%;\n transform: translateX(-50%);\n width: 1px;\n background: #ffff;\n bottom: var(--wb);\n height: var(--wh);\n}\n\n.candle:nth-child(1) {\n --b: 7.1%;\n --h: 18.93%;\n --wb: 0%;\n --wh: 31.95%;\n animation-delay: 0s;\n}\n.candle:nth-child(2) {\n --b: 26.04%;\n --h: 2.37%;\n --wb: 19.41%;\n --wh: 14.91%;\n animation-delay: 0.065s;\n}\n.candle:nth-child(3) {\n --b: 28.64%;\n --h: 4.5%;\n --wb: 16.92%;\n --wh: 21.66%;\n animation-delay: 0.13s;\n}\n.candle:nth-child(4) {\n --b: 31.42%;\n --h: 3.43%;\n --wb: 19.76%;\n --wh: 27.93%;\n animation-delay: 0.195s;\n}\n.candle:nth-child(5) {\n --b: 31.42%;\n --h: 15.44%;\n --wb: 27.43%;\n --wh: 28.07%;\n animation-delay: 0.26s;\n}\n.candle:nth-child(6) {\n --b: 46.54%;\n --h: 0.28%;\n --wb: 43.43%;\n --wh: 24.38%;\n animation-delay: 0.325s;\n}\n.candle:nth-child(7) {\n --b: 35.86%;\n --h: 8.7%;\n --wb: 29.7%;\n --wh: 24.5%;\n animation-delay: 0.39s;\n}\n.candle:nth-child(8) {\n --b: 11.67%;\n --h: 24.19%;\n --wb: 5.33%;\n --wh: 31.83%;\n animation-delay: 0.455s;\n}\n.candle:nth-child(9) {\n --b: 11.83%;\n --h: 15.1%;\n --wb: 7.93%;\n --wh: 24.97%;\n animation-delay: 0.52s;\n}\n.candle:nth-child(10) {\n --b: 27.81%;\n --h: 12.04%;\n --wb: 27.69%;\n --wh: 28.17%;\n animation-delay: 0.585s;\n}\n.candle:nth-child(11) {\n --b: 39.85%;\n --h: 28.25%;\n --wb: 39.53%;\n --wh: 28.58%;\n animation-delay: 0.65s;\n}\n.candle:nth-child(12) {\n --b: 70.8%;\n --h: 6.27%;\n --wb: 60.96%;\n --wh: 24.84%;\n animation-delay: 0.715s;\n}\n.candle:nth-child(13) {\n --b: 75.8%;\n --h: 2.71%;\n --wb: 68.38%;\n --wh: 31.62%;\n animation-delay: 0.78s;\n}\n.candle:nth-child(14) {\n --b: 67.23%;\n --h: 8.71%;\n --wb: 64.8%;\n --wh: 24.97%;\n animation-delay: 0.845s;\n}\n.candle:nth-child(15) {\n --b: 67.81%;\n --h: 7.85%;\n --wb: 57.54%;\n --wh: 27.55%;\n animation-delay: 0.91s;\n}\n.candle:nth-child(16) {\n --b: 70.08%;\n --h: 6.14%;\n --wb: 55.68%;\n --wh: 21.83%;\n animation-delay: 0.975s;\n}\n.candle:nth-child(17) {\n --b: 66.39%;\n --h: 3.69%;\n --wb: 58.11%;\n --wh: 26.11%;\n animation-delay: 1.04s;\n}\n.candle:nth-child(18) {\n --b: 64.8%;\n --h: 9.78%;\n --wb: 45.47%;\n --wh: 29.61%;\n animation-delay: 1.105s;\n}\n\n@keyframes fade {\n 0% {\n opacity: 0;\n transform: scaleY(0);\n }\n 10% {\n opacity: 1;\n transform: scaleY(1.5);\n }\n 50% {\n opacity: 1;\n transform: scaleY(1.35);\n }\n 70% {\n opacity: 0;\n transform: scaleY(1.5);\n }\n 100% {\n opacity: 0;\n transform: scaleY(0);\n }\n}\n\n/* IG: @bilalbstn7 */\n"}

new-moose-50

👁 实时预览

📝 源代码