很炫的CSS3导航效果（会动的哦^_^）

时间：2014-11-25 18:15:31 阅读：174 评论：0 收藏：0 [点我收藏+]

今天浏览网页，看到个很不错的效果(本人不会配色，估计色彩搭配好点效果更佳)，想了想，就把它彷过来了。虽然现在IE对CSS3特效的支持是个很纠结的事情，但是我们更应该看到CSS3在一些高级浏览器中的突出表现，所以让我们忍受IE生硬的同时，感受高级浏览器的平滑。

效果预览：http://www.huiyi8.com/css3/

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>很炫的导航</title>

<style>

.nav{

margin:0 auto;

width:800px;

height:200px;

}

.nav .links{

float:left;

position:relative;

width:200px;

height:200px;

overflow:hidden;

-moz-transition:background-color .3s ease-in-out;

-webkit-transition:background-color .3s ease-in-out;

-o-transition:background-color .3s ease-in-out;

-ms-transition:background-color .3s ease-in-out;

transition:background-color .3s ease-in-out;

}

.nav .links1{background-color:#949494;}

.nav .links2{background-color:#a4a4a4;}

.nav .links3{background-color:#b4b4b4;}

.nav .links4{background-color:#c4c4c4;}

.nav .links .bg{

position:absolute;

top:-200px;

width:200px;

height:200px;

opacity:0;

filter:Alpha(opacity=0);

background:url(imgs/img_01.png) no-repeat;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘imgs/img_01.png‘,sizingMethod=‘crop‘);

-moz-transition:top .3s ease-in-out,opacity .5s ease-in-out;

-webkit-transition:top .3s ease-in-out,opacity .5s ease-in-out;

-o-transition:top .3s ease-in-out,opacity .5s ease-in-out;

-ms-transition:top .3s ease-in-out,opacity .5s ease-in-out;

transition:top .3s ease-in-out,opacity .5s ease-in-out;

}

.nav .links .intro{

position:absolute;

left:0;

top:50%;

margin-top:-24px;

width:100%;

line-height:48px;

font:48px/1 Tahoma,Impact,Arial;

color:#fff;

text-align:center;

-moz-transition:top .3s ease-in-out,color .3s ease-in-out;

-webkit-transition:top .3s ease-in-out,color .3s ease-in-out;

-o-transition:top .3s ease-in-out,color .3s ease-in-out;

-ms-transition:top .3s ease-in-out,color .3s ease-in-out;

transition:top .3s ease-in-out,color .3s ease-in-out;

}

.nav .links:hover{background-color:#383838;}

.nav .links:hover .bg{top:-100px;opacity:0.8;filter:Alpha(opacity=80);}

.nav .links:hover .intro{top:70%;color:#f66;}

</style>

</head>

<body>

<div class="nav">

<a href="#" target="_blank" class="links links1">

<span class="intro">Index</span>

<span class="bg"></span>

</a>

<a href="#" target="_blank" class="links links2">

<span class="intro">Article</span>

<span class="bg"></span>

</a>

<a href="#" target="_blank" class="links links3">

<span class="intro">Photos</span>

<span class="bg"></span>

</a>

<a href="#" target="_blank" class="links links4">

<span class="intro">Contact</span>

<span class="bg"></span>

</a>

</div>

</body>

</html>

很炫的CSS3导航效果（会动的哦^_^）

标签：style http io ar color os sp for on

原文地址：http://www.cnblogs.com/lhrs/p/4121514.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行