js 和 css3 結合的動態圖片搖擺和爆炸散開的效果實現

做 gif 的動圖費時費力 , 我就簡單的稱述一下

如圖一所示 , 大紅包左右搖擺 , 點擊領取圖片左右搖擺 , 再循環 n 次之後變成圖二的效果
大紅包消失 , 金幣圖片和小紅包圖片從中間爆炸散開 , 由小到大 , 由清晰到模糊 , 直到消失
在持續爆炸數秒後 , 大紅包再次出現 , 開始左右搖擺 , 從此周而復始

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 ⬇️

window.setInterval("init()", 10000);

class Wallet {
    constructor() {
        this.wallet = null;
        this.bool = true;
        this.deg = 0;
        this.c = Math.random() * 0.08 -0.04;
        this.s=1;
        this.w = Math.random() * 10 - 5;
        this.h = Math.random() * 10 - 5;
    }
    createWallet(x, y) {
        if (!this.bool) return;
        if (!this.wallet) {
            this.wallet = document.createElement("div");
        }
        if (this.h > 4 || this.h < -4) {
            this.wallet.className = "gold_coin";
        }else{
            this.wallet.className = "wallet";
        }
        this.wallet.style.opacity = "1";
        this.wallet.style.transform = `rotate(${this.deg}deg) scale(${this.s},${this.s})`;
        this.wallet.style.left = x + "px";
        this.wallet.style.top = y + "px";
        return this.wallet;
    }
    update() {
        if (!this.bool) return;
        this.deg += 3;
        this.s += this.c;
        this.wallet.style.transform = `rotate(${this.deg}deg) scale(${this.s},${this.s})`;
        this.wallet.style.opacity = Number(this.wallet.style.opacity) - 0.01;
        this.wallet.style.top = this.wallet.offsetTop + this.h + "px";
        if (this.s > 0.2) {
            this.wallet.style.left = this.wallet.offsetLeft + this.w + "px";
        } else {
            this.wallet.style.left = this.wallet.offsetLeft + this.h + "px";
        }
        if (Number(this.wallet.style.opacity) <= 0.4) {
            this.bool = false;
        }
    }
}
let arr = [];
let time = 730;

function init() {
    console.log("十秒了,開始執行");
    setTimeout(function () {
        // console.log("大紅包沒了,開始散開");
        var award = document.getElementById("award");
        while (award.hasChildNodes()) //當div下還存在子節點時 循環繼續 
        {
            award.removeChild(award.firstChild);
        }
    }, 2000)
    setTimeout(function () {
        // console.log("散開沒了,大紅包出現");
        $("#award").append('<img src="./Resources/images/img_3.png" alt="Big red envelope">')
        time = 420
    }, 5000)
}

animation();
function animation() {
    //在動畫沒有結束前，遞歸渲染
    requestAnimationFrame(animation);
    let list = [];
      for (let i = 0; i < arr.length; i++) {
          arr[i].update();
          if (!arr[i].bool) {
              arr[i].wallet.remove();
              arr[i] = null;
          } else {
              list.push(arr[i]);
          }
      }
     arr = list.concat();
     list = null;
     time--;
     if (time > 0) return;
     let wallet = new Wallet();
     let core = document.getElementById("core");
     core.appendChild(wallet.createWallet(0, 0));
     arr.push(wallet);
}

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% {
        transform: rotate(25deg);
    }
    20% {
        transform: rotate(-25deg);
    }
    30% {
        transform: rotate(25deg);
    }
    40% {
        transform: rotate(-25deg);
    }
    50% {
        transform: rotate(25deg);
    }

    60% {
        transform: rotate(-25deg);
    }

    70% {
        transform: rotate(25deg);
    }

    80% {
        transform: rotate(-25deg);
    }
    90% {
        transform: rotate(25deg);
    }
    100% {
        transform: rotate(-25deg);
    }
}
@-moz-keyframes zy {
    10% {
        transform: rotate(25deg);
    }

    20% {
        transform: rotate(-25deg);
    }

    30% {
        transform: rotate(25deg);
    }

    40% {
        transform: rotate(-25deg);
    }

    50% {
        transform: rotate(25deg);
    }

    60% {
        transform: rotate(-25deg);
    }

    70% {
        transform: rotate(25deg);
    }

    80% {
        transform: rotate(-25deg);
    }

    90% {
        transform: rotate(25deg);
    }

    100% {
        transform: rotate(-25deg);
    }
}
@-o-keyframes zy {
    10% {
        transform: rotate(25deg);
    }

    20% {
        transform: rotate(-25deg);
    }

    30% {
        transform: rotate(25deg);
    }

    40% {
        transform: rotate(-25deg);
    }

    50% {
        transform: rotate(25deg);
    }

    60% {
        transform: rotate(-25deg);
    }

    70% {
        transform: rotate(25deg);
    }

    80% {
        transform: rotate(-25deg);
    }

    90% {
        transform: rotate(25deg);
    }

    100% {
        transform: rotate(-25deg);
    }
}
@keyframes zy {
    10% {
        transform: rotate(25deg);
    }

    20% {
        transform: rotate(-25deg);
    }

    30% {
        transform: rotate(25deg);
    }

    40% {
        transform: rotate(-25deg);
    }

    50% {
        transform: rotate(25deg);
    }

    60% {
        transform: rotate(-25deg);
    }

    70% {
        transform: rotate(25deg);
    }

    80% {
        transform: rotate(-25deg);
    }

    90% {
        transform: rotate(25deg);
    }

    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;
}

多謝交流

js 和 css3 結合的動態圖片搖擺和爆炸散開的效果實現

做 gif 的動圖費時費力 , 我就簡單的稱述一下

html頁面的代碼 ⬇️

html 頁面引入的 animation.js ⬇️

html 文件中引用的 animation.css (包含css和對應的樣式) ⬇️

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

lightdb數據庫超時相關控制參數

lightdb秒級增加列和刪除列（not null帶默認值）

Java ThreadPoolShutdown

VScode編輯器最好用的幾款必備插件和設置

解決WebStorm報錯顯示JSCS:Please specify path to ‘JSCS’ package

vue使用axios中的post請求時, 如何將json數據改爲formdata類型

Mac上如何關閉谷歌了瀏覽器的同源策略

HBuilderX uni-app發行到微信小程序時報錯（已解決）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結