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