背景画像を拡大→縮小表示する方法

  • 備忘録

要素に擬似要素で背景画像を設置

&::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();でぼかしもつけてみました。

BLOG TOP

CONTACT

当サイトをご訪問いただき有難うございます。
お問い合わせ・ご依頼はこちら。

CONTACT
~