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;

}

}

相关推荐
写不来代码的草莓熊18 小时前
el-date-picker ,自定义输入数字自动转换显示yyyy-mm-dd HH:mm:ss格式 【仅双日历 datetimerange专用】
开发语言·前端·javascript
绺年18 小时前
关于 mac 使用ssh配置
前端
LDX前端校草18 小时前
verdaccio数据迁移
前端
炸炸鱼.18 小时前
LVS-DR 群集部署
前端·chrome·lvs
Ava的硅谷新视界18 小时前
TypeScript 中用判别联合类型替代 instanceof 检查
前端·javascript·typescript
ZC跨境爬虫18 小时前
海南大学交友平台开发实战 day9(头像上传存入 SQLite+BLOB 存储 + 前后端联调避坑全记录)
前端·数据库·python·sqlite
落魄江湖行18 小时前
基础篇六 Nuxt4 状态管理:useState 的正确用法
前端·vue.js·typescript·nuxt4
jerrywus18 小时前
手机控制 AI 编程?Paseo 让你随时随地跑 Claude Code / Codex
前端·agent·claude
GISer_Jing19 小时前
前端视频技术全解析:从编解码到渲染优化
前端·音视频·状态模式
LIO19 小时前
Vue3 + Pinia 完整使用教程(企业级)
前端·vue.js