<div class="cylinder"> <span></span> <i id="num" style="height:10%"></i></div> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #0a1339; } .cylinder { width: 100px; height: 300px; margin: 100px; position: relative; } .cylinder span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); } .cylinder span::after { content: ''; position: absolute; width: 100%; height: 30px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); bottom: -30px; border-radius: 0 0 50% 50%; } .cylinder span::before { content: ''; position: absolute; width: 100%; height: 30px; background-color: #1d2b54; top: -15px; border-radius: 50%; } .cylinder i { position: absolute; width: 80%; background-color: #1865d4; bottom: -12px; left: 10%; z-index: 1; transition: 0.3s; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); } .cylinder i::after { content: ''; position: absolute; width: 100%; height: 18px; background-color: #1865d4; bottom: -18px; border-radius: 0 0 50% 50%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); } .cylinder i::before { content: ''; position: absolute; width: 100%; z-index: 2; height: 24px; background-color: #5697e8; top: -12px; border-radius: 50%; }xxxxxxxxxx const el = document.getElementById('num') const time = (num, t) => { setTimeout(() => { el.style.height = num }, t) } setInterval(() => { time('80%', 0) time('50%', 1000) time('20%', 2000) }, 3000)