纯css+svg实现按钮悬浮切换效果
代码语言:html
所属分类:悬停
代码描述:纯css+svg实现按钮悬浮切换效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .wrapper { --background: #4F29F0; --background-dark: #371CA8; --icon-color: #414856; --shape-color-01: #B8CBEE; --shape-color-02: #7691E8; --shape-color-03: #FDD053; --width: 80px; --height: 80px; --border-radius: var(--height); width: var(--width); height: var(--height); position: relative; border-radius: var(--border-radius); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); overflow: hidden; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-transform: scale(var(--scale, 1)); transform: scale(var(--scale, 1)); } .wrapper:active { --scale: .95; } .wrapper > .btn { width: var(--width); height: var(--height); position: relative; background: var(--background); border-radius: var(--border-radius); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-transition: background 0s ease .5s; transition: background 0s ease .5s; } .wrapper > .btn:before, .wrapper > .btn:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-clip-path: circle(150% at 200% 200%); clip-path: circle(150% at 200% 200%); } .wrapper > .btn:before { background: var(--background-dark); } .wrapper > .btn:after { background: var(--background); } .wrapper > svg { width: 32px; height: 42px; position: absolute; z-index: 2; -webkit-transition: -webkit-transform .3s linear; transition: -webkit-transform .3s linear; transition: transform .3s linear; transition: transform .3s linear, -webkit-transform .3s linear; } .wrapper > svg .shape { fill: none; stroke: #fff; stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round; } .wrapper input { height: 100%; width: 100%; border-radius: var(--border-radius); cursor: pointer; position: absolute; z-index: 5; margin: 0; opacity: 0; } .wrapper input:checked ~ .btn { background: var(--background-dark); } .wrapper input:checked ~ .btn:before { -webkit-clip-path: circle(150% at 100% 100%); clip-path: circle(150% at 100% 100%); -webkit-transition: -webkit-clip-path .5s ease; transition: -webkit-clip-path .5s ease; transition: clip-path .5s ease; transition: clip-path .5s ease, -webkit-clip-path .5s ease; z-index: 1; } .wrapper input:checked ~ .btn:after { -webkit-clip-path: circle(150% at 200% 200.........完整代码请登录后点击上方下载按钮下载查看
网友评论0