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

代码语言:html

所属分类:菜单导航

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

代码标签: 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:#1.........完整代码请登录后点击上方下载按钮下载查看

网友评论0