运用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
使用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的样式定义。这里我们使用圆角效果。
..
...
原文来自:使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表