gsap实现鼠标拖拽手写签名板弹出层效果代码
代码语言:html
所属分类:拖放
代码描述:gsap实现鼠标拖拽手写签名板弹出层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://unpkg.com/normalize.css') layer(normalize); /* @import 'normalize.css' layer(normalize); */ @import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); @layer normalize, base, demo, popover, signing; @layer signing { :is(.animated, .signature) { width: var(--surface-width); pointer-events: none; svg { width: 100%; path { stroke-width: 3px; } } } [popover][data-signed='true'] { :is(canvas, [popover] button, .canvas) { pointer-events: none; } .status { translate: 0 100%; -webkit-clip-path: inset(-100% 0 0 0); clip-path: inset(-100% 0 0 0); } .secondary button span { translate: 0 100%; } } .secondary button span { transition: translate 0.2s ease-out; } [popover][data-valid='true']:has(.hold:active) canvas { opacity: 0.1; } [popover] canvas { transition: opacity 0.2s ease-out; } [popover][data-valid='true'] .hold:active .status { transition-duration: calc(var(--sign-on, 0.2) * 1s), 0.2s; -webkit-clip-path: inset(-100% 0 0 0); clip-path: inset(-100% 0 0 0); } :root:has([data-signed='true']) .toggle { background: hsl(140 80% 90%); color: hsl(140 90% 30%); } .hold { padding: 0; border: 0; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 32px; position: relative; overflow: hidden; .status { display: inline-block; position: absolute; inset: 0; color: hsl(140 90% 30%); -webkit-clip-path: inset(-100% 100% 0 0); clip-path: inset(-100% 100% 0 0); transition: translate 0.2s ease-out, -webkit-clip-path 0.2s ease-out; transition: clip-path 0.2s ease-out, translate 0.2s ease-out; transition: clip-path 0.2s ease-out, translate 0.2s ease-out, -webkit-clip-path 0.2s ease-out; } .track { background: hsl(140 80% 90%); width: 100%; height: 200%; display: inline-block; display: grid; grid-template-rows: 1fr 1fr; position: absolute; bottom: 0; span { display: grid; place-items: center; } } > span:last-of-type { height: 100%; display: flex; align-items: center; padding: 0.25rem 0.75rem; } } } @layer popover { :root { --toggle-size: 44px; --surface-width: 380px; --surface-height: 200px; --shadow-color: 0 0% 0%; --shadow: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.07), 0px 1.7px 2.2px -0.4px hsl(var(--shadow-color) / 0.09), 0px 3.2px 4.1px -0.7px hsl(var(--shadow-color) / 0.11), -0.1px 6.1px 7.8px -1.1px hsl(var(--shadow-color) / 0.13), -0.2px 11.2px 14.3px -1.5px hsl(var(--shadow-color) / 0.15); } [data-clickable] { cursor: default; } .placeholder { width: var(--toggle-size); aspect-ratio: 1; display: grid; place-items: center; top: 0; left: 0; pointer-events: none; position: absolute; svg { width: 20px; height: 20px; } } [popover] { width: var(--surface-width); max-width: calc(100vw - 2rem); height: var(--surface-height); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; border-radius: 6px; margin: 0; inset: unset; opacity: 0; padding: 0; overflow: hidden; /* border-color: light-dark(hsl(0 0% 75%), hsl(0 0% 60%)); border-width: 1px; */ border: 0; background: canvasText; color: canvas; box-shadow: var(--shadow); .popover__content { padding: 0.5rem 0; display: grid; grid-template-rows: auto 1fr auto; height: 100%; width: 100%; filter: blur(4px); opacity: 0; width: var(--surface-width); max-width: calc(100vw - 2rem); border-radius: inherit; font-size: 0.875rem; button { cursor: pointer; } header { display: flex; gap: 0 0.5rem; padding-inline: 0.875rem; color: light-dark(hsl(0 0% 50%), hsl(0 0% 80%)); svg { width: 16px; height: 16px; opacity: 0; } } footer { padding-inline: 0.5rem; display: flex; justify-content: space-between; .secondary { display: flex; gap: 0.25rem; button { display: grid; padding: 0; place-items: center; width: 32px; aspect-ratio: 1; border: 0; background: #0000; color: color-mix(in oklch, canvasText, #0000); position: relative; transition: color 0.2s ease-out; span { height: 100%; width: 100%; display: grid; place-items: center; } &::after { content: ''; opacity: 0; position: absolute; inset: 0; border-radius: 6px; background: color-mix(in oklch, canvasText, #0000 94%); transition: opacity 0.2s ease-out; } &:is(:hover, :focus-visible) { color: canvasText; &::after { opacity: 1; } } } svg { width: 18px; height: 18px; } } } .canvas { position: relative; height: 130px; } canvas { flex: 1; width: 100%; height: 100%; position: absolute; inset: 0; } } &::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid light-dark(hsl(0 0% 80%), hsl(0 0% 50%)); } &:popover-open { display: flex; flex-direction: column; } } } @layer demo { /* instruction arrow */ .arrow { display: inline-block; opacity: 0.8; position: fixed; font-size: 0.875rem; font-family: 'Gloria Hallelujah', cursive; transition: opacity 0.26s ease-out; &.arrow--instruction { top: 50%; left: 50%; translate: -160% -70%; rotate: -10deg; svg { color: hsl(0 0% 65%); scale: 1 1; top: 130%; rotate: 35deg; left: 10%; width: 60%; translate: 120% 60%; position.........完整代码请登录后点击上方下载按钮下载查看
网友评论0