배너 블라인드니스

<div class="page">
  <div class="banner">Important notice — read this</div>
  <div class="ln title"></div>
  <div class="ln w95"></div>
  <div class="ln w80"></div>
  <div class="ln w60"></div>
  <div class="ln w70"></div>
  <div class="dot" id="dot"></div>
</div>

.page{position:relative;width:88%;height:86%;display:flex;flex-direction:column;gap:9%}
.banner{height:16%;border-radius:6px;background:repeating-linear-gradient(45deg,var(--accent-2),var(--accent-2) 6px,color-mix(in srgb,var(--accent-2) 70%,#000) 6px,color-mix(in srgb,var(--accent-2) 70%,#000) 12px);color:#fff;font:700 11px/1 sans-serif;display:flex;align-items:center;padding-left:10px;opacity:.85}
.ln{height:9%;border-radius:3px;background:var(--line)}
.title{width:60%;height:12%;background:var(--muted);opacity:.5}
.w95{width:95%}.w80{width:80%}.w60{width:60%}.w70{width:70%}
.dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,rgba(91,91,247,.9),rgba(91,91,247,0) 70%);animation:scan 4.4s ease-in-out infinite}
@keyframes scan{
  0%{left:8%;top:34%}
  15%{left:90%;top:34%}
  28%{left:8%;top:50%}
  42%{left:75%;top:50%}
  55%{left:8%;top:66%}
  68%{left:55%;top:66%}
  80%{left:8%;top:82%}
  92%,100%{left:60%;top:82%}
}