css实现菜单悬浮翻转效果代码-html代码-BFW代码库

css实现菜单悬浮翻转效果代码

代码语言：html

所属分类：悬停

代码描述：css实现菜单悬浮翻转效果代码

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

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
<style>
    @import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700);
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #2C2D2E url('//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png') center top no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  font-family: "PT Sans Narrow", sans-serif;
}
nav {
  background: #fff;
  margin: 15vh 2rem;
}
nav ul {
  list-style: none;
}
nav ul li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
}
nav ul li a {
  display: inline-block;
  padding: 1rem;
  color: #000;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.3s ease 0s;
  transition: transform 0.3s ease 0s;
  -webkit-transform-origin: 50% 0px 0px;
  -ms-transform-origin: 50% 0px 0px;
  transform-origin: 50% 0px 0px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
nav ul li a.current {
  color: #FF005B;
}
nav ul li a:hover {
  background: #fff;
  color: #000;
  -we.........完整代码请登录后点击上方下载按钮下载查看