css实现边框滚动效果

实现效果

具体代码

<template>
  <div class="bg">
    <h1>This is an bg page</h1>
    <div class="run"></div>
  </div>
</template>
<script>
export default {
    name: 'bg',
    data() {
        return {

        }
    }
}
</script>
<style lang="scss" scoped>
    .run{   
        width:400px;
        height: 100px;
        margin: 20px auto;
        // 用来表现四个边框样式的背景设置
        background: linear-gradient(0deg, transparent 50%, orange 50%) repeat-y,   // 左边框
            linear-gradient(0deg, transparent 50%, orange 50%) repeat-y,  // 右边框
            linear-gradient(90deg, transparent 50%, orange 50%) repeat-x, // 上边框
            linear-gradient(90deg, transparent 50%, orange 50%) repeat-x; // 下边框

        // 分别对应上面四个背景的size，比如第一个1px 12px表示左边框背景填充宽1px,高12px;
        // 此处的高指的是是一个透明横线+一个有颜色横线的高，并不是指整体高度，可理解为线段的密度
        // 左边框的高度是由多个12px的高度线段构成的
        background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px; 

        // 分别对应上面四个背景的position，比如第一个0 0表示边框位于容器x轴原点、y轴原点;                                                              
        background-position: 0 0, 100% 0, 0 0, 0 100%;
        animation: shine 1s infinite linear;          
    }

    @keyframes shine {
        from {
        }
        to {
            // 比如第一个表示0 -12px在动画中表示左边框一秒内上移12px,视觉上就形成了向上滑动的效果
            background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
        }
    }    
</style>

关于linear-gradient颜色增量的补充注释

截图资源来自：https://www.w3cplus.com/css3/do-you-really-understand-css-linear-gradients.html

重点：如果后面的值比前面的值更小时，浏览器会自动做相应的纠正处理

比如：

background: linear-gradient(0deg, transparent 50%, orange 0) // 纠正前
background: linear-gradient(0deg, transparent 50%, orange 50%) // 纠正后

background: linear-gradient(90deg, red 30%,orange 10%, yellow 60%,blue 40%)  // 纠正前
background: linear-gradient(90deg, red 30%,orange 30%, yellow 60%,blue 60%)  // 纠正后