suchen

Heim  >  Artikel  >  Web-Frontend  >  Animierter Dropdown-Navigationsmenüeffekt, implementiert mit CSS3

Animierter Dropdown-Navigationsmenüeffekt, implementiert mit CSS3

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

Animierter Dropdown-Navigationsmenüeffekt, implementiert durch CSS3:
In diesem Kapitel wird ein Codebeispiel vorgestellt, das einen einfachen Dropdown-Menüeffekt implementiert.
Das Dropdown-Menü hat jedoch einen 3D-Rotationseffekt. Das Codebeispiel lautet wie folgt:

<!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>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS implementiert ein dreispaltiges Bildlayout mit gleicher Breite und gleichem AbstandNächster Artikel：CSS implementiert ein dreispaltiges Bildlayout mit gleicher Breite und gleichem Abstand

In Verbindung stehende Artikel

Mehr sehen