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; } .ribbon { --c: #60b0a7; /* control the cutout part (adjust each variable to understand what it does) */ --r: .8em; --a: 0deg; /* this will get animated */ --d: .5em; padding-inline: .3em; margin: calc(.5lh + var(--r)) calc(1.2lh + var(--d)); line-height: 1.75; background: var(--c); position: relative; white-space: nowrap; transition: --a .6s; cursor: pointer; } .ribbon:hover { --a: 60deg; } .ribbon:before, .ribbon:after { content: ""; position: absolute; width: calc(1lh + var(--d)); height: calc(1.5lh + var(--r)); border: solid var(--c); box-sizing: border-box; rotate: calc(var(--a) - 90deg); } .ribbon:before { left: 99%; top: 0; border-width: 1lh 1lh 0 0; border-radius: 0 99.........完整代码请登录后点击上方下载按钮下载查看
网友评论0