영화 화면비

<div class="screen">
  <div class="pic"></div>
  <div class="bar top" id="bt"></div>
  <div class="bar bottom" id="bb"></div>
  <div class="bar left" id="bl"></div>
  <div class="bar right" id="br"></div>
  <span class="label" id="lb">1.33 · Academy</span>
</div>

.screen{position:relative;width:min(94%,520px);aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:4px}
.pic{position:absolute;inset:0;background:
  linear-gradient(90deg,#5b5bf7 0 20%,#ff5c8a 20% 40%,#ffb648 40% 60%,#18c29c 60% 80%,#2b2f45 80% 100%)}
.bar{position:absolute;background:#000;transition:all 1s cubic-bezier(.4,0,.2,1)}
.top,.bottom{left:0;right:0;height:0}
.top{top:0}
.bottom{bottom:0}
.left,.right{top:0;bottom:0;width:0}
.left{left:0}
.right{right:0}
.label{position:absolute;left:4%;bottom:4%;font:700 11px ui-monospace,monospace;color:#fff;
  background:rgba(0,0,0,.4);padding:3px 8px;border-radius:20px;z-index:2}

const bt=document.getElementById('bt'), bb=document.getElementById('bb');
const bl=document.getElementById('bl'), br=document.getElementById('br');
const lb=document.getElementById('lb');
const states=[
  { top:'0%', bottom:'0%', left:'12.6%', right:'12.6%', label:'1.33 · Academy' },
  { top:'1.95%', bottom:'1.95%', left:'0%', right:'0%', label:'1.85 · Flat' },
  { top:'12.8%', bottom:'12.8%', left:'0%', right:'0%', label:'2.39 · Scope' },
];
let i=0;
function step(){
  const s=states[i];
  bt.style.height=s.top; bb.style.height=s.bottom;
  bl.style.width=s.left; br.style.width=s.right;
  lb.textContent=s.label;
  i=(i+1)%states.length;
}
step();
setInterval(step,1900);