經常我們在瀏覽一些網頁的時候可能都會看見一些很酷炫的特效，比如百葉窗效果。以前的大多都是js寫出來的，但是自從CSS3出來之後，我們也可以用css代碼直接實現百葉窗效果。唉美中不足就是ie9以下不支持我們這個很炫的效果，這時你可以用js實現兼容性。js實現今天我們就暫且不談，我們談一下css3吧。
要製作純CSS的百葉窗效果，HTML結構是個關鍵。在html結構中，需要使用多幅相同的圖片來組織一個“百葉窗”。我們的demo中製作4個百葉窗窗條，需要4個相同的<span>，將它們放置在一個<div>標籤中。同時，我們還需要將四個span的背景圖片設置成一副完整的圖片。每一組圖片都設置不同的class。然後背景位置我們就用backgroudn-potion:定位。
第一個效果：是四個span圖片都是從左面往右面移動出現。
剛剛開始做的時候我都已經把html佈局好咯，由於還要設置一層定位（但是我沒有設置）
就導致4個span的背景圖片都是從最左面開始 的。後 面我又加了咯一個標籤，設置每一個span都是依據他的父元素定位。(下個窗口條都是應該以他的父元素定位的左上角開始出來的，就是下圖我畫的四個紅色點開始)
第二個效果：四個span圖片旋轉
第三個效果：是四個span圖片由小變大容然後構成一張完美的圖
第四個效果：是設置的四個span圖片3d旋轉構成一張完整的圖（在這裏我遇到麻煩咯），由於我設置的動畫名稱爲3d,然後我在調用的時候，他始 終不運行。難道是不能用數字開頭嗎？這個問題我得下來好好查一下才行），所以親們設置動畫名稱的時候儘量以字母開頭吧。
代碼比較粗暴（女漢子風格）
html代碼：
<div class="Box">
<div class="main">
<ul>
<li>
<!-- <img src="images/1.jpg" /> -->
<div class="showbox showbox_1">
<div class="small small_1">
<span></span>
</div>
<div class="small small_2">
<span></span>
</div>
<div class="small small_3">
<span></span>
</div>
<div class="small small_4">
<span></span>
</div>
</div>
</li>
<li>
<!-- <img src="images/2.jpg" /> -->
<div class="showbox showbox_2">
<div class="small small_1">
<span></span>
</div>
<div class="small small_2">
<span></span>
</div>
<div class="small small_3">
<span></span>
</div>
<div class="small small_4">
<span></span>
</div>
</div>
</li>
<li>
<!-- <img src="images/2.jpg" /> -->
<div class="showbox showbox_3">
<div class="small small_1">
<span></span>
</div>
<div class="small small_2">
<span></span>
</div>
<div class="small small_3">
<span></span>
</div>
<div class="small small_4">
<span></span>
</div>
</div>
</li>
<li >
<!-- <img src="images/2.jpg"/> -->
<div class="showbox showbox_4">
<div class="small small_1">
<span></span>
</div>
<div class="small small_2">
<span></span>
</div>
<div class="small small_3">
<span></span>
</div>
<div class="small small_4">
<span></span>
</div>
</div>
</li>
</ul>
</div>
<div class="nav">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>css代碼：
*{margin:0; padding:0;}
ul,li{ list-style: none;}
.Box{ width: 604px; height:400px; border:1px solid red; margin:50px auto;position:relative; overflow:hidden;}
.main li{ width: 600px; height:400px;}
.inputradio{ width:20px;height:20px; background:red; border-radius: 50%;}
label{font-style: italic;width: 150px;height: 30px;cursor: pointer;color: #fff;line-height: 32px;font-size: 24px;float: left;position: relative;margin-top: 350px; z-index: 1000; background:blue;}
.nav{ position:absolute;left:0; bottom:20px;width:100%; text-align: center; background:blue; z-index: 100;}
.nav li{ width:20px; height:20px; float:left; margin-left: 15px; border-radius: 50%; background:#fff; border:3px solid #ccc; position: relative;border:3px solid #ccc;}
.nav li.on{background:#fff000; border-color: pink;}
.nav li:first-child{ margin-left: 35%;}
.showbox{ width:100%; height:100%;position:absolute; left:0; top:0; z-index: 80;}
.showbox > .small{ width:150px; height:100%; overflow:hidden; float:left;position:relative;
border-right: 1px solid #fff;
-webkit-transition: left 2s ease-in-out;
-moz-transition: left 2s ease-in-out;
-o-transition: left 2s ease-in-out;
-ms-transition: left 2s ease-in-out;
transition: left 2s ease-in-out;}
.small > span{ display:block; width:100%; height:100%;overflow:hidden;position:absolute; left:0; top:0;}
.showbox_1 .small span{ background:url(images/1.jpg);}
.showbox_2 .small span{ background:url(images/2.jpg);}
.showbox_3 .small span{ background:url(images/3.jpg);}
.showbox_4 .small span{ background:url(images/4.jpg);}
.showbox .small:nth-child(1) span{background-position:0 0;}
.showbox .small:nth-child(2) span{background-position:-150px 0;}
.showbox .small:nth-child(3) span{background-position:-300px 0;}
.showbox .small:nth-child(4) span{background-position:-450px 0;}
.small span{ animation: lefts 1.2s ease;
-webkit-animation: lefts 1.2s ease; }
.showbox_2 span{ animation: rotate 1.2s ease;
-webkit-animation: rotate 1.2s ease; }
.showbox_3 span{ animation: scale 1.2s ease-in forwards;/*forwards 表示當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）*/
-webkit-animation: scale 1.2s ease-in forwards; }
.showbox_4 .small{
transform: perspective(200px);
-webkit-transform: perspective(200px);
transform-style: preserve-3d;-webkit-transform-style: preserve-3d; /*如果設置咯這個屬性，代表他的所以子元素都是在3d空間運行*/
}
.showbox_4 span{
animation: rotatey 1.2s ease-in-out;
-webkit-animation: rotatey 1.2s ease-in-out; }
/*left*/
@keyframes lefts{
0%{ left:-150px;}
100%{left:0;}
}
@-webkit-keyframes lefts{
0%{ left:-150px;}
100%{left:0;}
}
/*scale*/
@keyframes scale{
0%{transform: scale(0.2);}
100%{-webkit-transform: scale(1);}
}
@-webkit-keyframes scale{
0%{ -webkit-transform: scale(0.2);
transform: scale(0.2);}
100%{ -webkit-transform: scale(1);
transform: scale(1);}
}
/*rotate*/
@keyframes rotate{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
}
@-webkit-keyframes rotate{
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
/*rotatey*/
@keyframes rotatey{
0%{transform: rotateY(0deg) rotateX(0deg);}
100%{transform:rotateY(360deg) rotateX(30deg);}
}
@-webkit-keyframes rotatey{
0%{-webkit-transform: rotateY(0deg) rotateX(0deg);}
100%{-webkit-transform:rotateY(360deg) rotateX(30deg);}
}