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/css?family=Roboto");
    	* {
    	box-sizing:border-box;
    }
    :root {
    	--bg:#F5F5F6;
    	--primary:#d81b60;
    	--secondary:#4a148c;
    	--icon-color:white;
    }
    body {
    	font-family:'Roboto',sans-serif;
    	background-color:var(--bg);
    	height:100vh;
    	margin:0;
    }
    p {
    	font-size:2em;
    	padding-left:1em;
    }
    svg {
    	width:1em;
    }
    footer {
    	position:absolute;
    	left:0;
    	bottom:0;
    	width:100%;
    	padding:1.2em 0.7em;
    	user-select:none;
    }
    .closed ~ .footer-bg::after {
    	width:70px;
    }
    .footer-bg {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	overflow:hidden;
    	z-index:-1;
    }
    .footer-bg::after {
    	content:'';
    	position:absolute;
    	left:50%;
    	top:0px;
    	transform:translate(-50%,-85%);
    	border-radius:50px;
    	width:240px;
    	height:150px;
    	box-shadow:0px 0px 0px 2000px var(--primary);
    	transition:width 0.3s;
    }
    .add-menu {
    	position:absolute;
    	left:50%;
    	top:0;
    	transform:translate(-50%,-70%);
    	background-color:var(--secondary);
    	width:200px;
    	height:50px;
    	border-radius:99999px;
    	transition:width 0.3s;
    }
    footer svg {
    	width:30px;
    	cursor:pointer;
    	fill:var(--icon-color);
    }
    .closed .add-btn:not(.open-close) {
    	transform-origin:top left;
    	transform:scale(0) translate(-50%,-50%);
    }
    .closed .open-close {
    	transform:translate(-50%,-50%) rotate(0deg);
    }
    .add-btn {
    	position:absolute;
    	top:50%;
    	left:50%;
    	transition:0.3s;
    }
    .add-file {
    	transform:scale(1) translate(-300%,-50%);
    }
    .add-list {
    	transform:scale(1) translate(-175%,-50%);
    }
    .open-close {
    	transform:translate(-50%,-50%) rotate(45deg);
    }
    .add-recording {
    	transform:scale(1) translate(75%,-50%);
    }
    .add-note {
    	transform:scale(1) translate(200%,-50%);
    }
    .add-menu.closed {
    	width:50px;
    }
    .footer-right {
    	float:right;
    }
    </style>
</head>

<body>
    <p>Click the <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></p>
    <footer><span class="footer-left"><svg viewBox="0 0 18 18"><path d="M2 13.5h14V12H2v.........完整代码请登录后点击上方下载按钮下载查看