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;

}

}

相关推荐
秋秋小事1 分钟前
React Hooks useContext
前端·javascript·react.js
Jinuss4 分钟前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
striver_#5 分钟前
百度前端社招面经二
前端
xcnn_6 分钟前
前端入门——案例一:登录界面设计(html+css+js)
前端·css·html
ST.J6 分钟前
前端笔记2025
前端·javascript·css·vue.js·笔记
拉不动的猪7 分钟前
回顾vue中的Props与Attrs
前端·javascript·面试
Jerry43 分钟前
使用 Material 3 在 Compose 中设置主题
前端
chéng ௹1 小时前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
tuokuac1 小时前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼1 小时前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go