背景画像を拡大→縮小表示する方法
- 備忘録
要素に擬似要素で背景画像を設置
&::before {
content: “”;
display: block;
@include square(100%, 100svh);
background: url(../assets/img/mv-bg.png) no-repeat center center/cover;
-webkit-animation: zoom 2s 1;
animation: zoom 2s 1;
animation-fill-mode: forwards;
}
アニメーションを設定
@keyframes zoom {
0% {
opacity: 0;
transform: scale(1.2);
filter: blur(5px);
}
100% {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
}
filter: blur();でぼかしもつけてみました。