gsap+Draggable实现拖拽式下拉框效果代码-html代码-BFW代码库

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

代码语言：html

所属分类：拖放

代码描述：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] { .........完整代码请登录后点击上方下载按钮下载查看