从今天开始，我会不定时给各位小主们更新一些JS炫酷特效的案例。吼吼吼开始啦！！！
今天我给大家分享的是我昨天用CSS3实现的一个简单的多边形导航旋转放大特效。先给大家看一下最终做出的静态页面效果，我会在后面贴出我的代码，大家可以下去运行看看实际效果哦。
我觉得写代码应该养成的一个良好习惯之一是拿到题目要先分析，而不是立即着手从上往下那么写，那样很容易中途就夭折了。在这里我先把我分析思路给大家分享一下吧：
1、我们可以看出页面由三部分组成，一个大盒子（即下图蓝色部分），里面装着14个小盒子（即下图黑色部分）并且呈5，4，5排列，小盒子里装着内容（即下图白色部分）：
2.接着我们就要想着在黑色小盒子部分装上多边形了，下面我们来演示一下多边形的形成过程：
3.多边形形成后我们在多边形里边添加图片，然后用CSS3实现图片的放大加旋转特效就ok了！
下面为我的代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>多边形 导航旋转放大特效</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:url(img/bg_pic.jpg);
}
#nav{
width:950px;
height:500px;
margin:50px auto ;
}
#nav ul li{
position:relative ;
list-style:none;
float:left;
width:180px;
height:105px;
background-color: rgba(0,0,0,0.5);
margin:30px 5px;
}
#nav ul li.six{
margin-left:100px;
}
.left{
width:180px;
height:105px;
background-color: rgba(0,0,0,0.5);
transform:rotate(60deg) ;
}
.right{
position:absolute;
left:0;
top:0;
width:180px;
height:105px;
background-color: rgba(0,0,0,0.5);
transform:rotate(-60deg) ;
}
#nav ul li img{
position:absolute ;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
transition:0.5s;
}
#nav ul li img:hover{
transform:rotate(360deg) scale(1.4);
}*/
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic1.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic2.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic3.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic4.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic5.png"/>
</li>
<li class="six">
<div class="left"></div>
<div class="right"></div>
<img src="img/pic6.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic7.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic8.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic9.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic10.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic11.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic12.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic13.png"/>
</li>
<li>
<div class="left"></div>
<div class="right"></div>
<img src="img/pic14.png"/>
</li>
</ul>
</div>
</body>
</html>
大家觉得我上面的代码怎么样？是不是很不优雅，这也就是我要说的一个合格的程序员应该养成的良好习惯之二：代码中尽量避免出现重复的。但是你们看一下上面的代码，li标签之间添加的两个div出现了14次呐！！！真的是非常非常无语，我们要怎么样优化一下呢？这时我们应该想到CSS3的before伪类和after伪类，在这里我们可以把这两个伪类当作盒子使用。具体优化后的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:url(img/bg_pic.jpg);
}
#nav{
width:950px;
height:500px;
margin:50px auto ;
}
#nav ul li{
position:relative ;
list-style:none;
float:left;
width:180px;
height:105px;
background-color: rgba(0,0,0,0.5);
margin:30px 5px;
}
#nav ul li.six{
margin-left:100px;
}
/*CSS伪类当作盒子来使用*/
#nav ul li:before,#nav ul li:after{
content:"";
position:absolute;
left:0;
top:0;
width:180px;
height:105px;
background-color: rgba(0,0,0,0.5);
transform:rotate(60deg) ;
}
#nav ul li:after{
transform:rotate(-60deg) ;
}
#nav ul li img{
position:absolute ;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
z-index: 1;
transition:0.5s;
}
#nav ul li img:hover{
transform:rotate(360deg) scale(1.4);
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<img src="img/pic1.png"/>
</li>
<li>
<img src="img/pic2.png"/>
</li>
<li>
<img src="img/pic3.png"/>
</li>
<li>
<img src="img/pic4.png"/>
</li>
<li>
<img src="img/pic5.png"/>
</li>
<li class="six">
<img src="img/pic6.png"/>
</li>
<li>
<img src="img/pic7.png"/>
</li>
<li>
<img src="img/pic8.png"/>
</li>
<li>
<img src="img/pic9.png"/>
</li>
<li>
<img src="img/pic10.png"/>
</li>
<li>
<img src="img/pic11.png"/>
</li>
<li>
<img src="img/pic12.png"/>
</li>
<li>
<img src="img/pic13.png"/>
</li>
<li>
<img src="img/pic14.png"/>
</li>
</ul>
</div>
</body>
</html>
做这个案例时遇到的一个小问题：
我们回过头来看一下我们style部分的代码：
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:url(img/bg_pic.jpg);
}
#nav{
width:950px;
height:500px;
margin:50px auto ;
}
#nav ul li{
position:relative ;
list-style:none;
float:left;
width:180px;
height:105px;
background-color: rgba(0,0,0,0.5);
margin:30px 5px;
}
#nav ul li.six{
margin-left:100px;
}
/*CSS伪类当作盒子来使用*/
#nav ul li:before,#nav ul li:after{
content:"";
position:absolute;
left:0;
top:0;
width:180px;
height:105px;
background-color: rgba(0,0,0,0.5);
transform:rotate(60deg) ;
}
#nav ul li:after{
transform:rotate(-60deg) ;
}
#nav ul li img{
position:absolute ;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
z-index: 1;
transition:0.5s;
}
#nav ul li img:hover{
transform:rotate(360deg) scale(1.4);
}
</style>
以上代码是没有问题的，但是在我第一次写时把上面six部分写成了这样：
.six{
margin-left:100px;
}
整体运行后的结果如下图：
我们可以看到上面的效果和我们要的不一样，没有呈5，4，5排列，原因在这里：
因为我们在前面#nav ul li中写了margin：30px 5px;而#nav ul li表示的范围比 .six表示的范围窄，所以 .six中设置的值被覆盖掉了，对与为什么#nav ul li表示的范围比 .six表示的范围窄这里，我想很多人就有点绕了，我来给各位小主解释一下，id名是唯一的，而class名是可以重复的，所以#nav ul li表示的就比 .six表示得更具体，要求更高，范围就更窄，优先级就高，所以就把 .six中设置的margin值覆盖了。
1448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
