css实现图片悬浮出现炫酷渐变边框填充动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现图片悬浮出现炫酷渐变边框填充动画效果代码
代码标签: css 图片 悬浮 出现 炫酷 渐变 边框 填充 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ background: white; } @property --h { syntax: "<percentage>"; initial-value: 0%; inherits: true; } img { --b: 15px; /* border width */ --g: 10px; /* gap */ --c: red; width: 250px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; padding: calc(var(--b) + var(--g)); background: conic-gradient(from 180deg in oklch longer hue, red 0 0); -webkit-mask: radial-gradient(farthest-side, #000 calc(100% - var(--b) - var(--g) - 1px), #0000 calc(100% - var(--b) - var(--g)) calc(100% - var(--b)), #000 calc(100% - var(--b) + 1px)), conic-gradient(from 18.........完整代码请登录后点击上方下载按钮下载查看
网友评论0