js 和 css3 结合的动态图片摇摆和爆炸散开的效果实现

谁借莪１个温暖的怀抱￠ 2022-01-13 06:23 262阅读 0赞

## 做 gif 的动图费时费力 , 我就简单的称述一下 ##

1.  如图一所示 , 大红包左右摇摆 , 点击领取图片左右摇摆 , 再循环 n 次之后变成图二的效果
2.  大红包消失 , 金币图片和小红包图片从中间爆炸散开 , 由小到大 , 由清晰到模糊 , 直到消失
3.  在持续爆炸数秒后 , 大红包再次出现 , 开始左右摇摆 , 从此周而复始  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 1]

### html页面的代码 ⬇️ ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./Resources/css/animation.css">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <div id="ad_animation">
            <a href="http://www.baidu.com">
    	        <div id="award">
    	            <img src="./Resources/images/img_3.png" alt="Big red envelope">
    	        </div>
    	        <div id="click_to_collect">
    	            <img src="./Resources/images/img_2.png" alt="Click to collect">
    	        </div>
    	        <div id="core">
    	            
    	        </div>
            </a>
        </div>
    </body>
    <script src="./Resources/js/animation.js"></script>
    </html>

### html 页面引入的 animation.js ⬇️ ###

### html 文件中引用的 animation.css (包含css和对应的样式) ⬇️ ###

/* 背景 */
    #ad_animation{ 
        width: 6rem; 
        height: 6rem;
        position: fixed;
        overflow: hidden;
        bottom:4rem;
        right:0;
    }
    #ad_animation a{ 
        display: block;
        width: 80%;
        height:80%;
        margin: 10%;
    }
    /* 大红包 */
    #award img { 
        width: 100%;
    }
    #award { 
        position: absolute;
        width: 44%;
        top: 9%;
        left: 28%;
        transform: rotate(-25deg);
    animation: zy 1.5s .15s linear infinite;
    -moz-animation: zy 1.5s .15s linear infinite;
    /* Firefox */
    -webkit-animation: zy 1.5s .15s linear infinite;
    /* Safari and Chrome */
    -o-animation: zy 1.5s .15s linear infinite;
    /* Opera */
    }
    @-webkit-keyframes zy { 
        10%,30%,50%,70%,90%{ 
            transform: rotate(25deg);
        }
        20%,40%,60%,80%,100% { 
            transform: rotate(-25deg);
        }
    }
    @-moz-keyframes zy { 
        10%,30%,50%,70%,90%{ 
            transform: rotate(25deg);
        }
        20%,40%,60%,80%,100% { 
            transform: rotate(-25deg);
        }
    }
    @-o-keyframes zy { 
        10%,30%,50%,70%,90%{ 
            transform: rotate(25deg);
        }
        20%,40%,60%,80%,100% { 
            transform: rotate(-25deg);
        }
    }
    @keyframes zy { 
        10%,30%,50%,70%,90%{ 
            transform: rotate(25deg);
        }
        20%,40%,60%,80%,100% { 
            transform: rotate(-25deg);
        }
    }
    /* 点击领取 */
    #Click_to_collect img { 
        width: 100%;
    }
    
    #Click_to_collect { 
        position: absolute;
        width: 70%;
        top: 44%;
        left: 15%;
        animation: dx 2s .15s linear infinite;
        -moz-animation: dx 2s .15s linear infinite;
        /* Firefox */
        -webkit-animation: dx 2s .15s linear infinite;
        /* Safari and Chrome */
        -o-animation: dx 2s .15s linear infinite;
        /* Opera */
    }
    @-webkit-keyframes dx { 
        0% { 
            transform: scale(1, 1);
        }
        50% { 
            transform: scale(1.5, 1.5);
        }
        100% { 
            transform: scale(1, 1);
        }
    }
    
    @-moz-keyframes dx { 
        0% { 
            transform: scale(1, 1);
        }
    
        50% { 
            transform: scale(1.5, 1.5);
        }
    
        100% { 
            transform: scale(1, 1);
        }
    }
    
    @-o-keyframes dx { 
        0% { 
            transform: scale(1, 1);
        }
    
        50% { 
            transform: scale(1.5, 1.5);
        }
    
        100% { 
            transform: scale(1, 1);
        }
    }
    
    @keyframes dx { 
        0% { 
            transform: scale(1, 1);
        }
    
        50% { 
            transform: scale(1.5, 1.5);
        }
    
        100% { 
            transform: scale(1, 1);
        }
    }
    /* 中心 */
    #core{ 
        position: absolute;
        width: 8%;
        height:8%;
        top: 46%;
        left: 46%;
    }
    
    .wallet { 
        width: 50%;
        height: 70%;
        background-image: url("../images/img_3.png");
        /*红包的背景图*/
        background-size: 100% 100%;
        position: absolute;
    }
    .gold_coin{ 
        width: 50%;
        height: 70%;
        background-image: url("../images/3.png");
        /*金币的背景图*/
        background-size: 100% 100%;
        position: absolute;
    }

![谢谢][20191218102757512.gif]

> 多谢交流

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]: /images/20220113/83d9d84af0ac497d811ebebef940c1e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 1]: /images/20220113/adc273247d0c47a8a8bea5d737a7f153.png
[20191218102757512.gif]: /images/20220113/fe2320e0c3d642f89162da1956e1f508.png