我有一個帶有漸變邊框的 div。所以我想給這個 div 一個影片，一旦它被滾動到這個 div，我想要邊框漸變本身旋轉。我不知道該怎么做，這就是我直接問它的原因。
<div >
</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;
}
uj5u.com熱心網友回復：
您可以將邊框設定為：
.border-gradient {
border: solid 5px #FC5185;
transition: border-width 0.6s linear;
}
.border-gradient:hover { border-width: 10px; }
uj5u.com熱心網友回復：
我找不到用于影片邊框的 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;
}
當然可以進行改進。因此，請隨意使用它并根據自己的喜好對其進行調整。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370408.html
標籤：javascript html css 动画片 css动画