CSS3堆疊卡片展開和收縮動畫效果 炫酷圖片效果

CSS3堆疊卡片展開和收縮動畫效果 炫酷圖片效果2634
一款效果超酷的jQuery和CSS3堆疊卡片展開和收縮特效。該圖片特效開始的時候卡片被堆疊在一起,當用戶點擊最上面的卡片的時候,堆疊圖片以各種動畫方式展開。展開后再點擊任意卡片,它們又會收縮堆疊起來。HTML結構該堆疊卡片共設計了4種效果,第一種效果的HTML結構采用無序列表結構,每一個<li>元素中放置一張圖片和一個用于圖片描述的div.content元素。
<ul class="cards">  <li class="title">    <h2>Slide right</h2>  </li>  <li class="card card-1"><img src="img/01.jpg"/>    <div class="content">      <h1>Card 1 Title</h1>      <p>Card description</p>    </div>  </li>  <li class="card card-2"><img src="img/02.jpg"/>    <div class="content">      <h1>Card 2 Title</h1>      <p>Card description</p>    </div>  </li>  <li class="card card-3"><img src="img/03.jpg"/>    <div class="content">      <h1>Card 3 Title</h1>      <p>Card description</p>    </div>  </li></ul>            
CSS樣式第一種卡片效果的每張卡片的基本樣式如下:
ul.cards {  width: 660px;  margin: 0 auto 20px;  height: 300px;  list-style-type: none;  position: relative;  padding: 20px 0;  cursor: pointer;}ul.cards li.title {  margin: 0 0 20px;}ul.cards li.title h2 {  font-weight: 700;}ul.cards li.card {  background: #FFF;  overflow: hidden;  height: 200px;  width: 200px;  border-radius: 10px;  position: absolute;  left: 0px;  box-shadow: 1px 2px 2px 0 #aaa;  -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);          transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);}ul.cards li.card img {  max-width: 100%;  padding: 5px;  height: auto;}ul.cards li.card div.content {  padding: 5px 10px;}              
然后使用rotateZ和z-index屬性來將圖片堆疊在一起并分別旋轉一定的角度。同時為后面兩張卡片添加transition-delay,用于在卡片展開和收縮時有一定的延遲時間。
ul.cards li.card.card-1 {  z-index: 10;  -webkit-transform: rotateZ(-2deg);          transform: rotateZ(-2deg);}ul.cards li.card.card-2 {  z-index: 9;  -webkit-transform: rotateZ(-7deg);          transform: rotateZ(-7deg);  -webkit-transition-delay: 0.05s;          transition-delay: 0.05s;}ul.cards li.card.card-3 {  z-index: 8;  -webkit-transform: rotateZ(5deg);          transform: rotateZ(5deg);  -webkit-transition-delay: 0.1s;          transition-delay: 0.1s;}                
在堆疊卡片被點擊的時候,ul.card元素被添加了transition class,這個class用于執行卡片的展開動畫。
ul.cards.transition li.card {  -webkit-transform: rotateZ(0deg);          transform: rotateZ(0deg);}ul.cards.transition li.card.card-1 {  left: 440px;}ul.cards.transition li.card.card-2 {  left: 220px;}         
其它三種效果的實現原理基本相同,請參考下載文件。JAVASCRIPT特效中使用jQuery來在點擊卡片時添加和移除相應的class。
jQuery(document).ready(function ($) {    $('ul.cards').on('click', function () {        $(this).toggleClass('transition');    });    $('ul.card-stacks').on('click', function () {        $(this).toggleClass('transition');    });    $('ul.cards-split').on('click', function () {        $(this).toggleClass('transition');    });    $('ul.cards-split-delay').on('click', function () {        $(this).toggleClass('transition');    });});            

也許你還喜歡

乱码理论卡一卡二新区网站_日本性感美女极致诱惑_亲爱的老师3高清中文播放_韩国美女主播在线观看