実現したいこと
- 円形(透明・透過)が広がる動き
- 全体に円形(透明・透過)広がりきるとメイン画像全体が見える
- https://supercrowds.co/
上記のページのような動き
前提
円形で透過させた状態で背景画像を徐々に見せていきたいため、cssでbackgroundをtransparentしたり、opacityをつけたけど、そうすると円形そのものがなくなってしまいます。
該当のソースコード
/***** HTML *****/ <div class="mask"> <div class="circle"> </div> </div> <!-----以下、任意背景画像-----> <img src="/images/hogehoge.jpg" alt=""> /***** HTML *****/ /***** CSS全画面を覆う背景 *****/ .mask { position: fixed; /*固定表示*/ z-index: 999; /*最前面へ*/ top: 0; left: 0; width: 100vw; /*画面幅*/ height: 100vh; /*画面の高さ*/ background:#fff; /*好きな色*/ animation: fadeOut 0.4s forwards; /*フェードアウト*/ animation-delay: 1.6s; /*円のアニメーション+遅延時間*/ } /*フェードアウトアニメーション*/ @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } /***** 広がる円 *****/ .circle { position: absolute; /*固定表示*/ top: 0; bottom: 0; left: 0; right: 0; margin: auto; /*中央配置*/ width: 0; height: 0; background:#efef; /*ページ全体の背景色*/ animation: circle-open 1s linear forwards; animation-delay: 0.6s; /*任意の遅延時間*/ } /*円が拡大するアニメーション*/ @keyframes circle-open { 0% { width: 0; height: 0; border-radius: 50%; } 10%, 80% { /*少し拡大して止まる*/ width: 100px; height: 100px; border-radius: 50%; } 99% { /*ぎりぎりまで正円*/ width: 99vw; height: 99vw; border-radius: 50%; } 100% { /*全画面*/ width: 100vw; height: 100vh; border-radius: 0; } }
試したこと
円形画像に色を付けると円の形は保たれるけど、透過させると×
アドバイスよろしくお願いします。

回答1件
あなたの回答
tips
プレビュー