卡片合成动画

function openAnimate() {
    let empty = document.getElementsByClassName("empty");
    //卡片聚合动画
    for (let i = 0; i < empty.length; i++) {
        empty[i].classList.add("layer"+i)
    }
    //给福袋添加动画
    setTimeout(() => {
        let empty = document.getElementsByClassName("empty");
        let fudai = document.getElementById('fudai');
        for (let i = 0; i < empty.length; i++) empty[i].style.display = "none";
        fudai.style.display = "block";
        fudai.classList.add("fudai_rock");
    }, 1000);
    //动画结束后消失
    setTimeout(() => {
        let lucky = document.getElementById('lucky');
        fudai.style.display = "none";
        lucky.style.display = "block";
    }, 2750);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

#card {
    color: #fff;
    background: url("./img/collect.png") no-repeat;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.card_hd {
    height: 27%;
}

.card_bd {
    height: 56.5%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card_bd div {
    width: 50%;
    height: 50%;
    position: relative;
}

.card_bd img {
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.card_bd div span {
    position: absolute;
    bottom: 15%;
    right: .9rem;
    font-size: 0.3rem;
    z-index: 20;
}


/* 动画 */

.empty {
    position: absolute;
    transition: all 1s;
}

.card_bd .layer0 {
    left: 100%;
    top: 100%;
    z-index: 10;
}

.card_bd .layer1 {
    left: 0%;
    top: 100%;
    z-index: 9;
}

.card_bd .layer2 {
    left: 100%;
    top: 0%;
    z-index: 8;
}

.card_bd .layer3 {
    left: 0%;
    top:  0%;
    z-index: 7;
}


/* 福袋 */

#fudai {
    /* position: absolute; */
    /* left: 38%;
    top: 30%; */
    z-index: 10;
    height: auto;
    display: none;
}

.fudai_rock {
    /* 给一个元素添加两个动画 */
    animation: rock 0.25s cubic-bezier(0.42, 0, 0.58, 1) 3,shift 0.5s cubic-bezier(0.32, 0, 1, 1) 0.75s forwards;
}


@keyframes rock {
    0% {
        transform: translate(-50%,-50%) rotateZ(0deg);
    }
    25% {
        transform: translate(-50%,-50%) rotateZ(-15deg);
    }
    50% {
        transform: translate(-50%,-50%) rotateZ(0deg);
    }
    75% {
        transform: translate(-50%,-50%) rotateZ(15deg);
    }
    100% {
        transform: translate(-50%,-50%) rotateZ(0deg);
    }
}

@keyframes shift {
    0% {
        transform: translate(-50%,-50%) scale(1);
    }
    100% {
        transform: translate(-50%,-50%) scale(0.4);
        top:87%;
        left:8%;
    }
}


/* 底部 */

.card_ft {
    width: 100%;
    height: 16.5%;
    position: absolute;
    bottom: 0;
}

.card_ft .lucky {
    height: 40%;
    overflow: hidden;
    position: relative;
}

.bag {
    height: 100%;
    width: 30%;
    margin-left: 0.2rem;
    overflow: hidden;
}

.bag span,
.card_ft .lucky p {
    font-size: 0.33rem;
    font-weight: 500;
}

.bag img {
    height: 100%;
    float: left;
    margin-top: 3%;
}

.bag span {
    float: left;
    margin-top: 15%;
}

.card_ft .lucky p {
    position: absolute;
    width: 100%;
    bottom: 20%;
    text-align: center;
}

.card_ft .lucky p span {
    color: rgb(156, 255, 0);
}

.card_ft .lucky_btn {
    height: 60%;
    text-align: center;
}

.lucky_btn img {
    height: 85%;
    margin-top: 0.1rem;
}

#lucky {
    display: none;
}


/* rem布局 */

@media (min-width: 320px) {
    html {
        font-size: 44.4444px;
    }
}

@media (min-width: 360px) {
    html {
        font-size: 50px;
    }
}

@media (min-width: 375px) {
    html {
        font-size: 52.0833px;
    }
}

@media (min-width: 384px) {
    html {
        font-size: 53.3333px;
    }
}

@media (min-width: 414px) {
    html {
        font-size: 57.5px;
    }
}

@media (min-width: 448px) {
    html {
        font-size: 62.2222px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 66.6667px;
    }
}

@media (min-width: 512px) {
    html {
        font-size: 71.1111px;
    }
}

@media (min-width: 544px) {
    html {
        font-size: 75.5556px;
    }
}

@media (min-width: 576px) {
    html {
        font-size: 80px;
    }
}

@media (min-width: 608px) {
    html {
        font-size: 84.4444px;
    }
}

@media (min-width: 640px) {
    html {
        font-size: 88.8889px;
    }
}

@media (min-width: 720px) {
    html {
        font-size: 100px;
    }
}

    
 
    
 
    
 
    
 
    



    
 
        
  
        
   
    
    
     
     
    11 
    
    
     
     
    12 
    
    
     
     
    13 
    
    
     
     
    14 
    
    
  
        
   
    
     
      
      X 1 
     
    
 1000人已收集