css+div实现鼠标悬浮液态变形按钮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css+div实现鼠标悬浮液态变形按钮动画效果代码
代码标签: css div 鼠标 悬浮 液态 变形 按钮 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "Avant"; src: url("https://assets.codepen.io/383755/avant-garde.woff2") format("woff2"); } body, html { height: 100%; display: grid; place-content: center; grid-template-columns: repeat(2, 1fr); width: 100vw; background: #e8e6de; --elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); --x: 0px; --y: 0px; --t: rgba(255, 255, 255, 0.001); --lightest: #f897d5; --light: #f567c2; --dark: #755ad0; --darkest: #1a2a6c; margin: 0; padding: 0; overflow: hidden; } body * { box-sizing: border-box; } .container { position: relative; width: auto; overflow: hidden; padding: 0.5rem; display: flex; justify-content: flex-end; mix-blend-mode: darken; z-index: 1; margin: 0 -1rem; } .container:last-of-type { justify-content: start; } .container:hover { z-index: 2; } .container:nth-of-type(2) { --lightest: #ffd986; --light: #fdbb2d; --dark: #b21f1f; --darkest: #1a2a6c; } .container .inner { display: inline-block; position: relative; pointer-events: all; z-index: 2; cursor: pointer; box-shadow: 0 0 0 500vmin #e8e6de; } .container .inner:hover:active:before { background-size: 35% 60%, 100% 100%, 100%; } .container .inner:hover:before { filter: blur(2px) brightness(1); background-size: 0px 0px, 100% 100%, 100%; transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out; } .container .inner:before { content: ""; position: absolute; width: 200%; height: 200%; top: 0rem; left: 0rem; filter: blur(2px) brightness(0); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, var(--t) 20%), radial-gradient(circle at center, var(--lightest), var(--light) 5%, var(--dark) 30%, var(--darkest) 50%), var(--darkest); background-size: 0px 0px, 0px 0px, 100%; background-position: 50% 50%; background-repeat: no-repeat; opacity: 1; mix-blend-mode: lighten; z-index: 2; transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out, filter 0.5s ease-in-out; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)); z-index: 2; pointer-events: none; } .container button { padding: 3.5rem 6rem; border: none; font-size: 1.5rem; position: relative; background: transparent; color: #fff; z-index: 2; cursor: pointer; font-weight: 100; letter-spacing: 2px; text-transform: uppercase; font-family: "Avant", "Futura", sans-serif; text-shadow: clamp(-8px, calc((var(--width) / 2 - var(--x)) / 8), 8px) clamp(-8px, calc((var(--height) / 2 - var(--y)) / 8), 8px) 12px rgba(0, 0, 0, 0); transition: text-shadow 500ms var(--elastic); } .container button:hover { --shadow: max( calc( (var(--width) / 2 - var(--x)) / 8 + ((var(--height) / 2 - var(--y)) / 3).........完整代码请登录后点击上方下载按钮下载查看
网友评论0