css+svg实现横竖按钮栏调整宽度高度拖拽效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：css+svg实现横竖按钮栏调整宽度高度拖拽效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
	background: url(//repo.bfw.wiki/bfwrepo/image/65c31a6b68ab8.png), hsl(0 0% 0%);
  background-size: cover;
  background-position: center bottom;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 0.75);
  z-index: -1;
}

.controls {
	position: fixed;
	top: 1rem;
	right: 1rem;
	display: flex;
	gap: 1rem;
	color: white;
	font-weight: 300;
}

label {
	cursor: pointer;
}

.dock {
	--spacing: 1.5rem;
	overflow: hidden;
	resize: horizontal;
	width: 422px;
	min-width: 344px;
	max-width: calc(100% - 2rem);
	max-height: calc(56px + (2 * var(--spacing)));
}

nav {
	display: flex;
	gap: var(--spacing);
	padding: var(--spacing);
	overflow: auto;
	background: hsl(0 0% 40% / 0.5);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	border-radius: 24px;
	-webkit-clip-path: inset(0 0 0 0 round 24px);
	        clip-path: inset(0 0 0 0 round 24px);
	-ms-scroll-snap-type: x mandatory;
	    scroll-snap-type: x mandatory;
	scrollbar-color: hsl(0 0% 10% / 0.5) transparent;
	scrollbar-width: thin;
	box-shadow: 0 1px hsl(0 0% 100% / 0.5) inset;
	height: 100%;
	width: 100%;
	align-items: center;
}

a {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	background: linear-gradient(hsl(0 0% 100% / 0.15), #0000), hsl(0 0% 4%);
	border-radius: 8px;
	flex: 1 0 auto;
	scroll-snap-align: center;
	width: 56px;
	height: 56px;
	box-shadow:
		0 -1px hsl(0 0% 0% / 0.5) inset,
		0 2px 4px hsl(0 0% 0% / 0.5),
		0 1px hsl(0 0% 100% / 0.5) inset;
}

a svg {
	width: 65%;
	color: white;
	fill: white;
}

:root:has(#direction:checked) nav {
	flex-direction: column;
	-ms-scroll-snap-type: y mandatory;
	    scroll-snap-type: y mandatory;
}
:root:has(#direction:checked) .dock {
	flex-direction: column;
	min-width: 0;
	max-height: calc(100vh - 2rem);
	min-height: 340px;
	width: unset;
	resize: vertical;
	max-width: calc(56px + (var(--spacing) * 2));
}

@supports (animation-timeline: scroll()) {
	a {
		-webkit-animation-name: scale, scale;
		        animation-name: scale, scale;
		-webkit-animation-fill-mode: both;
		        animation-fill-mode: both;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
		animation-direction: normal, reverse;
		animation-timeline: view(inline);
		animation-range: entry 0 entry 150%, exit -50% exit 100%;
	}

	:root:has(#direction:checked) a {
		animation-timeline: view();
	}

	@-webkit-keyframes scale {
		0% { scale: 0.15; }
	}

	@keyframes scale {
		0% { scale: 0.15; }
	}
}
</style>

  
</head>

<body translate="no">
  <div class="controls">
      <label for="direction">vertical</label>
      <input type="checkbox" id="direction">
    </div>
    <div class="dock">
      <nav>
        <a href="#">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="w-6 h-6"
          >
            <path
              d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"
            />
            <path
              d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z"
            />
          </svg>
        </a>
        <a href="#">
          <svg
            role="img"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <title>X</title>
            <path
              d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
            />
          </svg>
        </a>
        <a href="#">
          <svg
            role="img"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <title>OpenAI</title>
            <path
              d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.080.........完整代码请登录后点击上方下载按钮下载查看