使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表

日期：2012-4-10 来源：GBin1.com



在线演示 本地下载

今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表，将使用jQuery的jQuery Flip插件来实现特效。

HTML代码

这里我们使用socialwrapper来包装每一个需要展示的网站，如下：

<div class="socialwrapper">
<div class="social">
<img id="img" src="img/weibo.png" />
<div class="desc"><a href="http://weibo.com/gbin1" target="_blank">http://weibo.com</a></div>
</div>
</div>

以上代码中我们包含了执行翻转的元素social，其中包含了logo图片和网站详细介绍。

CSS代码

.socialwrapper{
width:200px;
height:200px;
float:left;
margin:5px;
position:relative;
cursor:pointer;
}

.social{
background: #303030;
height: 100%;
margin: 0px;
text-align: center;
width:100%;
margin: 0px;
position:absolute;
border: 1px solid #505050;
border-radius: 5px 5px 5px 5px;
}

上面的CSS定义了.socialwrapper和.social的样式定义。这里我们使用圆角效果。

.social:hover {
border:1px solid #505050;
-moz-box-shadow:0 0 20px #AAA inset;
-webkit-box-shadow:0 0 20px #AAA inset;
box-shadow:0 0 20px #AAA inset;
}

以上代码定义了鼠标悬浮的特效，这里我们使用box-shadow属性来设置边框阴影效果。

.social .desc{
color: #fff;
font-size: 20px;
height: 200px;
line-height: 200px;
margin: 0 auto;
min-height: 200px;
min-width: 200px;
text-align: center;
width: 200px;
float:left;
position: absolute;
background: #404040;
display:none;
font-size:14px;
font-weight: 600;
font-family: "Microsoft Yahei";
padding:0;
text-shadow: 2px 2px 1px #606060;
}

以上代码定义了详细信息内容，这里使用了text-shadow来定义一个字体的阴影效果。

...

...

原文来自:使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表