以下是 CSS3制作动态索引卡特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Use CSS3 to Create a Dynamic Stack of Index Cards - Demo</title>
<link rel="stylesheet" href="style/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<a href="../../index.php"><img src="images/demo.png" height="89" width="600" alt="DesignLovr Demo" /></a>
<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>
</div>
</body>
</html>CSS代码(style.css):
@charset "utf-8";/* CSS Document */
/*CSS Reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,small{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* @font-face definitions */
@font-face{font-family:'KulminoituvaRegular';src:url('../fonts/kulminoituva.eot');src:local('Kulminoituva Regular'),local('Kulminoituva'),url('../fonts/kulminoituva.woff') format('woff'),url('../fonts/kulminoituva.ttf') format('truetype'),url('../fonts/kulminoituva.svg#Kulminoituva') format('svg');}
@font-face{font-family:'NotethisRegular';src:url('../fonts/Note_this.eot');src:local('Note this Regular'),local('Notethis'),url('../fonts/Note_this.woff') format('woff'),url('../fonts/Note_this.ttf') format('truetype'),url('../fonts/Note_this.svg#Notethis') format('svg');}
/* General styling */
body{background:#202020;font-family:NotethisRegular,Verdana,Arial,sans-serif;font-size:125%;color:#202020;}
h1,h2,h3,h4,h5,h6{font-family:KulminoituvaRegular,"Arial Black",Gadget,sans-serif;font-size:1.5em;}
#wrapper{width:760px;margin:0 auto;text-align:center;padding-top:50px;}
/* Index Card Styling */
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;}
#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;}
分享到QQ
分享到微博
微信扫一扫
