Tengo un div que tiene un borde degradado. Así que quiero darle a este div una animación y tan pronto como se desplace a este div, quiero que el gradiente de borde gire alrededor de sí mismo. No tengo idea de cómo hacerlo, por eso lo pregunto directamente.
<div class="border-gradient"> </div> .border-gradient { height: 230px; width: 100%; border: 5px solid transparent; border-image: linear-gradient(190deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); border-image-slice: 1; }puedes animar el borde como:
.border-gradient { border: solid 5px #FC5185; transition: border-width 0.6s linear; } .border-gradient:hover { border-width: 10px; }No pude encontrar una solución css para animar el borde, puede lograrse usando imágenes.
De todos modos, aquí hay una solución javascript
var bored = document.getElementsByClassName("border-gradient")[0]; var anim = {'running':0,'deg':0,'time':0}; var animator; var boredy = bored.getBoundingClientRect().top;//grab the y of the element relative to the top of the web page checkscroll();//check if element onscreen initially window.onscroll = checkscroll;//check if element is onscreen when the user scrolls function checkscroll() { if(!anim.running && window.scrollY + window.innerHeight >= boredy) { anim.running = 1; anim.time = 0;//reset the animation, set running to 1 so the animation won't retrigger while already running startanim(); } } function startanim() { animator = setInterval(function() { anim.deg += 1; anim.time += 50; bored.style = `border-image:linear-gradient(${anim.deg}deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); border-image-slice: 1;`; if(anim.time >= 10000){window.clearInterval(animator); anim.running = 0} },50);//start a loop that continousouly updates the border }CSS:
.border-gradient { height: 230px; width: 100%; border: 5px solid transparent; border-image: linear-gradient(0deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); border-image-slice: 1; margin-top:150vh; }Ciertamente se pueden hacer mejoras. Así que juega con él y ajústalo a tu gusto.