css+svg实现可伸缩弹出子菜单效果代码-html代码-BFW代码库

css+svg实现可伸缩弹出子菜单效果代码

代码语言：html

代码描述：css+svg实现可伸缩弹出子菜单效果代码

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

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

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


  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: sans-serif;
	background: #2f2e34;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	font-family: "Inter", sans-serif;
}

button {
	background: none;
	border: none;
}

#button-container button svg {
	transition: transform 1s ease;
}

#button-container,
#button-container span,
#button-container button {
	display: flex;
	white-space: nowrap;
	gap: 1px;
	align-items: center;
	cursor: pointer;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	color: #c7c7c7;
}

#button-container {
	color: #c7c7c7;
	height: 40px;
	background: rgba(255, 255, 255, 0.03);
	width: 300px;
	border: 2px solid #a5a5a5;
	border-radius: 12px;
	padding: 0px 16px;
	overflow: hidden;
	transition: width 1s ease;
	cursor: pointer;
}

#button-container > svg,
#button-container span {
	border-left: 2px solid rgba(255, 255, 255, 0.1);
	padding: 5px;
	height: 100%;
}

#button-container.minimized {
	width: 77px;
}

#button-container.minimized > svg,
#button-container.minimized span {
	display: none;
}

#button-container.minimized button svg {
	transform: rotate(180deg);
}

#button-container:hover {
	transform: scale(1.1);
}
</style>


  
  
</head>

<body>
  <div id="button-container" class="minimized">
	<button type="button" onclick="toggleMinimize()">Contacts
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#C7C7C7" />
	</button>

	<span></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z" fill="#C7C7C7" />
			<path d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z" fill="#C7C7C7" />
		</svg>
		Copy Email</span>

	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M6.5 8C7.32843 8 8 7.32843 8 6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8Z" fill="#C7C7C7" />
		<path d="M5 10C5 9.44772 5.44772 9 6 9H7C7.55228 9 8 9.44771 8 10V18C8 18.5523 7.55228 19 7 19H6C5.44772 19 5 18.5523 5 18V10Z" fill="#C7C7C7" />
		<path d="M11 19H12C12.5523 19 13 18.5523 13 18V13.5C13 12 16 11 16 13V18.0004C16 18.5527 16.4477 19 17 19H18C18.5523 19 19 18.5523 19 18V12C19 10 1.........完整代码请登录后点击上方下载按钮下载查看