Fondo de degradado animado con CSS puro
| Autor: | blucube |
|---|---|
| Views Total: | 6,112 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 5, 2014 |
| Licencia: | Unknown |
Vista prévia
Descripción
Un fondo animado degradado usando CSS3 Box-Shadow propiedades y animaciones de fotogramas clave, escritas en LESS y creadas por < a href = "https://codepen.io/blucube" target = "_ blank" rel = "noopener" > blucube .
Funcionamiento
Cree tres capas DIV para el fondo de degradado animado.
<body> <div></div> <div></div> <div></div> </body>
El código LESS.
@diameter: 45vmax;
body {
background: #000;
}
h1 {
position: absolute;
width: 100%;
text-align: center;
top: 48vh;
color: #fff;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
letter-spacing: .7em;
font-size: 20pt;
font-weight: normal;
opacity: .2;
text-transform: uppercase;
}
div {
position: absolute;
width: .001vmin;
height: .001vmin;
border-radius: 50%;
opacity: .25;
}
div:nth-child(2) {
box-shadow: 0 0 @diameter @diameter magenta;
animation:
hue 10s 0s linear infinite,
move1 19s 0s linear infinite;
}
div:nth-child(3) {
box-shadow: 0 0 @diameter @diameter white;
animation:
hue 15s 0s linear infinite,
move2 25s 0s linear infinite;
}
div:nth-child(4) {
box-shadow: 0 0 @diameter @diameter 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;
}
} O utilice estilos CSS.
body { background: #000; }
h1 {
position: absolute;
width: 100%;
text-align: center;
top: 48vh;
color: #fff;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
letter-spacing: .7em;
font-size: 20pt;
font-weight: normal;
opacity: .2;
text-transform: uppercase;
}
div {
position: absolute;
width: .001vmin;
height: .001vmin;
border-radius: 50%;
opacity: .25;
}
div:nth-child(2) {
-webkit-box-shadow: 0 0 45vmax 45vmax #ff00ff;
box-shadow: 0 0 45vmax 45vmax #ff00ff;
-webkit-animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
}
div:nth-child(3) {
-webkit-box-shadow: 0 0 45vmax 45vmax #ffffff;
box-shadow: 0 0 45vmax 45vmax #ffffff;
-webkit-animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
}
div:nth-child(4) {
-webkit-box-shadow: 0 0 45vmax 45vmax #00ffff;
box-shadow: 0 0 45vmax 45vmax #00ffff;
-webkit-animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
opacity: .2;
}
@-webkit-keyframes
hue { 0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@keyframes
hue { 0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@-webkit-keyframes
move1 { 0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@keyframes
move1 { 0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@-webkit-keyframes
move2 { 0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@keyframes
move2 { 0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@-webkit-keyframes
move3 { 0% {
top: 100vh;
left: 50vw;
}
25% {
left: 100vw;
}
50% {
top: 0vh;
}
75% {
left: 0vw;
}
100% {
top: 100vh;
left: 50vw;
}
}
@keyframes
move3 { 0% {
top: 100vh;
left: 50vw;
}
25% {
left: 100vw;
}
50% {
top: 0vh;
}
75% {
left: 0vw;
}
100% {
top: 100vh;
left: 50vw;
}
}
