css实现液态水滴涟漪波纹按钮动画效果代码
代码语言:html
所属分类:其他
代码描述:css实现液态水滴涟漪波纹按钮动画效果代码,按钮边缘有明显的波动动画效果,三种按钮波动的频率不一样。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; color: white; background: #02040c; font-family: "Cabinet Grotesk", sans-serif; -webkit-font-smoothing: antialiased; } main { display: grid; gap: 2rem; padding: 1rem; } button { --button-bg: blue; position: relative; overflow: hidden; cursor: pointer; padding: 1.5rem 2rem; font-family: inherit; font-size: 1.5rem; line-height: 1; border: 1px solid transparent; border-radius: 0.5rem; background: var(--button-bg); color: var(--button-fg, inherit); } @media (prefers-reduced-motion: no-preference) { @property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } button { --_percentage: calc(100% / var(--ripples, 1)); --ripple-speed: 2s; background: linear-gradient(var(--button-bg), var(--button-bg)) padding-box, repeating-conic-gradient( from var(--gradient-angle), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0