gsap+css实现按钮点击波纹扩散动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+css实现按钮点击波纹扩散动画效果代码
下面为部分代码预览,完整代码请点击下载或在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"); button { --hover: 0; --button-bg: hsla( calc(336 - 7 * var(--hover)), calc(77% - 8% * var(--hover)), calc(30% + 7% * var(--hover)), 0.9 ); --button-border: hsl( calc(335 - 11 * var(--hover)), calc(77% - 1% * var(--hover)), 39% ); --button-label: hsl(272, 90%, 92%); --button-shadow-1: hsla(335, 77%, 38%, 0.35); --button-shadow-2: hsla(270.91deg, 19.89%, 18.23%, 0.55); cursor: pointer; position: relative; padding: 1rem 2.5rem; background-color: var(--button-bg); border: 0.2rem solid var(--button-border); border-radius: 3rem; box-shadow: 0 0 0.2em 0px var(--button-shadow-1), inset 0 0 0.3em 0 var(--button-shadow-2), inset 0 0 0.2em 0 var(--button-shadow-1), 0 0 calc(var(--hover) * 6em) 0 var(--button-border); color: var(--button-label); font: 500 clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem)/1 "Inter", sans-serif; letter-spacing: 0.05rem; text-transform: uppercase; transition: box-shadow 0.25s linear; } button .glow { pointer-events: none; display: block; position: absolute; inset: 0; border: inherit; border-radius: 3em; filter: b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0