css3百叶窗效果

来源：互联网发布：黑龙江广联达软件购买编辑：程序博客网时间：2024/04/27 04:28

经常我们在浏览一些网页的时候可能都会看见一些很酷炫的特效，比如百叶窗效果。以前的大多都是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);}
}

0 0