div+css实现能量金字塔动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现能量金字塔动画效果代码,能量体上升产生动画,黑色大气。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --background-color: #191919; --main-color: #fff; --main-color-semitransparent: rgba(255, 255, 255, 0.5); --canvas-size: 68vmin; --canvas-max-size: 500px; --animation-duration: 1200ms; --animation-delay: 120ms; } body { margin: 0; display: grid; place-items: center; min-height: 100vh; background-color: var(--background-color); } .canvas { width: var(--canvas-size); height: var(--canvas-size); max-width: var(--canvas-max-size); max-height: var(--canvas-max-size); display: flex; gap: 3%; position: relative; } .energy-bar { width: 2%; height: 100%; position: relative; overflow: hidden; border-radius: 20px; background: linear-gradient(var(--main-color), transparent); } .energy-bar::before { content: ""; height: 5%; width: 100%; position: absolute; background: linear-gradient(transparent, var(--main-color), transparent); filter: blur(2px); animation: deatail-animation var(--animation-duration) linear infinite; } @keyframes deatail-animation { 0% { transform: translateY(2000%); } 100% { transform: translateY(-100%); } } .energy-bar:nth-child(1), .energy-bar:nth-child(21) { height: 95%; opacity: 0.05; } .energy-bar:nth-child(2), .energy-bar:nth-child(20) { height: 95%; opacity: 0.1; } .energy-bar:nth-child(3), .energy-bar:nth-child(19) { height: 90%; opacity: 0.2; } .energy-bar:nth-child(4), .energy-bar:nth-child(18) { height: 85%; opacity: 0.3; } .energy-bar:nth-child(5), .energy-bar:nth-child(17) { height: 80%; opacity: 0.4; } .energy-bar:nth-child(6), .energy-bar:nth-child(16) { height: 75%; opacity: 0.5; } .energy-bar:nth-child(7), .energy-bar:nth-child(15) { height: 70%; opacity: 0.6; } .energy-bar:nth-child(8), .energy-bar:nth-child(14) { height: 65%; opacity: 0.7; } .energy-bar:nth-child(9), .energy-bar:nth-child(13) { height: 60%; opacity: 0.8; } .energy-bar:nth-child(10), .energy-bar:nth-child(12) { height: 55%; opacity: 0.9; } .energy-bar:nth-child(11) { height: 50%; } .energy-bar:nth-child(2)::before, .energy-bar:nth-child(20)::before { animation-delay: var(--animation-delay); } .energy-bar:nth-child(3)::before, .energy-bar:nth-child(19)::before { animation-delay: calc(var(--animation-delay) * 2); } .energy-bar:nth-child(4)::before, .energy-bar:nth-child(18)::before { animation-delay: calc(var(--animation-delay) * 3); } .energy-bar:nth-child(5)::before, .energy-bar:nth-child(17)::before { animation-delay: calc(var(--animation-delay) * 4); } .energy-bar:nth-child(6)::before, .energy-bar:nth-child(16)::before { animation-delay: calc(var(--animation-delay) * 5); } .energy-bar:nth-child(7)::before, .energy-bar:nth-child(15)::before { animation-delay: calc(var(--animation-delay) * 6); } .energy-bar:nth-child(8)::before, .energy-bar:nth-child(14)::before { animation-delay: calc(var(--animation-delay) * 7); } .energy-bar:nth-child(9)::before, .energy-bar:nth-child(13)::before { animation-delay: calc(var(--animation-delay) * 8); } .energy-bar:nth-child(10)::before, .energy-b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0