日期: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创建一个支持翻转效果的微/轻博客网站列表
分享到:
相关推荐
jQuery css3投资收益表格3D翻转切换效果 jQuery css3投资收益表格3D翻转切换效果 jQuery css3投资收益表格3D翻转切换效果 jQuery css3投资收益表格3D翻转切换效果
这是一款使用jQuery和css3制作的圆形图片3d翻转效果。这款圆形图片3d翻转效果有点像翻页效果,当点击按钮后上面的圆形图片会像书本翻页一样3d翻转到另一面。
jQuery html5 css3制作圆形卡片3D翻转效果
jQuery css3扑克洗牌和扑克牌翻转效果代码 jQuery css3扑克洗牌和扑克牌翻转效果代码 jQuery css3扑克洗牌和扑克牌翻转效果代码
用CSS+JQuery实现的div翻转效果
jquery-awesomodals是一款jQuery和CSS3超酷3D翻转式模态对话框插件。该对话框特效通过jquery和CSS3 transitions和transforms来来对话框打开时制作3D翻转的效果,效果非常的酷。
这是一款简单的jQuery和css3文字3d翻转和3d旋转动画特效插件。该文字动画插件共有5种效果,分别是淡入淡出,3d水平翻转,3d垂直翻转,3d翻转和3d旋转效果。
3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery...
这是一款简单好看的jQuery CSS3鼠标悬停图片3D翻转动画代码,网格布局显示图片列表,翻转的方向根据鼠标进入图片的方向而定。
这是一款炫酷jQuery和css3文字3d翻转动画特效插件。该文字3d翻转动画特效插件有4种效果,该特效中文字通过3d翻转后变为其它文字,或整个文本块3d翻转后变为另一段文本。
jQuery css3扑克洗牌,扑克牌翻转效果
这是一款基于jQuery CSS3实现的多种不同效果的遮罩弹框插件,点击以多种展开方式弹出提示窗口。 部分代码 从上滑落</div> 从下划入</div> <div class="btn btn3">中间扩散</div> 中间扩散渐入</div> 从下方...
Jquery1.8+html+CSS3实现翻转屏登录界面,效果比较好看比较适合做个人站点的设计
这是一款使用css3和jquery制作的图片3d翻转效果。共有7种效果:3d翻转、3d旋转、切片效果、3d立方体、3d折叠等。唯一缺点是只支持webkit内核的浏览器。建议使用Chrome浏览器观看。
jQuery css3相册图片鼠标悬停3D翻转动画特效 jQuery css3相册图片鼠标悬停3D翻转动画特效
<link rel="stylesheet" href="css/demo.css?3.1.64"> <... 这是一款简单好看的jQuery CSS3鼠标悬停图片3D翻转动画代码,网格布局显示图片列表,翻转的方向根据鼠标进入图片的方向而定。
这是一款效果非常炫酷的jQuery和CSS3鼠标滑过3D卡片翻转特效。该卡片翻转特效使用modernizr.js来检测浏览器,当发现浏览器不支持CSS3翻转属性时,会将效果回退为简单的滑动显示效果。
jQuery CSS3悬停悬停翻转特效是一款网格列表图片悬停3D翻转动画效果代码。 <title>jQuery跟CSS3悬停悬停翻转特效 </title> <link rel="stylesheet" href="css/demo.css?3.1.64"> ...
这是一款炫酷的jQuery和css3弹性3d图片翻转分组展示特效插件。该图片展示插件不但节省空间,而且效果十分的酷。用户可以以图片3d翻转的方式每次更换一批图片。