精益资源

个人中心
退出登录

jQuery+CSS3卡片自动翻牌特效,灵活配置,方便简单实用

分类: JQuery插件>滚动与导航    

 745  0
查看演示

一、主要原理

  • 一个卡片位置,使用两个div区域,标识一个前面,一个背面,使用相应的绝对定位,结合一定隐藏属性与transform的空间旋转特性,把背面隐藏起来;
  • 通过给每一个卡片,定时添加额外的翻牌class,来达到不同的效果。

二、掌握的知识点

  • css3的transition动画属性使用,z-index的空间层,来显示一个前一个后。
  • css3的transform:rotate3d(0,1,0,-180deg);与transform:rotate3d(0,1,0,180deg);与transform:rotate3d(0,1,0,0deg);使用,达到翻转的效果。

三、使用方法

1) Html结构

  1. <div class="card">
  2. <div class="face front">
  3. <!--能自定义内容,不限于文本,图片等各种html元素-->
  4. <div class="t1">--关注精益编程--</div>
  5. </div>
  6. <div class="face back">
  7. <a href="https://www.leanboot.com" target="_blank" title="精益编程"><img src="./static/n1.jpg" /></a>
  8. </div>
  9. </div>
  • 定义card的卡片内容区域,能根据实际情况,给card固定的长宽样式
  • .face定义两个区域,使用front与back定义前面背面区域
  • 两个区域都能灵活定义html元素

2)style样式

  • 请详细查看resource.css中的:插件本身样式

3)js代码

  1. function flip() {
  2. var i = 0;
  3. var cardFlip = $(".card");
  4. var timer = setInterval(function(){
  5. cardFlip.eq(i).toggleClass('card-flipped');
  6. i++;
  7. if(i == cardFlip.length){
  8. i=0;
  9. }
  10. }, 2000);//2s翻动一次牌子
  11. }
  • 主要运用了js中的循环定时setInterval()函数,进行定时调用
  • jquery的数组.eq()来绑定特定元素,并使用toggleClass()切换class的添加与移除

jquery还是挺好用的,用于动态网页或者纯静态网页中,是一个不错的选择,毕竟针对这些公网站点来说,还是依赖seo生存的,所以并不是现在的超多前后端分离的就是好,任何一种的成熟的框架的选择,都有弊与利,需要结合应用场景来选择!精益资源每一个源码都是经过考验与整理,请放心使用

最后编辑:2023-10-24 08:30:00

相关组件

MORE

CSS3时光隧道 哆啦A梦带你畅游不同时空 CSS3时光机

使用CSS3结合动画,星星的图片的快速移动,在上下左右后5个方向,进行图片的动画效果叠加,形成炫酷的时光隧道的效果

 846  0

echarts图表应用大屏 可视化大屏源码 可视化模版

可视化大屏制作首选是echarts.js,结合css3与动画,能制作出美观大气的可视化大屏。

 898  0

jQuery+CSS3卡片自动翻牌特效,灵活配置,方便简单实用

jQuery和css3卡片自动翻牌效果,使用CSS3透视和backface-visibility属性达到卡片正反面效果,结合jquery的toggleClass,结合循环定时器来利用css的添加与删除,达到翻牌效果。

 745  0

css3漂亮水滴效果 动态水滴背景 浪漫水滴壁纸

css3的动态水滴效果,犹如身临其境的窗外水滴效果,充分使用css3的动画animation属性

 819  0