Question

0

455

Visualizações

¿Cómo animar un degradado radial usando CSS?

Estoy tratando de crear un efecto de brillo de degradado radial en un cuadro div y no estoy seguro de cuál es la mejor manera de hacerlo. No he encontrado recursos para lograr lo que quiero lograr; solo brillan los efectos que parecen superpuestos.

La mayoría de los ejemplos que he encontrado se parecen a esto http://jsfiddle.net/nqQc7/512/ .

A continuación, he mostrado lo que estoy tratando de crear.

 #shine-div { height: 30vh; width: 60vw; margin-right: auto; margin-left: auto; border-radius: 10px; /*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/ display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; animation: colorChange 5s infinite; } @keyframes colorChange { 0% { background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%) } 50% { background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%) } 100% { background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%) } }

 <div id="shine-div"> Shine </div>

¿Es posible hacer esto? También me gustaría hacer que el blanco brille en la parte superior para ir de izquierda a derecha sin problemas. ¿Estoy en el camino correcto con mi intento?

over 4 years ago · Santiago Trujillo

3 Respostas

Responde à pergunta

0

solución SVG

El autor no pidió una solución a su problema usando SVG . Pero probablemente será útil para resolver un problema de varias maneras.
Los valores de los atributos de degradado se tomaron de la respuesta de @Temani Afif.
La fórmula de gradiente radial SVG para esta pregunta:

 <radialGradient id="radGrad" fx="0%" fy="5%" r="200%"> <stop offset="0%" stop-color ="#FFFFFF" /> <stop offset="4%" stop-color ="#ffb3ff" /> <stop offset="12.25%" stop-color ="#ff33ff" /> <stop offset="31.25%" stop-color ="#800080" /> <stop offset="50%" stop-color ="#b300b3" /> </radialGradient>

Para animar el degradado, puede usar cualquier atributo incluido en la fórmula.
Los ejemplos a continuación usarán los atributos fx y fy

Animación de movimiento de gradiente horizontal

La animación comienza después de hacer clic en un rectángulo.

 svg { width:50%; height:50%; } .txt { font-family:sans-serif; font-size:28px; font-weight:bold; text-anchor:middle; fill:#FFDD00; }

 <div id="shine-div"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100"> <defs> <radialGradient id="radGrad" fx="0%" fy="0%" r="200%"> <stop offset="0%" stop-color ="#FFFFFF" /> <stop offset="4%" stop-color ="#ffb3ff" /> <stop offset="12.25%" stop-color ="#ff33ff" /> <stop offset="31.25%" stop-color ="#800080" /> <stop offset="50%" stop-color ="#b300b3" /> </radialGradient> </defs> <g id="gr1" > <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/> <text class="txt" x="50%" y="60%"> Sun shine </text> </g> <animate xlink:href="#radGrad" attributeName="fx" dur="3s"begin="gr1.click" values="0%;100%;0%" repeatCount="1" restart="whenNotActive" /> </svg> </div>

Una animación del movimiento de gradiente vertical.

 svg { width:50%; height:50%; } .txt { font-family:sans-serif; font-size:28px; font-weight:bold; text-anchor:middle; fill:#FFDD00; }

 <div id="shine-div"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100"> <defs> <radialGradient id="radGrad" fx="48%" fy="0%" r="200%"> <stop offset="0%" stop-color ="#FFFFFF" /> <stop offset="4%" stop-color ="#ffb3ff" /> <stop offset="12.25%" stop-color ="#ff33ff" /> <stop offset="31.25%" stop-color ="#800080" /> <stop offset="50%" stop-color ="#b300b3" /> </radialGradient> </defs> <g id="gr1" > <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/> <text class="txt" x="50%" y="60%"> Sun shine </text> </g> <animate xlink:href="#radGrad" attributeName="fy" dur="2s"begin="gr1.click" values="0%;50%;50%;100%;50%;50%;0%" keyTimes="0;0.1;0.5;0.6;0.7;0.9;1" repeatCount="1" restart="whenNotActive" /> </svg> </div>

Mover el degradado en diagonal

Dos atributos se animan simultáneamente: fx y fy

 svg { width:50%; height:50%; } .txt { font-family:sans-serif; font-size:28px; font-weight:bold; text-anchor:middle; fill:#FFDD00; }

 <div id="shine-div"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100"> <defs> <radialGradient id="radGrad" fx="0%" fy="0%" r="200%"> <stop offset="0%" stop-color ="#FFFFFF" /> <stop offset="4%" stop-color ="#ffb3ff" /> <stop offset="12.25%" stop-color ="#ff33ff" /> <stop offset="31.25%" stop-color ="#800080" /> <stop offset="50%" stop-color ="#b300b3" /> </radialGradient> </defs> <g id="gr1" > <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/> <text class="txt" x="50%" y="60%"> Sun shine </text> </g> <animate xlink:href="#radGrad" attributeName="fy" dur="2s"begin="gr1.click" values="0%;50%;50%;100%;0%" keyTimes="0;0.1;0.5;0.9;1" repeatCount="1" restart="whenNotActive" /> <animate xlink:href="#radGrad" attributeName="fx" dur="2s"begin="gr1.click" values="0%;50%;50%;100%;0%" keyTimes="0;0.1;0.5;0.9;1" repeatCount="1" restart="whenNotActive" /> </svg> </div>

over 4 years ago · Santiago Trujillo Relatório

0

Usando variables CSS y con la nueva @property podemos animar fácilmente radial-gradient (o cualquier tipo de degradado). El soporte cubre solo Chrome y Edge por ahora.

 @property --x { syntax: '<percentage>'; inherits: false; initial-value: 0%; } #shine-div { height: 30vh; width: 60vw; margin: auto; border-radius: 10px; background: radial-gradient(ellipse farthest-corner at var(--x) 0%, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%); animation: colorChange 5s infinite alternate; } @keyframes colorChange { 0% { --x:0%; } 50% { --x:50%; } 100% { --x:100%; } }

 <div id="shine-div"></div>

Todo lo que tenemos que hacer es definir la posición usando una variable --x que usará valores porcentuales y animaremos esa variable. ¡Tan sencillo como eso!

over 4 years ago · Santiago Trujillo Relatório

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-03-08T19:29:58.744Z

Puedes hacer el degradado de manera diferente y animar la posición. El truco consiste en duplicar el tamaño del degradado y hacer que el valor del color se detenga a la mitad de sus valores reales para que mantenga el mismo degradado visual y luego pueda animarlo de izquierda a derecha.

No se verá exactamente igual que el degradado que definiste en la animación debido al cálculo de la esquina más lejana.

 #shine-div { height: 30vh; width: 60vw; margin-right: auto; margin-left: auto; border-radius: 10px; background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%) top right/200% 200%; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; animation: colorChange 5s infinite alternate; } @keyframes colorChange { to { background-position:top left; } }

 <div id="shine-div"> Shine </div>

Para acercarse más a sus gradientes, también debe animar el background-size (consulte a continuación los detalles del cálculo)

 #shine-div { height: 30vh; width: 60vw; margin-right: auto; margin-left: auto; border-radius: 10px; background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 24.5%, #800080 62.5%, #b300b3 100%); display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; animation: colorChange 5s infinite alternate linear; } @keyframes colorChange { from { /* radial-gradient(farthest-corner at top right, ..) */ background-position:left top; background-size:200% 100%; } 49.9% { background-position:left top; } 50% { /* radial-gradient(farthest-corner at top center, ..) */ background-size:100% 100%; } 50.1% { background-position:right top; } to { /* radial-gradient(farthest-corner at top left, ..) */ background-position:right top; background-size:200% 100%; } }

 <div id="shine-div"> Shine </div>

También puede hacer la misma animación considerando el pseudo elemento y la transformación para tener un mejor rendimiento:

 #shine-div { height: 30vh; width: 60vw; margin-right: auto; margin-left: auto; border-radius: 10px; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; overflow:hidden; position:relative; z-index:0; } #shine-div:before { content:""; position:absolute; z-index:-1; top:0; left:0; width:400%; height:200%; background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%); animation: colorChange 5s infinite alternate linear; } @keyframes colorChange { from { transform:translateX(-50%); } 50% { transform:scaleX(0.75) translateX(-50%) } to { transform:translateX(-25%); } }

 <div id="shine-div"> Shine </div>

Más en profundidad

Para que la respuesta sea más genérica, voy a detallar cómo puedes animar cualquier tipo de degradado desde dos posiciones diferentes. El truco principal es escribir el gradiente de manera diferente para que su definición sea una constante ( radial-gradient(<constant_definition>) ) y animar la background-position (y el background-size en algunos casos)

Consideremos que nuestro gradiente es background:radial-gradient(Rh Rv at XY, color1 p1, color2 p2) donde Rh y Ry son respectivamente el radio horizontal y el radio vertical de nuestra elipse (si ambos son iguales o solo se usa un valor, entonces es un círculo).

Primero, duplicamos el tamaño del degradado. Este truco nos permitirá ajustar fácilmente la posición del degradado utilizando un valor porcentual (explicado aquí: Uso de valores porcentuales con posición de fondo en un degradado lineal )

Si el radio se define con valores de píxeles, lo mantenemos, pero si se define con un valor porcentual, lo dividimos por 2, ya que es relativo al tamaño que ha aumentado. Si ambos radios están en porcentaje, podemos dividir ambos por 2 o mantenerlos y dividir las paradas de color por 2.

En segundo lugar, eliminamos at XY , lo que traerá el degradado al centro, por lo que debemos rectificar la posición utilizando background-position . Está claro que si el gradiente estaba en 0 0 necesitamos usar background-position:100% 100%

El cuadro verde es nuestro fondo dos veces más grande que el elemento (el cuadro negro) y el círculo rojo es nuestro degradado. Al ajustar la posición del fondo, posicionamos visualmente el degradado en 0 0 .

Para cualquier valor X , Y lógicamente tendremos background-position:calc(100% - X) calc(100% - Y)

Si X,Y son valores de píxel, también podemos usar background-position: right -X bottom -Y (tenga en cuenta que es -X y no - X , usamos el valor negativo)

Ejemplos:

Con valores de píxeles

 .box { height:150px; width:150px; border:1px solid; display:inline-block; }

 <div class="box" style="background:radial-gradient(20% 100px at 20px 30px,red 30%,blue 60%);"></div> <div class="box" style="background:radial-gradient(10% 100px,red 30%,blue 60%) right -20px bottom -30px/200% 200%;"></div> <br> <div class="box" style="background:radial-gradient(40% 40% at 40px 50px,yellow 30%,blue);"></div> <div class="box" style="background:radial-gradient(40% 40%,yellow 15%,blue 50%) right -40px bottom -50px/200% 200%;"></div> <div class="box" style="background:radial-gradient(20% 20%,yellow 30%,blue) right -40px bottom -50px/200% 200%;"></div>

Con valores porcentuales

 .box { height:150px; width:150px; border:1px solid; display:inline-block; }

 <div class="box" style="background:radial-gradient(20% 100px at 50% 10%,red 30%,blue 60%);"></div> <div class="box" style="background:radial-gradient(10% 100px,red 30%,blue 60%) calc(100% - 50%) calc(100% - 10%)/200% 200%;"></div> <br> <div class="box" style="background:radial-gradient(40% 40% at 30% 70%,yellow 30%,blue);"></div> <div class="box" style="background:radial-gradient(40% 40%,yellow 15%,blue 50%) calc(100% - 30%) calc(100% - 70%)/200% 200%;"></div> <div class="box" style="background:radial-gradient(20% 20%,yellow 30%,blue) calc(100% - 30%) calc(100% - 70%)/200% 200%;"></div>

Entonces, si queremos animar un gadget de:

 radial-gradient(Rh Rv at XY, color1 p1, color2 p2)

para

 radial-gradient(Rh Rv at X1 Y2, color1 p1, color2 p2)

lo escribimos de manera diferente y animamos la background-position :

 .box { height:150px; width:150px; border:1px solid; display:inline-block; } .first { background:radial-gradient(10% 100px,red 30%,blue 60%) calc(100% - 50%) calc(100% - 10%)/200% 200%; animation:change1 2s linear infinite alternate; } .second { background:radial-gradient(20% 20%,yellow 30%,blue)right -50px bottom 0/200% 200%; animation:change2 2s linear infinite alternate; } @keyframes change1 { to { background-position:calc(100% + 10%) calc(100% - 80%); } } @keyframes change2 { to { background-position:right -100px bottom -100px; } }

 <div class="box first" ></div> <div class="box second"></div>

Ahora consideremos casos más complicados, como nuestro ejemplo inicial, usando farthest-side para definir el tamaño. Haremos la misma lógica y convertiremos

 radial-gradient(farthest-side at XY, color1 p1, color2 p2);

para

 radial-gradient(farthest-side, color1 p1, color2 p2) Px Py/Sx Sy no-repeat;

^{Explicaré para un eje ( X ) y lo mismo se aplica al otro}

farthest-side define el radio como la distancia desde el centro del degradado hasta el lado más lejano del cuadro de degradado (el cuadro de degradado es por defecto el elemento mismo ya que no definimos ningún tamaño). Si X es un valor porcentual entonces el radio es el máximo entre X y 100% - X y en el gradiente transformado el radio será 50% ya que estamos en el centro. Así que necesitamos hacer coincidir el primer radio con 50%*Sx

Si X es 50% entonces Sx debe ser 100% y si X es 0 o 100% entonces Sx debe ser 200% .

La fórmula es Sx = max(X,100% - X)*2

La posición es más fácil en este caso debido a la naturaleza del degradado donde la forma debe tocar un lado

Si X dentro de [0 50%[ Px debe ser 100% ( right )
Si X es 50% cualquier valor para Px funcionará ya que Sx=100%
Si X dentro del ]50% 100%] Px debería ser 0% ( left )

Pregunta relacionada: Uso de valores porcentuales con posición de fondo en un gradiente lineal

Ejemplos:

 .box { height:150px; width:150px; border:1px solid; display:inline-block; }

 <div class="box" style="background:radial-gradient(farthest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div> <div class="box" style="background:radial-gradient(farthest-side, red 20%, blue 100%, yellow 50%) 100% 0/calc(80%*2) calc(60%*2)"></div> <br> <div class="box" style='background:radial-gradient(farthest-side at 22% 100%,red 40%, blue 100%,yellow 100%)'></div> <div class="box" style="background:radial-gradient(farthest-side,red 40%, blue 100%,yellow 100%) 100% 0/calc(78%*2) calc(100%*2)"></div>

Para la farthest-corner hacemos exactamente lo mismo:

 .box { height:150px; width:150px; border:1px solid; display:inline-block; }

 <div class="box" style="background:radial-gradient(farthest-corner at 20% 60%, red 20%, blue 50%, yellow 60%)" ></div> <div class="box" style="background:radial-gradient(farthest-corner, red 20%, blue 50%, yellow 60%) 100% 0%/calc(80%*2) calc(60%*2)"></div> <br> <div class="box" style="background:radial-gradient(farthest-corner at 40% 100%, red 20%, blue 50%, yellow 60%)" ></div> <div class="box" style="background:radial-gradient(farthest-corner, red 20%, blue 50%, yellow 60%) 100% 0%/calc(60%*2) calc(100%*2)"></div>

También podemos transformar farthest-side (o farthest-corner ) a Rh Rv y hacer el cálculo anterior, pero no será útil para la animación ya que tendremos dos degradados con diferentes radios mientras que necesitamos el mismo degradado.

 .box { height:150px; width:150px; border:1px solid; display:inline-block; }

 <div class="box" style="background:radial-gradient(farthest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div> <div class="box" style="background:radial-gradient(80% 60% at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div> <div class="box" style="background:radial-gradient(80% 60%, red 10%, blue 50%, yellow 50%) 80% 40%/200% 200%"></div>

Si X es un valor de píxel tenemos dos casos:

El elemento tiene un ancho fijo: en este caso, simplemente podemos convertir el valor de píxel de X como un porcentaje del ancho y hacemos la misma lógica que arriba.
El elemento tiene un ancho variable: en este caso, sería complicado convertir el degradado (probablemente imposible) porque la forma cambiará según el ancho. Cuando width-X > X tendremos un radio variable y cuando width-X < X tendremos un radio fijo . No creo que podamos expresar esto usando background-size y background-position . Ejemplo:

 body { margin:0; height:100vh; background:radial-gradient(farthest-side at 400px 200px,blue 40%,yellow 50%); }

Para el closest-side se hará la misma lógica considerando Sx=min(X,100% - X)*2 PERO deberíamos agregar no-repeat y un background-color igual al último color en el degradado ya que el tamaño es menor que 100%

 .box { height:150px; width:150px; border:1px solid; display:inline-block; }

 <div class="box" style="background:radial-gradient(closest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div> <div class="box" style="background:radial-gradient(closest-side, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2)"></div> <div class="box" style="background:radial-gradient(closest-side, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2) no-repeat,yellow"></div> <br> <div class="box" style='background:radial-gradient(closest-side at 22% 10%,red 40%, blue 100%,yellow 100%)'></div> <div class="box" style="background:radial-gradient(closest-side,red 40%, blue 100%,yellow 100%) 0 0/calc(22%*2) calc(10%*2)"></div> <div class="box" style="background:radial-gradient(closest-side,red 40%, blue 100%,yellow 100%) 0 0/calc(22%*2) calc(10%*2) no-repeat,yellow"></div>

Podemos hacer lo mismo para closest-corner pero tendremos algún problema debido al hecho de que el degradado puede desbordar el cuadro de degradado.

 .box { height:150px; width:150px; border:1px solid; display:inline-block; }

 <div class="box" style="background:radial-gradient(closest-corner at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div> <div class="box" style="background:radial-gradient(closest-corner, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2)"></div> <div class="box" style="background:radial-gradient(closest-corner, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2) no-repeat,yellow"></div>

Para corregir esto, podemos dividir la parada de color por 2 para asegurarnos de mantener todo el degradado dentro. Luego hacemos el tamaño dos veces más grande y rectificamos la posición

 .box { height:150px; width:150px; border:1px solid; display:inline-block; }

 <div class="box" style="background:radial-gradient(closest-corner at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div> <div class="box" style="background:radial-gradient(closest-corner, red 10%, blue 50%, yellow 50%) -100% 33%/calc(20%*4) calc(40%*4)"></div> <div class="box" style="background:radial-gradient(closest-corner, red 10%, blue 50%, yellow 50%) -100% 33%/calc(20%*4) calc(40%*4) no-repeat,yellow"></div> <br> <div class="box" style='background:radial-gradient(closest-corner at 22% 10%,red 40%, blue 100%,yellow 100%)'></div> <div class="box" style="background:radial-gradient(closest-corner,red 20%, blue 50%,yellow 50%) -100% 0%/calc(22%*4) calc(10%*4)"></div> <div class="box" style="background:radial-gradient(closest-corner,red 20%, blue 50%,yellow 50%) -164% -18%/calc(22%*4) calc(10%*4) no-repeat,yellow"></div>

Incluso sin animación, la sintaxis del degradado sin at XY es más compatible. Algunos navegadores como Safari no admiten el at ( ¿Cómo hacer que los degradados radiales funcionen en Safari? )

0

455

¿Cómo animar un degradado radial usando CSS?

3 Respostas

0

Más en profundidad

0

solución SVG

0

Encontrar trabalhos remotos

Andres GPT