利用径向渐变做酷炫的按钮闪光效果_按钮闪光效果渐变效果-CSDN博客

本文链接：https://blog.csdn.net/qq_39285178/article/details/121659304

最近公司事情不多,就研究下自己感兴趣的东西

前置知识:需要理解径向渐变径向渐变的连写各个属性的含义边框背景,边框背景连写各个属性的含义

效果就是点击之后,会开启边框背景一个光点,然后移动的过程,不能上传视频,大家自己下载代码在本地看效果吧

本不想用js实现,最开始想到的是动画方式,在每个阶段改变border-image-source里径向渐变的圆心位置,但是发现不能成功,用的是连写的方式,后来猜想是不是连写方式不支持,我又把边框背景的每个属性进行拆分,动画的时候只改变border-image-source的值,发现也不行,测试代码如下(连写版,猜想是因为我们的动画要改变的是径向渐变的圆心位置,而圆心位置是相对于元素而言的,但是并没有类似background-position这样的属性去单独改变圆心位置,只能重新去设置这个属性,所以不能用动画实现,希望有知道的大佬能告知真正的原因)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        background:#000
    }
    #box {
        margin: 100px auto;
        width: 200px;
        height: 100px;
        border:1px solid transparent;
        /* 如果使用动画不要使用连写方式 ,js不使用连写不生效,不知道为啥*/
        /* border-image-source: radial-gradient(20% 100%  at 0px 0px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1)); */
        /* border-image-slice: 1;
        border-image-width: 1px;
        border-image-outset: 0;
        border-image-repeat: stretch; */
        color:#fff;
        line-height: 100px;
        text-align: center;
        /* border-image:radial-gradient(20% 100%  at 0px 0px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch; */
        /* border-image:radial-gradient(20% 100%  at 200px 0px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch; */
        /* border-image:radial-gradient(20% 100%  at 200px 100px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch; */
        /* border-image:radial-gradient(20% 100%  at 0px 100px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch; */
        
    }

</style>
<body>
    <div id="box">
        点我试试!
    </div>
</body>
<script>
    let flag = false
    let timer
    let index = 0
    let box = document.getElementById('box')
    box.addEventListener('click',function(e){
        flag = !flag    
        
        if(flag){
            // 随后的时间里,让圆心动起来
            // e.target.style.borderImage = `radial-gradient(20% 75% at 0px 0px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch `;
            timer = setInterval(() => {
                // debugger
                index+=1
                if(index<=200){
                    // e.target.style.borderImageSource =  `radial-gradient(20% 100%  at ${index}px ${widthHeight.top}px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1));`
                    e.target.style.borderImage = `radial-gradient(20% 75% at ${index}px 0px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch `;
                } else if(index >200 && index < 300){
                    // e.target.style.borderImageSource =  `radial-gradient(20% 100%  at ${200}px ${300-index}px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1));` 
                    e.target.style.borderImage = `radial-gradient(20% 75% at 200px ${index-200}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch `;
                } else if(index >=300 && index <500){
                    // e.target.style.borderImageSource =  `radial-gradient(20% 100%  at ${100}px ${500-index}px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1));` 
                    e.target.style.borderImage = `radial-gradient(20% 75% at ${500-index}px 100px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch `;
                } else if(index>=500 && index <=600){
                    // e.target.style.borderImageSource =  `radial-gradient(20% 100%  at ${0}px ${600-index}px  ,rgba(255,255,255,0.7),rgba(255,255,255,0.1));` 
                    e.target.style.borderImage = `radial-gradient(20% 75% at 0px ${600-index}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch `;
                } else if(index >600){
                    // clearInterval(timer)
                    index=0
                }
                
            }, 1);
        } else {
            clearInterval(timer)
        }
    })
</script>
</html>