CSS animationで背景を設定する
背景画像をCSSでanimationします。
- 素材を用意します。
- Adobe Photoshop 2020で編集します。
- レベル補正3パターン
- カラールックアップ3パターン
- jpgで書き出し3パターン
code
CSS
main{ position:absolute; animation-name: animate; animation-duration: 108s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes animate{ 0%, 100%{ opacity: 3; background: url('img/css-animation-1.jpg') no-repeat top fixed; } 20%, 80%{ background: url('img/css-animation-2.jpg') no-repeat center fixed; } 50%{ opacity: 6; background: url('img/css-animation-3.jpg') no-repeat bottom fixed; } }