标签：
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <h1>Wombat Revealer</h1> <div class="item one"> <div class=‘cover‘> <span>Reveal Wombat!</span> </div> <img src="https://c2.staticflickr.com/6/5290/5262975644_bc61d8702d_b.jpg" width=320 /> </div> <div class="item two"> <div class=‘cover‘> <span>Reveal Wombat!</span> </div> <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Common_Wombat_(Vombatus_ursinus_tasmaniensis).jpg" width=320 /> </div> <div class="item three"> <div class=‘cover‘> <span>Reveal Wombat!</span> </div> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/1024px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" width=320 /> </div> </body> </html>
.item .cover { width: 320px; height: 213px; background-color: yellow; position: absolute; transition: opacity 500ms 200ms, transform 500ms; } .item .cover.open { opacity: 0; transform: rotate(180deg); }
jQuery(‘.cover‘).click(function(e) { var target = jQuery(e.currentTarget); target.toggleClass(‘open‘); });
[CSS] CSS Transitions: Delays and Multiple Properties
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/5242369.html
