원형 창이 닫히거나 열리며 다음 장면을 가리고 드러냅니다.
<div class="frame">
<div class="shot old"><i></i><b>WIDE</b></div>
<div class="shot new"><i></i><b>DETAIL</b></div>
<i class="center"></i>
</div>.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.shot{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.old{background:linear-gradient(140deg,#c99a65,#4b806f)}
.new{background:linear-gradient(140deg,var(--accent-2),#263448);clip-path:circle(0 at 50% 50%);animation:open 3.6s ease-in-out infinite}
.shot i{width:clamp(54px,30vmin,160px);aspect-ratio:1;border-radius:50%;background:var(--surface);box-shadow:0 0 0 22px rgba(255,255,255,.15)}
.new i{width:42%;height:42%;border-radius:18% 50% 18% 50%;background:var(--accent);transform:rotate(35deg)}
.shot b{position:absolute;left:6%;bottom:7%;font:700 clamp(9px,2.3vmin,13px) ui-monospace,monospace;letter-spacing:.16em;color:var(--surface)}
.center{position:absolute;left:50%;top:50%;width:clamp(8px,2vmin,13px);aspect-ratio:1;border:2px solid var(--surface);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 5px #222}
@keyframes open{0%,34%{clip-path:circle(0 at 50% 50%)}52%{clip-path:circle(48% at 50% 50%)}70%,100%{clip-path:circle(110% at 50% 50%)}}렌즈 조리개나 무대의 둥근 창이 열리고 닫히듯, 원형 마스크가 장면을 가립니다. 시선은 원의 중심에 모이고 화면 가장자리는 먼저 사라집니다.
다음 샷을 위에 놓고 clip-path의 원 반지름을 0에서 화면을 덮을 크기까지 키웁니다. 중심점을 바꾸면 원이 화면 한가운데가 아닌 특정 위치에서 열립니다.
직선이 화면을 쓸고 가는 와이프와 달리 경계는 원형입니다. 만화 같은 느낌이 강하므로 형식적인 인트로나 장난스러운 톤에 맞춰 쓰세요.
중심 피사체를 강조하거나 고전 만화 같은 막과 시작을 만들 때 사용하세요. 여러 번 반복하면 장면이 가벼워 보일 수 있습니다.