css+div实现聊天输入框左侧按钮伸缩弹出子菜单效果代码-html代码-BFW代码库

css+div实现聊天输入框左侧按钮伸缩弹出子菜单效果代码

代码语言：html

代码描述：css+div实现聊天输入框左侧按钮伸缩弹出子菜单效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
<style>
    :root {
	--lavender: #f0ebff;
	--violet: #643cff;
}
body {
	margin: 0;
	background: var(--lavender);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100wh;
}
.container {
	overflow: hidden;
	width: 300px;
	height: 80px;
	background: var(--violet);
	border-radius: 50px;
	position: relative;
	box-shadow: 0px 40px 100px -25px #643cff;
	transform-origin: 10% 50%;
}
.container > * {
	height: 50px;
	width: 50px;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.2);
	position: absolute;
	top: 15px;
	left: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	colo.........完整代码请登录后点击上方下载按钮下载查看