效果展示
eaabe082083a4bbaa67ae4a82504f4b0.gif效果展示解析
1.确定开始动画前各个模块的位置。
2.设置图片聚合时的位置和过度时间。
3.设置3D轮播图的出现时间和动画持续时间
4.轮播图动画结束后,将各模块归位。
动画代码
html
<div class="globalLoadingContainer">
<div class="container">
<div class="modules">
<div v-for="(item,index) in imageList" :key="index" :class="item.class + ' module'">
<img class="module" :src="item.imageUrl" alt="">
</div>
</div>
<div class="warp">
<div class="mod">
<div class="mgRotate" v-for="(item,key) in imageList" :key="key">
<img :src="item.imageUrl" alt="" style="width:100%;height:100%;">
</div>
</div>
</div>
</div>
</div>
script
imageList:[{
class:'modules_one',
imageUrl:require('@/assets/loading_one.png')
},{
class:'modules_two',
imageUrl:require('@/assets/loading_two.jpg')
},{
class:'modules_thr',
imageUrl:require('@/assets/loading_thr.jpg')
},{
class:'modules_four',
imageUrl:require('@/assets/loading_four.jpg')
},{
class:'modules_five',
imageUrl:require('@/assets/loading_five.jpg')
},{
class:'modules_six',
imageUrl:require('@/assets/loading_six.jpg')
},]
css
@keyframes rotate {
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
@keyframes showLoading {0%{opacity: 0.5;}100%{opacity: 1;}}
@keyframes hideone {0%{opacity:1;}100%{top:190px;left:687px;}}
@keyframes hidetwo {0%{opacity:1;}100%{top:190px;right:687px;opacity: 0;}}
@keyframes showOne {0%{top:190px;left:687px;opacity:0.5;}100%{top:0;left:0;opacity: 1}}
@keyframes showTwo {0%{top:190px;left:687px;opacity:0.5;}100%{top:304px;left:0;opacity: 1;}}
@keyframes showThr {0%{top:190px;left:687px;opacity:0.5;}100%{top:604px;left:0;opacity: 1;}}
@keyframes showFour {0%{top:190px;right:687px;opacity:0.5;}100%{top:0;right:0;opacity: 1;}}
@keyframes showFive {0%{top:190px;right:687px;opacity:0.5;}100%{top:304px;right:0;opacity: 1;}}
@keyframes showSix {0%{top:190px;right:687px;opacity:0.5;}100%{top:604px;right:0;opacity: 1;}}
.globalLoadingContainer{
position: fixed;
background:url('../../assets/glo_bg.jpg');
background-size: 1920px;
top:0;
left:0;
bottom: 0;
right:0;
z-index:10;
}
.container{
width:100%;
height:80%;
margin-top:137px;
}
.warp{
width:100%;
height:800px;
perspective:1000px;
position:relative;
top:0;
margin:0 auto;
transform: scale(0.5);
opacity:0;
animation: showLoading 2.7s .3s;
.mod{
width:480px;
height:284px;
transform-style: preserve-3d;
position: absolute;
left:50%;
top:50%;
margin-top:-200px;
margin-left:-240px;
animation: rotate 3s infinite 1s;
//展示图
.mgRotate {
position: absolute;
bottom: 0;
width: 480px;
height: 284px;
border-radius: 20px;
overflow: hidden;
opacity: 1;
}
}
.loding{
width:100%;
height:100px;
color:white;
position: absolute;
bottom:0;
text-align: center;
font-size: 48px;
}
}
.mgRotate:nth-child(1) {
transform: rotateY(0) translateZ(500px);
}
.mgRotate:nth-child(2) {
transform: rotateY(60deg) translateZ(500px);
}
.mgRotate:nth-child(3) {
transform: rotateY(120deg) translateZ(500px);
}
.mgRotate:nth-child(4) {
transform: rotateY(0deg) translateZ(-500px);
}
.mgRotate:nth-child(5) {
transform: rotateY(-120deg) translateZ(500px);
}
.mgRotate:nth-child(6) {
transform: rotateY(-60deg) translateZ(500px);
}
.modules{
position: relative;
top:0;
left:0;
right:0;
bottom:0;
}
.module{
width: 480px;
height: 284px;
background: rgba(0, 0, 0, .6);
position: absolute;
}
.modules_one{
top:0;
left:0;
opacity: 0;
animation: hideone 1s,showOne 2s 3s;
}
.modules_two{
top:304px;
left:0;
opacity: 0;
animation: hideone 1s,showTwo 2s 3s;
}
.modules_thr{
top:604px;
left:0;
opacity: 0;
animation: hideone 1s,showThr 2s 3s;
}
.modules_four{
top:0;
right:0;
opacity: 0;
animation: hidetwo 1s,showFour 2s 3s;
}
.modules_five{
top:304px;
right:0;
opacity: 0;
animation: hidetwo 1s,showFive 2s 3s;
}
.modules_six{
top:604px;
right:0;
opacity: 0;
animation: hidetwo 1s,showSix 2s 3s;
}
网友评论