css实现三维炫酷多级菜单效果代码-html代码-BFW代码库

css实现三维炫酷多级菜单效果代码

代码语言：html

代码描述：css实现三维炫酷多级菜单效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
* {
	margin:0;
	padding:0;
	list-style:none;
	text-decoration:none
}
body {
	height:100vh;
	background-image:linear-gradient(45deg,#1e375c 30%,#703254 100%)
}
.menu_wrapper {
	padding:20px;
	perspective:300px
}
ul,li {
	cursor:pointer
}
nav {
	position:relative;
	width:230px;
	max-width:360px;
	margin:100px auto;
	transform-style:preserve-3d;
	animation:big 2s forwards,ball 1s 2s ease-in-out infinite alternate
}
.main {
	transform-style:preserve-3d;
	transform:perspective(400px) rotateY(0deg)
}
li {
	margin:5px;
	position:relative;
	transition:all .2s;
	transform-style:preserve-3d;
	border-radius:6px;
	border:1px solid #fbcc34
}
li:hover {
	background-image:linear-gradient(45deg,rgba(251,255,52,.2) 30%,rgba(255,173,54,.5) 100%);
	transform:translateZ(30px) rotateY(4deg)
}
li:hover ul {
	opacity:.5;
	visibility:visible;
	transform:translateZ(60px) rotateY(-25deg)
}
li:hover ul li {
	margin-left:5px;
	transition:all .4s
}
a {
	display:block;
	padding:5px;
	line-height:40px;
	color:#fff;
	font-size:24px;
	transition:all .2s;
	font-family:Alegreya Sans
}
a:hover {
	color:#222;
	font-size:28px
}
.sub1,.sub2 {
	opacity:0;
	visibility:hidden;
	position:absolute;
	left:80%;
	top:0;
	padding-left:30px;
	min-width:300px;
	transition:all .2s;
	transform:translateZ(-11px) rotateY(-26deg) translateX(140px)
}
.button1,.button2 {
	display:inline-block;
	line-.........完整代码请登录后点击上方下载按钮下载查看