jquery+css实现图标子菜单点击伸缩弹出效果代码-html代码-BFW代码库

jquery+css实现图标子菜单点击伸缩弹出效果代码

代码语言：html

代码描述：jquery+css实现图标子菜单点击伸缩弹出效果代码

下面为部分代码预览，完整代码请点击下载或在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>
html,body,.container {
	width:100%;
	height:100%;
	margin:0;
	overflow:hidden
}
.container {
	background:#2F2F31
}
#navMenu {
	top:150px;
	left:200px;
	width:140px;
	height:140px;
	z-index:100;
	background:linear-gradient(90deg,#910EC9,#d350db,#910EC9);
	-webkit-background:linear-gradient(90deg,#910EC9,#d350db,#910EC9);
	background-size:400% 400%;
	-webkit-background-size:400% 400%;
	animation:gradient 5s infinite;
	-webkit-animation:gradient 5s infinite
}
#navMenu:hover,.nav:hover {
	background:#d350db
}
@keyframes gradient {
	50% {
	background-position:100% 0
}
}@-webkit-keyframes gradient {
	50% {
	background-position:100% 0
}
}.diamond {
	position:absolute;
	width:67.5px;
	height:67.5px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	background:#910EC9;
	margin:10px;
	cursor:pointer;
	box-shadow:1px 4px 10px #101010
}
.diamond:active {
	background:#710b9e;
	box-shadow:0 1px 2.5px #101010;
	transition:.1s;
	-webkit-transition:.1s
}
.nav {
	transition:.5s;
	-webkit-transition:.5s
}
.nav1 {
	top:86px;
	left:287px
}
.nav2 {
	top:136px;
	left:337px
}
.nav3 {
	top:186px;
	left:387px
}
.nav4 {
	top:236px;
	left:337px
}
.nav5 {
	top:286px;
	left:287px
}
.small {
	top:186px;
	left:236px;
	z-index:10;
	background:#643fc1;
	transition:.5s;
	-webkit-transition:.5s
}
.rotCorrect {
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	margin-left:14px;
	margin-top:8px
}
#mainRotCorrect {
	margin-left:26px;
	margin-top:28px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	max-width:90px
}
i {
	color:#EEE
}

</style>
</head>

<body>


        <div class="container">
            <div id="navMenu" class="diamond ">
                <div id="mainRotCorrect" class="rotCorrect"&.........完整代码请登录后点击上方下载按钮下载查看