-
Notifications
You must be signed in to change notification settings - Fork 0
/
heart.html
73 lines (67 loc) · 2.69 KB
/
heart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱心666</title>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
}
#heart {
position: relative;
}
.item {
position: absolute;
}
</style>
</head>
<body>
<div id="heart"></div>
<script>
let heartList = '';
const n = 666;
function getRandomColor() {
return (function (m, s, c) {
return (c ? arguments.callee(m, s, c - 1) : '#') +
s[m.floor(m.random() * 16)]
})(Math, '0123456789abcdef', 5)
}
// 生成爱心列表
for (let i = 0; i <= n; i++) {
heartList += `
<svg id="heart_${i}" class="item" t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32" fill="${getRandomColor()}"><path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 677.51936 192.03072z" p-id="1254"></path></svg>
`
}
// 随机放大倍数
const getRandomNum = (scale) => Math.floor(Math.random() * scale + 1);
const boxWidth = window.innerWidth;
const boxHeight = window.innerHeight;
const animateNum = 99;
setTimeout(function () {
for (let i = 0; i <= n; i++) {
const item = `heart_${i}`;
const width = getRandomNum(boxWidth);
const height = getRandomNum(boxHeight);
const cWidth = getRandomNum(1000) - width;
const cHeight = getRandomNum(1000) - height;
document.getElementById(item).animate([
{ transform: `scale(${getRandomNum(2)})`, left: `0px`, top: `0px` },
{ transform: `scale(${getRandomNum(2)})`, left: `${boxWidth / 2}px`, top: `${boxHeight / 2}px` },
{ transform: `scale(${getRandomNum(2)})`, left: `${cWidth * 2}px`, top: `${cHeight * 2}px` },
], {
// timing options
duration: 9000,
iterations: Infinity,
easing: 'ease-in-out'
});
}
}, 100)
document.getElementById('heart').innerHTML = heartList;
</script>
</body>
</html>