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

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

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

在线演示? 本地下载

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

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

<div src="img/weibo.png" /><div target="_blank">http://weibo.com</a></div></div></div>

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

.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的样式定义。这里我们使用圆角效果。

..

...

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