CSS3悬停效果案例应用

2024-07-11 08:29:29

字体：大中小

来源：转载

供稿：网友

CSS3 为 Web 开发带来了非常令人兴奋的变化，特别是 CSS 3D 转换、动画等特性的支持，可以轻松的创建很酷的 Web 效果。
CSS3新增添了实现动画效果的新功能，通过本文，你可以对这些新功能有个初步了解。今天就分享一些悬停效果，可以更好的帮助你开发
的CSS3哈弗效果 - DEMO

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

复制代码

代码如下:
<div class="view">
<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
在这里，你将我们的教程设置的基本属性。对于每一个效果会有不同的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 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
这里除了使用的边框属性来创建一个三角形，我使用的多个转换，允许我在动画期间对每个属性有更多的控制。

上一篇：css margin属性深入解析

下一篇：IE6789,FF之间Css Hack整理