css+div实现预定按钮悬浮动画代码
代码语言:html
所属分类:悬停
代码描述:css+div实现预定按钮悬浮动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import "normalize.css"; @font-face { font-family: "Geist Sans"; src: url("//repo.bfw.wiki/bfwrepo/font/GeistVF.ttf") format("truetype"); } *, *:after, *:before { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; font-weight: 80; } button { height: 48px; padding: 0; display: grid; border-radius: 8px; border: 2px solid black; letter-spacing: 0.25px; cursor: pointer; position: relative; background: black; color: white; font-weight: 80; scale: 2; outline-color: hsl(75 100% 45%); outline-offset: 0.25rem; } button:is(:hover, :focus-visible) { --active: 1; } button:active { --pressed: 1; } button > span:nth-of-type(1) { height: 100%; width: 100%; border-radius: 8px; position: absolute; inset: 0; scale: calc(1 - (var(--pressed, 0) * 0.05)); transition: scale 0.1s; } button:is(:hover, :focus-visible) .container { width: 100%; } .container { --mask-image: url(//repo.bfw.wiki/bfwrepo/icon/65a76c221e2f2.png); --spread: 24px; --size: 28px; width: 58px; height: 100%; background: hsl(75 100% 65%); position: absolute; left: 0; transition: width 0.25s; border-radius: 6px; box-shadow: 0 10px 10px -5px hsl(0 0% 0% / 0.5); container-type: inline-size; } .primary { content: ""; position: absolute; inset: 0; background: hsl(0 0% 0% / 0.15); z-index: 2; -webkit-mask: var(--mask-image) 50% 50% / var(--size) var(--size) no-repeat; mask: var(--mask-image) 50% 50% / var(--size) var(--size) no-repeat; container-type: inline-size; } :where(.primary, .complimentary)::after { --distance: calc(100cqi + 100%); content: ""; height: calc(var(--size) * 4); aspect-ratio: 1; position: absolute; left: 0%; top: 50%; translate: -50% -50%; background: radial-gradient(hsl(0 0% 0%), tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0