Rumah > hujung hadapan web > html tutorial > 简单实用的jQuery和CSS3卡片自动翻牌特效_html/css_WEB-ITnose

简单实用的jQuery和CSS3卡片自动翻牌特效_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-21 09:01:14
asal
1345 orang telah melayarinya

简要教程

这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backface-visibility属性来制作卡片正反面效果,并使用jQuery使其自动旋转起来。

查看演示       下载插件

使用方法

HTML结构

该卡片自动翻转效果的HTML结构如下:front为卡片的正面,back为卡片的反面。

<div class="card" style="height: 165px;">  <div class="face front">    <a href="#">      <img  src="picture/1.png" alt="简单实用的jQuery和CSS3卡片自动翻牌特效_html/css_WEB-ITnose" >    </a>  </div>  <div class="face back cardAK">    <img  src="picture/2.png" alt="简单实用的jQuery和CSS3卡片自动翻牌特效_html/css_WEB-ITnose" > </a>  </div></div><div class="circle" id="circles-1"></div>
Salin selepas log masuk

CSS样式

在CSS样式中,通过CSS3的perspective属性设置3D透视效果,并通过backface-visibility为卡片添加正反面能力。然后通过rotate3d函数来对卡片进行翻转。

.contaier{width: 640px; margin: 30px auto;}.card {  perspective: 1000;    -webkit-perspective: 1000;    width: 100%;    margin-bottom: 3px;}.face{    position: absolute;    border-radius:5px;    -webkit-transition: all 1s ease;    -moz-transition: all 1s ease;    transition: all 1s ease;    backface-visibility: hidden;    -ms-backface-visibility: hidden;    -moz-backface-visibility: hidden;    -webkit-backface-visibility: hidden;    -o-backface-visibility: hidden;    background-color: rgb(178, 39, 49);}.front {    z-index: 10;}.back{    transform:rotate3d(0,1,0,-180deg);    -ms-transform:rotate3d(0,1,0,-180deg);  /* IE 9 */    -moz-transform:rotate3d(0,1,0,-180deg); /* Firefox */    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */    -o-transform:rotateY(0,1,0,-180deg);  /* Opera */    z-index: 8;}.card-flipped .front{    transform:rotate3d(0,1,0,180deg);    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */    -o-transform:rotate3d(0,1,0,180deg);  /* Opera */    z-index: 8;}.card-flipped .back{    transform:rotate3d(0,1,0,0deg);    -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */    -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */    -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */    -o-transform:rotate3d(0,1,0,0deg);  /* Opera */    z-index: 10;}
Salin selepas log masuk

初始化插件

该卡片翻转特效使用jQuery代码来翻转卡片,代码非常简单,通过一个定时器来定时切换相应卡片的class类,实现卡片的翻转效果。

$(function () {    flip();});function flip() {    var timer = null;    var i = 0;var j = 0;    var aFlip = $(".card");    function flipFn(arg1, arg2) {  aFlip.eq(i).toggleClass('card-flipped');   i++;  if(i==5){    i=0;  }     }    timer = setInterval(flipFn, 2000);}
Salin selepas log masuk

来源jQuery之家

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan