一.构建页面
<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); } }