gsap+Draggable实现拖拽式下拉框效果代码

代码语言:html

所属分类:拖放

代码描述:gsap+Draggable实现拖拽式下拉框效果代码

代码标签: gsap Draggable 拖拽 下拉

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 


 
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css">
 
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css">
<style>


*,
*:after,
*:before {
       
box-sizing: border-box;
}

body
{
       
display: grid;
       
place-items: center;
       
min-height: 100vh;
       
font-family:  'Google Sans', sans-serif, system-ui;
       
background: var(--surface-2);
}

[popover] {
       
border: 0;
       
padding: 0;
       
margin: 0;
       
-webkit-clip-path: inset(100% -100% -100vh -100%);
               
clip-path: inset(100% -100% -100vh -100%);
       
overflow: visible;
/*      transition: display 0.5s;*/
       
background: none;
}

/*[popover]:initial {*/
/*      --show: 0;*/
/*      transition: display 0.5s;*/
/*}*/
[popover]:popover-open {
       
--show: 1;
}

/*.list:initial {
        transform: translate(0, 100%);
}*/


.drag-list {
       
--backdrop: var(--surface-1);
       
transform: translate(0, calc(var(--show, 0) * 100%));
       
transition: transform 0.25s;
}

.drag-list {
       
background: var(--backdrop);
       
transform-origin: 50% 0%;
}

.drag-list:after,
.drag-list:before {
       
content: "";
       
position: absolute;
       
bottom: 100%;
       
height: 100%;
       
left: 0;
       
right: 0;
       
background-color: var(--backdrop);
}

.drag-list:after {
       
background: transparent;
       
background-image: url("//repo.bfw.wiki/bfwrepo/images/book/bear-2022--black.png");
       
background-size: 60%;
       
background-position: 50% 90%;
       
background-repeat: no-repeat;
       
opacity: 0.25;
       
filter: saturate(0.3);
}

@media (prefers-color-scheme: dark) {
       
.drag-list:after {
               
background-image: url("//repo.bfw.wiki/bfwrepo/images/book/bear-2022--white.png");
       
}
}

[behavior=button] {
       
padding: 0;
       
width: 180px;
       
background: var(--surface-1);
       
position: relative;
}

[behavior=selected-value] {
       
flex: 1;
       
text-align: left;
}

[popover] {
       
anchor-name: --listbox;
       
display: block;
       
background: red;
       
translate: 0 -100%;
}

.pop-wrap {
       
position: relative;
}

:is([behavior=button], option) {
       
display: flex;
       
align-items: center;
       
gap: 1rem;
       
padding: 0.5rem 1rem;
       
justify-content: flex-start;
}

.handle {
       
width: 48px;
       
aspect-ratio: 1;
       
position: absolute;
       
top: 100%;
       
left: 50%;
       
translate: -50% 0;
       
border-radius: 50%;
       
transition: background 0.2s;
       
overflow: hidden;
}

.handle:hover:not(:active) {
       
background: hsl(0 0% 50% / 0.2);
}

.handle__cord {
       
position: absolute;
       
left: 50%;
       
height: 100%;
       
top: 40%;
       
width: 10%;
       
background: linear-gradient(90deg,transparent 55%, white), var(--text-2);
       
translate: -50% -90%;
}

.handle__tug {
       
position: absolute;
       
width: 30%;
       
aspect-ratio: 1;
/*      border-radius: 50%; */
       
background: linear-gradient(80deg, transparent 55%, hsl(0 0% 100% / 1)), var(--text-2);
       
top: 40%;
       
left: 50%;
       
translate: -50% 0;
 
-webkit-clip-path: polygon(0 100%, 25% 0, 75% 0, 100% 100%);
         
clip-path: polygon(0 100%, 25% 0, 75% 0, 100% 100%);
 
}

.sock {
       
width: 24px;
       
flex-shrink: 0;
}

:root:not(:has(:checked)) [behavior=button] .sock path:first-of-type {
       
fill: white;
}
:root:not(:has(:checked)) [behavior=button] .sock path:last-of-type {
       
fill: black;
}

selectmenu:has(:popover-open) .marker {
       
rotate: 180deg;
}

selectmenu
{
       
box-shadow: var(--shadow-5);
}

[behavior=button]:focus-visible {
       
outline-color: hsl(var(--hue) 100% 50%);
       
outline-offset: -2px;
}

.sock path:first-of-type {
       
fill: hsl(var(--hue) 80% 80%);
}
.sock path:last-of-type {
       
fill: hsl(var(--hue) 50% 50%);
}

[value=red] { --hue: 10; }
[value=orange] { --hue: 30; }
[value=yellow] { --hue: 45; }
[value=green] { --hue: 140; }
[value=blue] { --hue: 210; }

option:is(:hover, :focus-visible) {
       
--active: 1;
       
background: var(--surface-3);
}

option svg
{
       
transform:
                rotate
(calc(var(--active, 0) * 10deg))
                scale
(calc((var(--active, 0) * 0.25) + 1));
       
transition: transform 0.2s;
}

option:is(:hover, :focus-visible) {
       
outline-color: hsl(var(--hue) 100% 50%);
       
outline-offset: -2px;
}

.marker {
       
width: 16px;
       
fill: var(--text-2);
       
transform-origin: 50% 45%;
       
transition: rotate 0.2s;
}
</style>

 
</head>

<body>
 
<selectmenu>
 
<div slot="button">
   
<button behavior="button">
     
<svg class="sock" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 201">
       
<path d="m9.284 152.432 36.795-46.23c3.506-4.492 5.524-10.121 5.685-15.853l2.348-84.06C54.163 4.456 55.638 3 57.44 3h56.609c.919 0 1.797.387 2.426 1.068.629.681.953 1.598.896 2.53l-5.59 89.814 7.347 16.81a22.571 22.571 0 0 1 .101 17.769c-2.397 5.66-7.049 10.083-12.765 12.134l-18.73 6.723-35.857 39.861c-5.35 5.946-12.847 9.292-20.73 9.291-.405 0-.812-.009-1.219-.027-8.325-.363-16.01-4.426-21.086-11.145-7.95-10.525-7.768-25.08.443-35.396Z" fill="#F30909" />
       
<path d="m7.3 153.482 38.18-47.174a27.445 27.445 0 0 0 5.899-16.177l2.436-85.776A3.454 3.454 0 0 1 57.268 1h58.738a3.454 3.454 0 0 1 3.447 3.672l-5.8 91.646 7.624 17.154a22.683 22.683 0 0 1 .105 18.131 22.68 22.68 0 0 1-13.246 12.382l-19.435 6.859-37.206 40.675a29.096 29.096 0 0 1-22.774 9.453 29.102 29.102 0 0 1-21.88-11.373 29.076 29.076 0 0 1 .46-36.117ZM66.806 7.907h-6.182l-.793 27.916h6.975V7.907Zm15.368 0h-8.46v27.916h8.46V7.907Zm6.907 0v27.916h7.883l1.7-27.916H89.08Zm16.503 0-1.699 27.916h6.676l1.766-27.916h-6.743ZM89.856 143.112l15.982-5.641c4.179-1.475 7.446-4.529 9.199-8.6 1.753-4.071 1.728-8.544-.072-12.594l-6.409-14.42a30.715 30.715 0 0 0-14.393 9.838 30.61 30.61 0 0 0-6.829 19.252c0 4.209.865 8.348 2.522 12.165Zm-43.46 43.744 37.248-40.718a37.441 37.441 0 0 1-3.218-15.191 37.537 37.537 0 0 1 8.376-23.609 37.652 37.652 0 0 1 18.002-12.175l3.318-52.433H59.634l-1.352 47.596a34.393 34.393 0 0 1-7.406 20.291l-.019.024-38.188 47.185c-.129.158-.25.319-.373.48 16.312.662 30.443 12.341 33.79 28.87.103-.107.21-.21.31-.32Zm-34.077-1.464a22.207 22.207 0 0 0 16.698 8.679 22.217 22.217 0 0 0 10.777-2.262 29.088 29.088 0 0 0-.383-2.83c-2.756-14.709-16.034-24.787-30.723-23.716a22.192 22.192 0 0 0 3.631 20.129Z" fill="#8F0000" />
     
</svg>
     
<span behavior="selected-value"> Choose your sock! </span>
     
<span behavior="marker">
       
<svg class="marker" viewBox="0 0 320 512" title="angle-down">
         
<path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" />
       
</svg>
     
</span>
   
</button>
 
</div>
 
<div class="listbox" slot="listbox">
   
<div popover behavior="listbox">
     
<div class="list">
       
<div class="drag-list">
         
<option value="red">
           
<svg class="sock" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 201">
              <path d="m9.284 152.432 36.795-46.23c3.506-4.492 5.524-10.121 5.685-15.853l2.348-84.06C54.163 4.456 55.638 3 57.44 3h56.609c.919 0 1.797.387 2.426 1.068.629.681.953 1.598.896 2.53l-5.59 89.814 7.347 16.81a22.571 22.571 0 0 1 .101 17.769c-2.397 5.66-7.049 10.083-12.765 12.134l-18.73 6.723-35.857 39.861c-5.........完整代码请登录后点击上方下载按钮下载查看

网友评论0