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

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

代码语言：html

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

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro|Oswald:300);
body {
  font: 14px/120% "Source Sans Pro", sans-serif;
  color: #999;
  background: #111;
  transition: all 0.2s;
}

h1, h2, h3 {
  font-family: "Oswald", "Arial Narrow", sans-serif;
}

.logo {
  margin: 1em auto;
  text-align: center;
}
.logo h1 {
  font-size: 2em;
}

.menu_wrapper {
  padding: 1em;
  perspective: 500px;
}

nav {
  width: 230px;
  max-width: 360px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateY(20deg) rotateX(36deg) rotateZ(-6deg);
  transition: transform 1s;
}
nav > ul {
  list-style: none;
  padding: 1em;
  transform: translateZ(-100px);
  transform-style: preserve-3d;
  transition: all 0.2s;
}
nav > ul > li {
  margin: 0 0 0.5em 0;
  position: relative;
  color: #222;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  transition: all 0.2s;
  transform-style: preserve-3d;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  background-color: #ffac05;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFAC05', endColorstr='#FFD96404');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYWMwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5NjQwNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffac05), color-stop(100%, #d96404));
  background-image: -moz-linear-gradient(top, #ffac05 0%, #d96404 100%);
  background-image: -webkit-linear-gradient(top, #ffac05 0%, #d96404 100%);
  background-image: linear-gradient(to bottom, #ffac05 0%, #d96404 100%);
}
nav > ul > li:hover {
  background: #fff;
  transform: translateZ(16px) rotateY(4deg);
}
nav > ul > li:hover a {
  color: #222;
}
nav > ul > li:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateZ(60px) rotateY(-25deg);
}
nav > ul .........完整代码请登录后点击上方下载按钮下载查看