css实现炫酷按钮悬浮边框照射走光动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现炫酷按钮悬浮边框照射走光动画效果代码
代码标签: css 炫酷 按钮 悬浮 边框 照射 走光 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <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: none; border: none; 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 } b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0