css class 悬停效果,CSS3悬停效果案例应用

CSS3 为 Web 开发带来了非常令人兴奋的变化，特别是 CSS 3D 转换、动画等特性的支持，可以轻松的创建很酷的 Web 效果。

CSS3新增添了实现动画效果的新功能，通过本文，你可以对这些新功能有个初步了解。今天就分享一些悬停效果，可以更好的帮助你开发

 

HTML标记

这个简单的结构使我们能够使这些效果。正如你可以看到下面的代码中我们创建了一个父类视图，里面的内容。然后，我们创建一个类的面具，我们将了CSS3过渡到悬停效果。在后面的例子中，这个语法可以稍稍发生变化，这取决于你想要的效果应用。

复制代码代码如下:

Full Image

CSS

在这里，你将我们的教程设置的基本属性。对于每一个效果会有不同的CSS文件，你可以把到一个CSS文件中的各种效果。

复制代码代码如下:

.view {

width: 300px;

height: 200px;

margin: 10px;

float: left;

border: 5px solid #fff;

overflow: hidden;

position: relative;

text-align: center;

box-shadow: 0px 0px 5px #aaa;

cursor: default;

}

.view .mask, .view .content {

width: 300px;

height: 200px;

position: absolute;

overflow: hidden;

top: 0;

left: 0;

}

.view img {

display: block;

position: relative;

}

.view a.info {

background:url(../img/link.png) center no-repeat;

display: inline-block;

text-decoration: none;

padding:0;

text-indent:-9999px;

width:20px;

height:20px;

}

1 Examp