如何给边框动画

Question

我有一个带有渐变边框的 div。所以我想给这个 div 一个动画，当它滚动到这个 div 时，我希望 border-gradient 自动旋转。我不知道该怎么做，所以我直接问它。

<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;
}

Answer 1

您可以将边框设置为动画：

.border-gradient {
  border: solid 5px #FC5185;
  transition: border-width 0.6s linear;
}
.border-gradient:hover { border-width: 10px; }

Answer 2

我找不到 css 动画边框的解决方案，使用图像可能可以实现。

无论如何，这是一个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;
}

当然可以改进。因此，请尝试并根据自己的喜好调整它。

如何给边框动画

How to give an animation to border

html

javascript

css

animation

css-animations