精益资源

个人中心
退出登录

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

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

 2638  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 文本背景水波纹 水波浪背景墙

动态水纹CSS3应用,实现文字底部背景动态的水纹波浪效果

 2878  0

全屏幕3D白云 canvas制作白云 javascript白云 web3d技术运用

精益编程之精益资源,3D效果动态白云,canvas制作白云,使用网页3D图像渲染技术框架webGL与Three.js

 2823  0

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

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

 2747  0

魔幻版css3登录界面 后台登录页面模版

动态背景魔幻般的css3登录页面,使用简单css3语法实现,对于新手都容易上手,源码清晰,注解完整的页面源码

 2532  0