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;

}

}

相关推荐
90后的晨仔34 分钟前
iOS 中的Combine 框架简介
前端
Web极客码1 小时前
WordPress 6.5版本带来的新功能
前端·api·wordpress
小磊哥er1 小时前
【前端AI实践】泛谈AI在前端领域的应用场景
前端·vue.js·ai编程
Mintopia1 小时前
Three.js WebGPU 支持:利用 WebGPU 提升渲染性能
前端·javascript·three.js
WHOAMI_老猫1 小时前
渗透实战PortSwigger Labs AngularJS DOM XSS利用详解
前端·渗透测试·xss·angular.js
DC...1 小时前
XSS跨站脚本攻击
前端·xss
清幽竹客1 小时前
vue-14(使用 ‘router.push‘ 和 ‘router.replace‘ 进行编程导航)
前端·vue.js
Mintopia1 小时前
计算机图形学之物理基础渲染(PBR):一场光与材质的奇幻之旅
前端·javascript·计算机图形学
Aphasia3111 小时前
JavaScript知识点(七)——模块化
前端·javascript
行走的茶白1 小时前
用户管理页面(解决toggleRowSelection在dialog用不了的隐患,包含el-table的plus版本的组件)
前端