现在的位置: 首页 > 综合 > 正文

css3 transition split(分裂旋转效果)

2013年10月22日 ⁄ 综合 ⁄ 共 7984字 ⁄ 字号 评论关闭

一.构建页面

<div style="margin:40px auto;">
            <div class="preload_img">
                <img src="../assets/1.jpg"/>
                <img src="../assets/2.jpg"/>
                <img src="../assets/3.jpg"/>
                <img src="../assets/4.jpg"/>
                <img src="../assets/5.jpg"/>
            </div>
            <div class="container ">
                <div class="cover">
                    <img src="../assets/1.jpg"/>
                </div>
                <div class="transition effect1 perspective">
                    <div class="card p1">
                        <div class="front"><img src="../assets/5.jpg"/>
                        </div>
                        <div class="back"><img src="../assets/1.jpg"/>
                        </div>
                    </div>
                    <div class="card p2">
                        <div class="front"><img src="../assets/5.jpg"/>
                        </div>
                        <div class="back"><img src="../assets/1.jpg"/>
                        </div>
                    </div>
                    <div class="card p3">
                        <div class="front"><img src="../assets/5.jpg"/>
                        </div>
                        <div class="back"><img src="../assets/1.jpg"/>
                        </div>
                    </div>
                    <div class="card p4">
                        <div class="front"><img src="../assets/5.jpg"/>
                        </div>
                        <div class="back"><img src="../assets/1.jpg"/>
                        </div>
                    </div>
                    <div class="card p5">
                        <div class="front"><img src="../assets/5.jpg"/>
                        </div>
                        <div class="back"><img src="../assets/1.jpg"/>
                        </div>
                    </div>
                    <div class="card p6">
                        <div class="front"><img src="../assets/5.jpg"/>
                        </div>
                        <div class="back"><img src="../assets/1.jpg"/>
                        </div>
                    </div>
                    <div class="card p7">
                        <div class="front"><img src="../assets/5.jpg"/>
                        </div>
                        <div class="back"><img src="../assets/1.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

页面构建思路和之前差不多,只不过分裂的效果只是利用img的偏移量,将图片一个个分割成一小部分。每个card + p就标识图片的一部分,一共7个部分,所以就实现了一个图片似乎分裂消失和分裂合并的效果。

同样的,如果要解决一些图片闪烁问题,最好给".front"和".class"加上z-index,这样可以保证front始终再back前面,就解决了在动画过程中出现的图片闪烁现象。

二.js相关代码

类似于flip的效果,详细请见页面构建思路和前一篇差不多。请移步《css3 transition effect(Flip翻转效果)》

三.CSS3 transition 效果

/***************** Multiflip1 ********************/
.effect1 .back{
-webkit-transform: rotate3d(1,0,0,-180deg);
}
.effect1.show .card{
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.effect1 .p1{
z-index: 1;
-webkit-animation-name: multiflip1_4;
}
.effect1 .p2{
z-index: 2;
-webkit-animation-name: multiflip1_3;
}
.effect1 .p3{
z-index: 3;
-webkit-animation-name: multiflip1_2;
}
.effect1 .p4{
z-index: 4;
-webkit-animation-name: multiflip1_1;
}
.effect1 .p5{
z-index: 3;
-webkit-animation-name: multiflip1_2;
}
.effect1 .p6{
z-index: 2;
-webkit-animation-name: multiflip1_3;
}
.effect1 .p7{
z-index: 1;
-webkit-animation-name: multiflip1_4;
}
@-webkit-keyframes multiflip1_1{
0% { -webkit-transform: rotate3d(1,0,0,0); }
60% { -webkit-transform: rotate3d(1,0,0,-180deg); }
100% { -webkit-transform: rotate3d(1,0,0,-180deg); }
}
@-webkit-keyframes multiflip1_2{
0% { -webkit-transform: rotate3d(1,0,0,0); }
10% { -webkit-transform: rotate3d(1,0,0,0); }
70% { -webkit-transform: rotate3d(1,0,0,-180deg); }
100% { -webkit-transform: rotate3d(1,0,0,-180deg); }
}
@-webkit-keyframes multiflip1_3{
0% { -webkit-transform: rotate3d(1,0,0,0); }
20% { -webkit-transform: rotate3d(1,0,0,0); }
80% { -webkit-transform: rotate3d(1,0,0,-180deg); }
100% { -webkit-transform: rotate3d(1,0,0,-180deg); }
}
@-webkit-keyframes multiflip1_4{
0% { -webkit-transform: rotate3d(1,0,0,0); }
30% { -webkit-transform: rotate3d(1,0,0,0); }
90% { -webkit-transform: rotate3d(1,0,0,-180deg); }
100% { -webkit-transform: rotate3d(1,0,0,-180deg); }
}
/***************** Multiflip2 ********************/
.effect2 .back{
-webkit-transform: rotate3d(1,0,0,-180deg);
}
.effect2.show .card{
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.effect2 .p1{
z-index: 1;
-webkit-animation-name: multiflip2_1;
}
.effect2 .p2{
z-index: 2;
-webkit-animation-name: multiflip2_2;
}
.effect2 .p3{
z-index: 3;
-webkit-animation-name: multiflip2_3;
}
.effect2 .p4{
z-index: 4;
-webkit-animation-name: multiflip2_4;
}
.effect2 .p5{
z-index: 3;
-webkit-animation-name: multiflip2_5;
}
.effect2 .p6{
z-index: 2;
-webkit-animation-name: multiflip2_6;
}
.effect2 .p7{
z-index: 1;
-webkit-animation-name: multiflip2_7;
}
@-webkit-keyframes multiflip2_1{
0% { -webkit-transform: rotate3d(1,0,0,0); }
30% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0);}
60% { -webkit-transform: rotate3d(1,0,0,180deg); }
100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }
}
@-webkit-keyframes multiflip2_2{
0% { -webkit-transform: rotate3d(1,0,0,0); }
5% { -webkit-transform: rotate3d(1,0,0,0); }
35% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }
65% { -webkit-transform: rotate3d(1,0,0,180deg); }
100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }
}
@-webkit-keyframes multiflip2_3{
0% { -webkit-transform: rotate3d(1,0,0,0); }
10% { -webkit-transform: rotate3d(1,0,0,0);  }
40% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }
70% { -webkit-transform: rotate3d(1,0,0,180deg); }
100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }
}
@-webkit-keyframes multiflip2_4{
0% { -webkit-transform: rotate3d(1,0,0,0); }
15% { -webkit-transform: rotate3d(1,0,0,0); }
45% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }
75% { -webkit-transform: rotate3d(1,0,0,180deg); }
100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }
}
@-webkit-keyframes multiflip2_5{
0% { -webkit-transform: rotate3d(1,0,0,0); }
20% { -webkit-transform: rotate3d(1,0,0,0); }
50% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }
80% { -webkit-transform: rotate3d(1,0,0,180deg); }
100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }
}
@-webkit-keyframes multiflip2_6{
0% { -webkit-transform: rotate3d(1,0,0,0); }
25% { -webkit-transform: rotate3d(1,0,0,0); }
55% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }
85% { -webkit-transform: rotate3d(1,0,0,180deg); }
100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }
}
@-webkit-keyframes multiflip2_7{
0% { -webkit-transform: rotate3d(1,0,0,0); }
30% { -webkit-transform: rotate3d(1,0,0,0); }
60% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); }
90% { -webkit-transform: rotate3d(1,0,0,180deg); }
100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); }
}
/***************** Multiflip3 ********************/
.effect3 .back{
-webkit-transform: rotate3d(0,1,0,-180deg);
}
.effect3.show .card{
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform-origin: 0% 50%;
}
.effect3 .p1{
z-index: 1;
-webkit-animation-name: multiflip3_1;
}
.effect3 .p2{
z-index: 2;
-webkit-animation-name: multiflip3_2;
}
.effect3 .p3{
z-index: 3;
-webkit-animation-name: multiflip3_3;
}
.effect3 .p4{
z-index: 4;
-webkit-animation-name: multiflip3_4;
}
.effect3 .p5{
z-index: 3;
-webkit-animation-name: multiflip3_5;
}
.effect3 .p6{
z-index: 2;
-webkit-animation-name: multiflip3_6;
}
.effect3 .p7{
z-index: 1;
-webkit-animation-name: multiflip3_7;
}
@-webkit-keyframes multiflip3_1{
0% { -webkit-transform: rotate3d(0,1,0,0); }
60% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
}
@-webkit-keyframes multiflip3_2{
0% { -webkit-transform: rotate3d(0,1,0,0); }
5% { -webkit-transform: rotate3d(0,1,0,0); }
65% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
}
@-webkit-keyframes multiflip3_3{
0% { -webkit-transform: rotate3d(0,1,0,0); }
10% { -webkit-transform: rotate3d(0,1,0,0);  }
70% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
}
@-webkit-keyframes multiflip3_4{
0% { -webkit-transform: rotate3d(0,1,0,0); }
15% { -webkit-transform: rotate3d(0,1,0,0); }
75% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
}
@-webkit-keyframes multiflip3_5{
0% { -webkit-transform: rotate3d(0,1,0,0); }
20% { -webkit-transform: rotate3d(0,1,0,0); }
80% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
}
@-webkit-keyframes multiflip3_6{
0% { -webkit-transform: rotate3d(0,1,0,0); }
25% { -webkit-transform: rotate3d(0,1,0,0); }
85% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
}
@-webkit-keyframes multiflip3_7{
0% { -webkit-transform: rotate3d(0,1,0,0); }
30% { -webkit-transform: rotate3d(0,1,0,0); }
90% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); }
}

抱歉!评论已关闭.