边框虚线滚动动画特效

简介: 边框虚线滚动动画特效

边框线条效果如上

    /*边框虚线滚动动画特效*/
    .border-animate {
        background: linear-gradient(90deg, gray 60%, transparent 60%) repeat-x left top/10px 1px,
        linear-gradient(0deg, gray 60%, transparent 60%) repeat-y right top/1px 10px,
        linear-gradient(90deg, gray 60%, transparent 60%) repeat-x right bottom/10px 1px,
        linear-gradient(0deg, gray 60%, transparent 60%) repeat-y left bottom/1px 10px;
        animation: border-animate .382s infinite linear;
    }
    @keyframes border-animate {
        0% {
            background-position: left top, right top, right bottom, left bottom;
        }
        100% {
            background-position: left 10px top, right top 10px, right 10px bottom, left bottom 10px;
        }
    }


相关文章
|
7月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
65 3
|
2月前
ThreeJs添加拖动辅助线
这篇文章介绍了在Three.js中使用TransformControls组件来添加拖动辅助线,实现对3D模型在不同轴向上进行直观的拖动和平移操作。
72 0
|
6月前
|
前端开发
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
前端开发
CSS小技巧之圆形虚线边框
CSS小技巧之圆形虚线边框
188 0
|
XML Java API
一个超简单的渐变平行四边形进度条
这个自定义View,其实就是一个简单的进度条,无非就是平行四边形形状的,加了渐变以及状态颜色的切换。
137 0
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
141 0
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
1429 0
|
前端开发 容器
巧妙实现带圆角的渐变边框
巧妙实现带圆角的渐变边框
389 0
巧妙实现带圆角的渐变边框