svg+css实现伸缩式fab菜单栏交互效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现伸缩式fab菜单栏交互效果代码

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
    * {
	transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	font-family: "Space Mono", monospace;
}
body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fcdee3;
}

#shape {
	width: 26rem;
	height: 7rem;
	position: relative;
	overflow: hidden;
	border-radius: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	filter: drop-shadow(0 0 1rem #00000022);
}

#shape:hover::before {
	perspective: 100px;
}

#shape:before {
	content: "";
	position: absolute;
	top: -50%;
	right: calc(50% - 3.5rem);
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: 10px -10px 5px 300px #ffffff;
	z-index: -1;
}

.bar_wrapper {
	position: relative;
}

.icon {
	color: #fcdee3;
	padding: 2rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.fab {
	position: absolute;
	bottom: 0;
	left: calc(50% - 3rem);
	width: 6rem;
	height: 6rem;
	margin-bottom: 4rem;
	background-color: #ec606c;
	border-radius: 3rem;
	color: white;
	padding: 1.5rem;
	box-sizing: border-box;
	overflow: hidden;
	filter: drop-shadow(0 0 1rem #00000022);
	cursor: pointer;
	animation: jump 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fab svg {
	cursor: pointer;
}

.fab.expanded {
	height: 21.75rem;
	cursor: default;
}

.fab.expanded > svg {
	transform: rotate(225deg);
}

.fab_actions {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5.75rem;
	transition-delay: 100ms;
}

.fab.expanded > .fab_actions {
	gap: 0.75rem;
}
.fab_actions > svg {
	background-color: #ffffff33;
	width: 2.5rem;
	padding: 1rem;
	border-radius: 50%;
}

.source {
	position: fixed;
	top: 0;
	right: 2%;
	letter-spacing: 0.25rem;
	color: #00000066;
}

.source > a {
	text-decoration: none;
	color: #c32361;
	background: white;
	border-radius: 0.5rem;
	padding: 0 1rem;
	opacity: 0.5;
}

.source > a:hover {
	opacity: 1;
}

@keyframes jump {
	0% {
		transform: translatey(0px) scaley(100%);
	}
	35% {
		transform: translatey(-20px) scaley(110%);
	}
	70% {
		transform: translatey(20px) scaley(95%);
	}
	100% {
		transform: translatey(0px) scaley(100%);
	}
}

@media screen and (max-width: 450px) {
	.bar_wrapper {
		transform: scale(75%);
	}
	.source {
		font-size: 1rem;
	}
}
</style>
    </head>
    <body>
        <!-- partial:index.partial.html -->
        <div class="bar_wrapper">
            <div id="shape">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                    <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z"/>
                    <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                    <path fill-rule="evenodd" d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.5.........完整代码请登录后点击上方下载按钮下载查看