css实现彩色边框按钮悬浮流动走光动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现彩色边框按钮悬浮流动走光动画效果代码
代码标签: css 彩色 边框 按钮 悬浮 流动 走光 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> @property --d { syntax:'<angle>'; inherits:true; initial-value:0deg } button { width:200px; aspect-ratio:1; font-size:30px; color:#fff; background:0; border:0; border-radius:20px; position:relative; z-index:0; transition:.3s; cursor:pointer } button:before { content:""; position:absolute; inset:-8px; padding:8px; border-radius:28px; background:conic-gradient(from var(--d,0deg),#ff53bb,#0000 30deg 120deg,#00f8d3 150deg 180deg,#0000 210deg 300deg,#ff53bb 330deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:intersect } button:after { content:"";.........完整代码请登录后点击上方下载按钮下载查看
网友评论0