css实现三角形边框图片悬浮伸缩动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现三角形边框图片悬浮伸缩动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --r { syntax: "<length-percentage>"; initial-value: 0%; inherits: true; } .tri { --r: 40px; /* the radius */ /* not bigger than (width/4*tan(60deg)) otherwise I need an extra gradient */ width: 300px; aspect-ratio: 1/cos(30deg); -webkit-mask: conic-gradient(from -30deg at 50% calc(200% - 3*var(--r)/2),#000 60deg,#0000 0) 0 100%/100% calc(100% - 3*var(--r)/2) no-repeat, radial-gradient(var(--r) at 50% calc(2*var(--r)),#000 98%,#0000 101%), radial-gradient(var(--r),#000 98%,#0000 101%) space no-repeat 0 100%/calc(2*tan(60deg)*var(--r)) calc(2*var(--r)); clip-path: polygon(50% 0,100% 100%,0 100%); transition: --r .6s; cursor: pointer; } /* the opposite direction */ .alt { -webkit-mask: conic-gradient(from 150deg at 50% calc(3*var(--r)/2 - 100%),#000 60deg,#0000 0) 0 0/100% calc(100% - 3*var(--r)/2) no-repeat, radial-gradient(var(--r) at 50% calc(100% - 2*var(--r)),#000 98%,#0000 101%), radial-gradient(var(--r),#000 98%,#0000 101%) space no-repeat 0 0/calc(2*tan(60deg)*var(--r)) calc(2*var(--r)); clip-path: polygo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0