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