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-height:30px;
	width:45%;
	margin:0 0 .325em -3em;
	box-shadow:5px 5px 20px rgba(0,0,0,0.7);
	transform-style:preserve-3d
}
.button1 a,.button2 a {
	color:#111 font-size:16px;
	line-height:120%;
	border-radius:6px;
	font-family:'Work Sans',sans-serif
}
.button1 a:hover,.button2 a:hover {
	background:#fbcc34;
	animation:hover 1s
}
.text {
	text-align:center;
	color:#ddd;
	font-family:Alegreya Sans;
	text-shadow:1px 1px 5px #555
}
@keyframes big {
	0% {
	transform:rotateY(-90deg)
}
25% {
	transform:rotateY(270deg)
}
50% {
	transform:rotateY(630deg)
}
100% {
	transform:rotateY(759deg)
}
}@keyframes hover {
	0% {
	transform:perspective(300px) rotateX(0deg)
}
50% {
	transform:perspective(300px) rotateX(-300deg)
}
100% {
	transform:per.........完整代码请登录后点击上方下载按钮下载查看