背景画像にアニメーションで変化するグラデーション
Result
以前かいたfilterを使う方法とは異なり、複数設定したグラデーションをkeyframesで動かす、というもの
css
.hero {
height: 100vh;
background: linear-gradient(
45deg,
rgba(255, 175, 189, 0.7),
rgba(100, 216, 243, 0.7),
rgba(234, 236, 198, 0.7),
rgba(245, 146, 176, 0.7),
rgba(52, 219, 216, 0.7)
)
0 0 / 1000% no-repeat,
url(https://picsum.photos/g/2000/1200) 0 0 / cover no-repeat;
animation: gradientAnimation 40s ease infinite;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 30%, 0 0;
}
50% {
background-position: 100% 70%, 0 0;
}
100% {
background-position: 0% 30%, 0 0;
}
}
|
html
<div class="hero">
<h1>foo bar</h1>
</div>
|
via
demo:Hero Image × CSS Gradient #2
