版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
做 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;
}
多谢交流