ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表

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

原创 Linux操作系统 作者:jjfat 时间:2012-04-10 21:44:40 0 删除 编辑

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

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

在线演示  本地下载

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

HTML代码

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


以上代码中我们包含了执行翻转的元素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创建一个支持翻转效果的微/轻博客网站列表

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/8288/viewspace-720867/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2011-10-08

  • 博文量
    316
  • 访问量
    371509