様々な色のグラデーションに変化する背景
Result
色が変化するグラデーション。filter効果を使用しています
css
div {
position: absolute;
width: .001vmin;
height: .001vmin;
border-radius: 50%;
opacity: .25;
}
div:nth-child(2) {
box-shadow: 0 0 45vmax 45vmax magenta;
animation: hue 10s 0s linear infinite,
move1 19s 0s linear infinite;
}
div:nth-child(3) {
box-shadow: 0 0 45vmax 45vmax white;
animation: hue 15s 0s linear infinite,
move2 25s 0s linear infinite;
}
div:nth-child(4) {
box-shadow: 0 0 45vmax 45vmax cyan;
animation: hue 20s 0s linear infinite,
move3 15s 0s linear infinite;
opacity: .2;
}
@keyframes hue {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@keyframes move3 {
0% {
top: 100vh;
left: 50vw;
}
25% {
left: 100vw;
}
50% {
top: 0vh;
}
75% {
left: 0vw;
}
100% {
top: 100vh;
left: 50vw;
}
}
|
html
<h1>Aurora</h1>
<div></div>
<div></div>
<div></div>
<div></div>
|
via
Aurora
