你的位置:首页 > 网页设计

[网页设计]css3制作炫酷导航栏效果

今天主要利用hover选择器。鼠标滑过查看效果。

一。普通导航栏

  • Home
  • Content
  • Service
  • Team
  • Contact

 

 

对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单。

(1)使用ul标签布局

(2)鼠标经过事件

<div id="demo1">    <ul>      <li>Home</li>      <li>Content</li>      <li>Service</li>      <li>Team</li>      <li>Contact</li>    </ul>  </div>

*{  padding:0;  margin:0;  list-style:none;  text-decoration:none;}a{  color:#fff;}#demo1{  width:600px;}#demo1 ul li{  float:left;  width:100px;  height:50px;  text-align:center;  background:#ccc;  line-height:50px;  color:#FFF;}#demo1 ul li:hover{  background:#999;}

(二)括号类导航栏

  • Home
  • Content
  • Service
  • Team
  • Contact

对于导航栏的排版这里就不多说了,可以看到当鼠标经过的时候会从文字中出现括号,思路:

(1)当无鼠标经过事件时,括号其实是有的,只不多它处于隐形状态在文字中间

(2)当鼠标经过时,括号从中间移动到两边,并且从隐形变为显示。

 <div id="demo2">    <ul>      <li><a href="#">Home</a></li>      <li><a href="#">Content</a></li>      <li><a href="#">Service</a></li>      <li><a href="#">Team</a></li>      <li><a href="#">Contact</a></li>    </ul>  </div>

#demo2{  width:600px;  height:50px;  margin:20px auto;}#demo2 ul li{  position:relative;  float:left;  width:100px;  height:50px;  text-align:center;  line-height:50px;  background:#000;}#demo2 ul li a:before{  content:"[";  margin-right:10px;  transform:translateX(20px);  -webkit-transform:translateX(20px);  -moz-transform:translateX(20px);  -ms-transform:translateX(20px);  }#demo2 ul li a:after{  content:"]";  margin-left:10px;  transform:translateX(-20px);  -webkit-transform:translateX(-20px);  -moz-transform:translateX(-20px);  -ms-transform:translateX(-20px);}#demo2 ul li a:before,#demo2 ul li a:after{  display:inline-block;  opacity:0;  transition:transform 0.3s, opacity 0.2s;  -moz-transition:transform 0.3s, opacity 0.2s;  -webkit-transition:transform 0.3s, opacity 0.2s;  -ms-transition:transform 0.3s, opacity 0.2s;}#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after {  opacity: 1;  -webkit-transform: translateX(0px);  -moz-transform: translateX(0px);  transform: translateX(0px);}

三。滑动导航栏

  • Home
  • Content
  • Service
  • Team
  • Contact

 

 

从演示效果来看要注意两点

(1)鼠标经过时有横向从上到下

(2)鼠标经过时文字从上到下并且变换颜色

这就和上一个例子很像了

(1)横线其实是存在的,只不过鼠标没有经过时是在文字上方且透明的,鼠标经过时横线由上到下。

(2)文字这里就要定义一个动画了,因为在鼠标经过时它体现了三种状态:

  ①文字从现位置划下

  ②文字从出现在上方

  ③文字从上方滑到现位置

 <div id="demo3">    <ul>      <li><a href="#"><span>Home</span></a></li>      <li><a href="#"><span>Content</span></a></li>      <li><a href="#"><span>Service</span></a></li>      <li><a href="#"><span>Team</span></a></li>      <li><a href="#"><span>Contact</span></a></li>    </ul>  </div>

#demo3 ul li{  float:left;  margin:0 25px;  position:relative;}#demo3 ul li a{  color:#D8761E;  font-family:'Righteous', cursive;  display:block;  padding:10px 0;}#demo3 ul li span{  display:block;}#demo3 ul li a:before{  content:"";  position:absolute;  width:100%;  height:3px;  background:#D8761E;  bottom:0;  opacity:0;  -webkit-transform: translate3d(0, -40px, 0);  transform: translate3d(0, -40px, 0);  -webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;  transition: transform 0s 0.3s, opacity 0.2s;}#demo3 ul li a:hover::before{  opacity:1;  -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);  -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;  transition: transform 0.5s, opacity 0.1s;  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }#demo3 ul li a:hover span{  color:#510301;  -webkit-animation: anim-francisco 0.3s forwards;  animation: anim-francisco 0.3s forwards;}@-webkit-keyframes anim-francisco {  50% {    opacity: 0;    -webkit-transform: translate3d(0, 100%, 0);    transform: translate3d(0, 100%, 0);  }  51% {    opacity: 0;    -webkit-transform: translate3d(0, -100%, 0);    transform: translate3d(0, -100%, 0);  }  100% {    opacity: 1;    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  [email protected] anim-francisco {  50% {    opacity: 0;    -webkit-transform: translate3d(0, 100%, 0);    transform: translate3d(0, 100%, 0);  }  51% {    opacity: 0;    -webkit-transform: translate3d(0, -100%, 0);    transform: translate3d(0, -100%, 0);  }  100% {    opacity: 1;    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }}

这里注意的是不能给标签设置宽高,因为一旦设置宽高会影响文字滑动路线,变得很夸张。这里加span也是这个原因,鼠标经过a时让span以a为参照进行滑动。

里面的标签就不解释了,自己查效果会更好哦。

我好无奈呀,用这个显示效果a标签和li的默认样式竟然不能取消,谁能告诉我为什么/(ㄒoㄒ)/~~  不过自己编译的话在浏览器里是正常的