使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
日期：2012-4-10 来源：GBin1.comhttp://www.gbin1.com/technology/jquerytutorial/20120410flipsocialsite/title.jpg
在线演示 本地下载
今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表，将使用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的样式定义。这里我们使用圆角效果。
..
...
原文来自:使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
页:
[1]