css+svg实现悬浮按钮展示融合菜单弹出效果代码-html代码-BFW代码库

css+svg实现悬浮按钮展示融合菜单弹出效果代码

代码语言：html

代码描述：css+svg实现悬浮按钮展示融合菜单弹出效果代码

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
	background:#FFF;
	color:#585858;
	font-family:"Exo 2",sans-serif;
	text-align:center;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
a {
	color:inherit
}
h1 {
	font-weight:300;
	padding-top:20px;
	margin:20px 0
}
.inspiration {
	position:absolute;
	bottom:10px;
	right:10px;
	font-style:oblique
}
.item-menu {
	padding-top:20px;
	height:250px;
	box-sizing:border-box;
	font-size:20px;
	text-align:center;
	filter:url("#shadowed-goo")
}
.item-menu .real-menu {
	transform:translate3d(0,-65px,0);
	transition:transform ease-out 200ms
}
.item-menu .menu-item {
	background:#12CC66;
	border-radius:100%;
	width:80px;
	height:80px;
	color:white;
	text-align:center;
	line-height:80px;
	transition:transform ease-out 200ms;
	display:inline-block;
	position:relative
}
.item-menu .menu-open-button {
	background:#12CC66;
	border-radius:100%;
	width:80px;
	height:80px;
	color:white;
	text-align:center;
	line-height:80px;
	transition:transform ease-out 200ms;
	display:inline-block;
	position:relative;
	width:40px;
	height:40px
}
.item-menu .menu-open {
	display:none
}
.item-menu .plus {
	width:18px;
	height:2px;
	background:white;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-9px;
	margin-top:-1px;
	transition:transform 200ms
}
.item-menu .plus.plus-1 {
	transform:rotate(90deg) translate3d(0,0,0)
}
.item-menu .plus.plus-2 {
	transform:rotate(0) translate3d(0,0,0)
}
.item-menu .menu-item:hover {
	background:white;
	color:#12CC66
}
.item-menu .menu-item:nth-child(1) {
	transition-duration:70ms;
	transform:translate3d(171px,0,0) scale(0.5)
}
.item-menu .menu-item:nth-child(2) {
	transition-duration:130ms;
	transform:translate3d(85.5px,0,0) scale(0.5)
}
.item-menu .menu-item:nth-child(3) {
	transition-duration:190ms;
	transform:translate3d(0,0,0) scale(0.5)
}
.item-menu .menu-item:nth-child(4) {
	transition-duration:130ms;
	transform:translate3d(-85.5px,0,0) scale(0.5)
}
.item-menu .menu-item:nth-child(5) {
	transition-duration:70ms;
	transform:translate3d(-171px,0,0) scale(0.5)
}
.item-menu .menu-item:after {
	content:attr(data-name);
	position:absolute;
	font-size:14px;
	font-weight:500;
	color:#12CC66;
	line-height:40px;
	left:50%;
	white-space:nowrap;
	transform:translate3d(-50%,0,0);
	display:none
}
.item-menu .menu-open-button {
	z-index:2;
	transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275);
	transition-duration:400ms;
	transform:scale(1.1,1.1) translate3d(0,0,0);
	cursor:pointer
}
.item-menu .menu-open-button:hover {
	transform:scale(1.2,1.2) translate3d(0,0,0)
}
.item-menu .menu-open:checked+.menu-open-button {
	transition-timing-function:linear;
	transition-duration:200ms;
	transform:scale(1,1) rotate(-45deg) translate3d(0,0,0)
}
.item-menu .menu-open:checked ~ .real-menu {
	transform:translate3d(0,5px,0)
}
.item-menu .menu-open:checked ~ .real-menu .menu-item {
	transition-timing-function:cubic-bezier(0.935,0,0.34,1.33);
	transform:translate3d(0,0,0)
}
.item-menu .menu-open:checked ~ .real-menu .menu-item:nth-child(1) {
	transition-duration:320ms
}
.item-menu .menu-open:checked ~ .real-menu .menu-item:nth-child(2) {
	transition-duration:240ms
}
.........完整代码请登录后点击上方下载按钮下载查看