CSS动态虚线边框

.gradient {

background: linear-gradient(90deg, rgb(250, 46, 46) 50%, transparent 0) repeat-x, linear-gradient(90deg, rgb(250, 46, 46) 50%, transparent 0) repeat-x, linear-gradient(0deg, rgb(250, 46, 46) 50%, transparent 0) repeat-y, linear-gradient(0deg, rgb(250, 46, 46) 50%, transparent 0) repeat-y;

background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;

background-position: 0 0, 0 100%, 0 0, 100% 0;

cursor: pointer;

-webkit-animation: linearGradientMove 0.3s infinite linear;

animation: linearGradientMove 0.3s infinite linear;

}

@-webkit-keyframes linearGradientMove {

100% {

background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;

}

}

@keyframes linearGradientMove {

100% {

background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;

}

}

相关推荐
yinuo1 分钟前
uniapp微信小程序安卓手机Touchend事件无法触发
前端
你的人类朋友2 小时前
【Node】Node.js 多进程与多线程:Cluster 与 Worker Threads 入门
前端·后端·node.js
闲人编程2 小时前
使用Celery处理Python Web应用中的异步任务
开发语言·前端·python·web·异步·celery
excel2 小时前
前端读取文件夹并通过 SSH 上传:完整实现方案 ✅
前端
双向333 小时前
【征文计划】基于Rokid CXR-M SDK 打造AI 实时会议助手:从连接到自定义界面的完整实践
前端
Lei活在当下3 小时前
【业务场景架构实战】6. 从业务痛点到通用能力:Android 优先级分页加载器设计
前端·后端·架构
你的人类朋友3 小时前
什么是基础设施中间件
前端·后端
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
向上的车轮3 小时前
CSS 预处理器:Sass的基本用法、核心特性
css·sass
海绵宝龙3 小时前
将若依(RuoYi)项目创建为私有Gitee仓库的完整步骤
前端·gitee