gsap实现涂抹型按钮效果代码
代码语言:html
所属分类:其他
代码描述:gsap实现涂抹型按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap'); *, *:after, *:before { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { font-size: 16px; } body { background: hsl(0 0% 4%); display: grid; place-items: center; min-height: 100vh; font-family: "Inter", sans-serif, system-ui; } .button { --smoke: hsl(0 0% 10% / 0.5); --backdrop: hsl(0 0% 50%); --spread: 0.25rem; --active: 1; position: relative; padding: 0; font-weight: 500; display: grid; grid-template: 1fr / 1fr; place-items: center; border: 0; background: transparent; cursor: pointer; } .button:is(:hover, :focus-visible) { --active: 1.02; } .button:active { --active: 0.98; } .button > * { grid-area: 1 / 1; } .button__foreground { box-shadow: 0 0 var(--spread) 0 var(--backdrop) inset; z-index: 3; } .button__foreground:after { content: ""; position: absolute; inset: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0