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

代码语言:html

所属分类:菜单导航

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

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

网友评论0