search

Home  >  Article  >  Web Front-end  >  Animated drop-down navigation menu effect implemented with CSS3

Animated drop-down navigation menu effect implemented with CSS3

大家讲道理
大家讲道理Original
2016-11-09 17:14:531084browse

Animated drop-down navigation menu effect implemented by CSS3:
This chapter shares a code example, which implements a simple drop-down menu effect.
But the drop-down menu has a 3D rotation effect. The code example is as follows: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<meta name="keywords" content="" />
<style type="text/css">
*{margin:0 auto;}
body{
  background-color: #EEEEEE;
  font-family: Microsoft Yahei,Arial,sans-serif;
}
nav{
  width:100%;
  background-color:#455552;
  position:relative;
  width:650px;
  margin-top:100px;
}
.nav-ul{
  list-style:none;
}
.nav-ul>li{
  display:inline-block;
  position:relative;
}
.nav-ul a{
  text-decoration:none;
  color:#FFF;
  display:inline-block;
  padding:10px 20px;
}
.nav-ul a:hover{
  background-color: #1ABC9C;
}
.nav-ul a:hover+ul li{
  opacity:1;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.nav-ul a+ul{
  list-style: none;
  position: absolute;
  transition: opacity 0.5s;
  -webkit-perspective:800;
  -webkit-transform-style: preserve-3d;
}
.nav-ul a+ul:hover li{
  opacity: 1;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.nav-ul a+ul li{
  position: relative;
  left: -40px;
  opacity: 0;
  width: 150px;
  transition: transform 1.5s,opacity 0.8s;
}
.nav-ul a+ul a{
  display: inline-block;
  width: 75%;
  background-color: rgba(26,188, 156, 0.75);
}
.nav-effect-1{
  transform: rotateY(90deg) translateX(10px);
}
.nav-effect-2{
  transform: rotateY(120deg) translateX(20px);
}
.nav-effect-3{
  transform: rotateY(150deg) translateX(30px);
}
.nav-effect-4{
  transform: rotateY(180deg) translateX(40px);
}
.nav-ul a+ul a:hover{
  background-color: rgba(69,85, 82, 0.75);
}
</style>
</head>
<body>
<nav>
  <ul class="nav-ul">
    <li><a href="/">首页</a></li>
    <li>
      <a href="#">蚂蚁部落前端</a>
      <ul>
        <li class="nav-effect-1"><a href="#">JavaScript</a></li>
        <li class="nav-effect-2"><a href="#">JQuery</a></li>
        <li class="nav-effect-3"><a href="#">CSS</a></li>
        <li class="nav-effect-4"><a href="#">HTML</a></li>
      </ul>
    </li>
    <li>
      <a href="#">后端</a>
      <ul>
        <li class="nav-effect-1"><a href="#">Python</a></li>
        <li class="nav-effect-2"><a href="#">PHP</a></li>
      </ul>
    </li>
    <li>
      <a href="#">琐碎杂类</a>
      <ul>
        <li class="nav-effect-1"><a href="#">softwhy.com</a></li>
        <li class="nav-effect-2"><a href="#">Ajax</a></li>
      </ul>
    </li>
    <li>
      <a href="#">我的生活</a>
      <ul>
        <li class="nav-effect-1"><a href="#">College</a></li>
        <li class="nav-effect-2"><a href="#">Review</a></li>
        <li class="nav-effect-3"><a href="#">Sentiment</a></li>
      </ul>
    </li>
    <li>
      <a href="#">关于我</a>
      <ul>
        <li class="nav-effect-1"><a href="#">蚂蚁部落</a></li>
        <li class="nav-effect-2"><a href="#">留言板</a></li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS implements three-column image layout with equal width and equal spacingNext article：CSS implements three-column image layout with equal width and equal spacing

Related articles

See more