css实现图片边框美化悬浮放大效果代码
代码语言:html
所属分类:悬停
代码描述:css实现图片边框美化悬浮放大效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --a { syntax: "<angle>"; initial-value: 0deg; inherits: true; } @property --d { syntax: "<percentage>"; initial-value: 0%; inherits: true; } img { --b: 10px; /* control the border thickness */ --g: 20px; /* control the gap */ --d: 30%; --a: 45deg; --_o:50% + (var(--d) + var(--g) + var(--b)); --_i:50% + (var(--d) + var(--g)); --_f:50% + (var(--d)); clip-path: polygon( /* */ calc(var(--_o)*sin(-45deg + var(--a))) calc(var(--_o)*cos(-45deg + var(--a))), calc(var(--_o)*sin( 45deg + var(--a))) calc(var(--_o)*cos( 45deg + var(--a))), calc(var(--_o)*sin(135deg + var(--a))) calc(var(--_o)*cos(135deg + var(--a))), calc(var(--_o)*sin(225deg + var(--a))) calc(var(--_o)*cos(225deg + var(--a))), calc(var(--_o)*sin(-45deg + var(--a))) calc(var(--_o)*cos(-45deg + var(--a))), /* */ calc(var(--_i)*sin(-45deg + var(--a))) calc(var(--_i)*cos(-45deg + var(--a))), calc(var(--_i)*sin(225deg + var(--a))) calc(var(--_i)*cos(225deg + var(--a))), calc(var(--_i)*sin(135deg + var(--a))) calc(var(--_i)*cos(135deg + var(--a))), calc(var(--_i)*sin( 45deg + va.........完整代码请登录后点击上方下载按钮下载查看
网友评论0