div+css实现图片悬浮边框线条伸缩动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现图片悬浮边框线条伸缩动画效果代码
代码标签: div css 图片 悬浮 边框 线条 伸缩 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --s { syntax: "<length>"; initial-value: 0px; inherits: true; } img { --t: 3px; /* control the thickness (corner = 3*edge) */ --s: 40px; /* control the size of the corners (that also affect the size of the edges) */ --g: 8px; /* control the gap */ --c: #755C3B; padding: calc(2*var(--t) + var(--g)); border: var(--t) solid #0000; background: conic-gradient(at var(--s) calc(3*var(--t)),#0000 75%,var(--c) 0) 0 0/calc(100% - var(--s)) calc(100% - 3*var(--t)) border-box, conic-gradient(at calc(3*var(--t)) var(--s),#0000 75%,var(--c) 0) 0 0/calc(100% - 3*var(--t)) calc(100% - var(--s)) border-box, linear-gradient( 0deg,var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0