css3动画4
效果：
代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> /* Index Card Styling */ * { margin:0; padding:0;} ul#index_cards { margin-top:50px; text-align:center; } ul#index_cards li { background:url(Images/card_bg.jpg) repeat; height:450px; width:130px; display:block; float:left; border:1px solid #666; padding:25px 10px; position:relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 2px 2px 10px #000; -webkit-box-shadow: 2px 2px 10px #000; -moz-transition: all 0.5s ease-in-out; /*动画*/ -webkit-transition: all 0.5s ease-in-out; margin-bottom:70px; } #card-1 { -webkit-transform: rotate(-20deg); /*变形 静态属性*/ -moz-transform: rotate(-20deg); z-index:1; left:150px; top:40px; } #card-2 { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); z-index:2; left:70px; top:10px; } #card-3 { background-color:#69732B; z-index:3; } #card-4 { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); z-index:2; right:70px; top:10px; } #card-5 { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); z-index:1; right:150px; top:40px; } /* Hover States */ ul#index_cards li:hover { z-index:4; } #card-1:hover { -moz-transform: scale(1.1) rotate(-18deg); -webkit-transform: scale(1.1) rotate(-18deg); } #card-2:hover { -moz-transform: scale(1.1) rotate(-8deg); -webkit-transform: scale(1.1) rotate(-8deg); } #card-3:hover { -moz-transform: scale(1.1) rotate(2deg); -webkit-transform: scale(1.1) rotate(2deg); } #card-4:hover { -moz-transform: scale(1.1) rotate(12deg); -webkit-transform: scale(1.1) rotate(12deg); } #card-5:hover { -moz-transform: scale(1.1) rotate(22deg); -webkit-transform: scale(1.1) rotate(22deg); } /* Content Styling */ ul#index_cards li img { margin-top:7px; background:#eee; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0px 0px 5px #aaa; -webkit-box-shadow: 0px 0px 5px #aaa; } ul#index_cards li p { margin-top:4px; text-align:left; line-height:28px; } </style> </head> <body> <ul id="index_cards"> <li id="card-1"> <h3>Card 1</h3> <img src="images/t9tuqui_trans.png" height="130" width="130" alt="Toucan"> <p>Name: Toucan<br> Age: 5<br> Size: 50 cm<br> Weight: 600 g<br> Food: Fruit<br> Toucan lives in southern and central America and loves to fly around</p> </li> <li id="card-2"> <h3>Card 2</h3> <img src="images/t9foxy_trans.png" height="130" width="130" alt="Fox"> <p>Name: Fox<br> Age: 3<br> Size: 70 cm<br> Weight: 5.5 kg<br> Food: Meat<br> Fox lives in the northern hemisphere and loves to play seek and hide</p> </li> <li id="card-3"> <h3>Card 3</h3> <img src="images/t9dog2_trans.png" height="130" width="130" alt="Dog"> <p>Name: Dog<br> Age: 8<br> Size: 120 cm<br> Weight: 10 kg<br> Food: Bones<br> Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p> </li> <li id="card-4"> <h3>Card 4</h3> <img src="images/t9penguino_trans.png" height="130" width="130" alt="Penguin"> <p>Name: Penguin<br> Age: 20<br> Size: 110 cm<br> Weight: 35 kg<br> Food: Fish<br> Penguin lives where it's cold and icy and loves to swim and dive</p> </li> <li id="card-5"> <h3>Card 5</h3> <img src="images/t9lion_trans.png" height="130" width="130" alt="Lion"> <p>Name: Lion<br> Age: 12<br> Size: 190 cm<br> Weight: 180 kg<br> Food: Meat<br> Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p> </li> </ul> </body> </html>
