使用CSS3悬停效果打造不同的页面版式
CSS3 为 Web 开发带来了非常令人兴奋的变化，特别是 CSS 3D 转换、动画等特性的支持，可以轻松的创建很酷的 Web 效果。
CSS3新增添了实现动画效果的新功能，通过本文，你可以对这些新功能有个初步了解。今天就分享一些悬停效果，可以更好的帮助你开发
HTML标记
这个简单的结构使我们能够使这些效果。正如你可以看到下面的代码中我们创建了一个父类视图，里面的内容。然后，我们创建一个类的面具，我们将了CSS3过渡到悬停效果。在后面的例子中，这个语法可以稍稍发生变化，这取决于你想要的效果应用。
1 <div class="view"> 2 <img src="images/1.jpg" /> 3 <div class="mask"></div> 4 <div class="content"> 5 <a href="#" class="info" title="Full Image">Full Image</a> 6 </div> 7 </div>
CSS
在这里，你将我们的教程设置的基本属性。对于每一个效果会有不同的CSS文件，你可以把到一个CSS文件中的各种效果。
1 .view {
2 width: 300px;
3 height: 200px;
4 margin: 10px;
5 float: left;
6 border: 5px solid #fff;
7 overflow: hidden;
8 position: relative;
9 text-align: center;
10 box-shadow: 0px 0px 5px #aaa;
11 cursor: default;
12 }
13 .view .mask, .view .content {
14 width: 300px;
15 height: 200px;
16 position: absolute;
17 overflow: hidden;
18 top: 0;
19 left: 0;
20 }
21 .view img {
22 display: block;
23 position: relative;
24 }
25 .view a.info {
26 background:url(../img/link.png) center no-repeat;
27 display: inline-block;
28 text-decoration: none;
29 padding:0;
30 text-indent:-9999px;
31 width:20px;
32 height:20px;
33 }
1 Example
HTML
对具有这种效果的类视图的元素添加特殊类效果。这里在view类的基础上添加effect类
<div class="view effect">
<img src="images/1.jpg" />
<div class="mask"></div>
<div class="content">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>
CSS
这里除了使用的边框属性来创建一个三角形，我使用的多个转换，允许我在动画期间对每个属性有更多的控制。
1 effect img {
2 opacity:1;
3 transform:scale(1,1);
4 transition: all 0.2s ease-in;
5 }
6 .effect .mask {
7 opacity:0;
8 overflow:visible;
9 border-color:rgba(0,0,0,0.7) transparent transparent transparent;
10 border-style:solid;
11 border-width:150px;
12 width:0;
13 height:0;
14 transform:translateY(-125px);
15 transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
16 }
17 .effect a.info {
18 opacity:0;
19 transform:translateY(-125px);
20 transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
21 }
22 .effect:hover img {
23 opacity:0.7;
24 transform:scale(2,2);
25 }
26 .effect:hover .mask {
27 opacity: 1;
28 transform: translateY(0px);
29 }
30 .effect:hover a.info {
31 opacity:1;
32 transform:translateY(100px);
33 }
2 Example
HTML
在此示例中的语法会稍有不同
1 <div class="view second-effect"> 2 <img src="images/2.jpg" /> 3 <div class="mask"> 4 <a href="#" class="info" title="Full Image">Full Image</a> 5 </div> 6 </div>
CSS
在这个例子当中使用边框熟悉对变量进行调整. 这里使用 box-sizing. box-sizing 熟悉被用来改变默认的CSS盒宽度和高度大小，具体怎么使用呢，我简单解释一下
（说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反，是不包括border和padding的。box-sizing:content-box：当我们设置 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，当它定义width和height时，它的宽度不包括border和padding。box-sizing:border-box：当我们设置box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的 “width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
）
1 .second-effect .mask {
2 opacity: 0;
3 overflow:visible;
4 border:0px solid rgba(0,0,0,0.7);
5 box-sizing:border-box;
6 transition: all 0.4s ease-in-out;
7 }
8 .second-effect a.info {
9 position:relative;
10 top:-10px;
11 opacity:0;
12 transform:scale(0,0);
13 transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
14 }
15 .second-effect:hover .mask {
16 opacity: 1;
17 border:100px solid rgba(0,0,0,0.7);
18 }
19 .second-effect:hover a.info {
20 opacity:1;
21 transform:scale(1,1);
22 transition-delay:0.3s;
23 }
3 Example
HTML
这里在view类的基础上添加third-effect类.
1 <div class="view third-effect"> 2 <img src="images/3.jpg" /> 3 <div class="mask"> 4 <a href="#" class="info" title="Full Image">Full Image</a> 5 </div> 6 </div>
CSS
使用边框属性只需要简单的几行代码就能得到非常棒的效果.
1 .third-effect .mask {
2 opacity: 0;
3 overflow:visible;
4 border:100px solid rgba(0,0,0,0.7);
5 box-sizing:border-box;
6 transition: all 0.4s ease-in-out;
7 }
8 .third-effect a.info {
9 position:relative;
10 top:-10px; /* Center the link */
11 opacity: 0;
12 transition: opacity 0.5s 0s ease-in-out;
13 }
14 .third-effect:hover .mask {
15 opacity: 1;
16 border:100px solid rgba(0,0,0,0.7);
17 }
18 .third-effect:hover a.info {
19 opacity:1;
20 transition-delay: 0.3s;
21 }
4 Example
HTML
在此示例中的代码是比之前的明显减少，但做出来的悬停效果将是非常令人印象深刻的.
1 <div class="view fourth-effect"> 2 <a href="#" title="Full Image"><img src="images/4.jpg" /></a> 3 <div class="mask"></div> 4 </div>
CSS
仅使用mask类与border-radius属性结合打造出一个美丽的悬停效果，单击图片实现图片的可见性
1 .fourth-effect .mask {
2 position:absolute; /* Center the mask */
3 top:50px;
4 left:100px;
5 cursor:pointer;
6 border-radius: 50px;
7 border-width: 50px;
8 display: inline-block;
9 height: 100px;
10 width: 100px;
11 border: 50px solid rgba(0, 0, 0, 0.7);
12 box-sizing:border-box;
13 opacity:1;
14 visibility:visible;
15 transform:scale(4);
16 transition:all 0.3s ease-in-out;
17 }
18 .fourth-effect:hover .mask {
19 opacity: 0;
20 border:0px solid rgba(0,0,0,0.7);
21 visibility:hidden;
22 }
5 Example
HTML
最后一个例子是上面几个例子的结合.添加一个fifth-effect类
1 <div class="view fifth-effect"> 2 <a href="#" title="Full Image"><img src="images/5.jpg" /></a> 3 <div class="mask"></div> 4 </div>
<div>
<a href="#" title="Full Image"><img src="images/5.jpg" /></a>
<div></div>
</div>
CSS
在这里使用边框属性的rgba属性。来改变可见图片的透明度.
1 .fifth-effect img {
2 opacity:0.2;
3 transition: all 0.3s ease-in;
4 }
5 .fifth-effect .mask {
6 cursor:pointer;
7 opacity:1;
8 visibility:visible;
9 border:100px solid rgba(0,0,0,0.7);
10 box-sizing:border-box;
11 transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
12 }
13 .fifth-effect:hover .mask {
14 border:0px double rgba(0,0,0,0.7);
15 opacity:0;
16 visibility:hidden;
17 }
18 .fifth-effect:hover img {
19 opacity:1;
20 }
本文链接：使用CSS3悬停效果打造不同的页面版式