话不多说先上图
实现内容是在页面中有20个小心心在随机移动（移动方向随机 位置随机 颜色随机 旋转方向随机）。觉得好看的话，加在你的网页上吧！要实现这个效果，用到了html，css，js知识。实现的难点主要有如下：
- 小心心的绘制
- 随机产生移动方向，旋转方向等
一、 小心心的绘制
在小心心的绘制上，小白的我也是想了很长时间，因为要作为背景，并且移动，用canvas画布就比较费时费力。这里我时用两个圆形加一个旋转45°的正方形实现的。如图所示
所以只需要三个标签并分别设置标签的样式，即设置标签绝对定位，以heart为父元素进行定位，如此在小心心移动的时候,只需要改变父元素的位置即可
html代码如下：
<div class="heart">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="square"></div>
</div>
css代码如下:
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
.heart{
position: absolute;
}
.circle1{
width: 20px;
height: 20px;
background-color: red;
border-radius:100%;
left: 0px;
position: absolute;
}
.circle2{
width: 20px;
height: 20px;
left: 14px;
background-color: blue;
border-radius:100%;
position: absolute;
}
.square{
width: 20px;
height:20px;
background-color: green;
position: absolute;
transform: rotate(45deg);
top: 7px;
left:7px;
}
最重要的js逻辑实现:
1. 首先写一个创建dom元素的函数，因为每一个小心心都需要创建相同的dom元素，我们在这里把它封装成一个函数。
function randomHeart() {
//因为我们这里背景颜色是以rgb的形式设置的，并且此小demo将红色设置为255更合适
//故之随机生成了绿色 和 蓝色的值
var g = Math.floor(Math.random() * 255); //随机生成的颜色的值
var b = Math.floor(Math.random() * 255);
var heart = document.createElement("div");
var circle1 = document.createElement("div");
var circle2 = document.createElement("div");
var square = document.createElement("div");
heart.classList.add("heart");
circle1.classList.add("circle1");
circle2.classList.add("circle2");
square.classList.add("square");
circle1.style.background = "rgb(255," + g + "," + b + ")"
circle2.style.background = "rgb(255," + g + "," + b + ")"
square.style.background = "rgb(255," + g + "," + b + ")"
heart.appendChild(circle1)
heart.appendChild(circle2)
heart.appendChild(square)
document.body.appendChild(heart)
return heart;
}
下面这两个方法是用于获取当前小心心的位置，或小心心结束位置。将随机生成的数乘以浏览器窗口的大小，使小心心不会挪出窗口
function getEndY() {
return Math.random()*document.body.scrollHeight;
}
function getEndX() {
return Math.random()*document.body.scrollWidth;
}
下面就是js的核心代码啦，在这里我就把解释写在代码里了。
window.onload = function () {
var heartDom = []; //用于存放生成的20个父dom元素
var stops = []; //用于存放结束位置的x坐标，y坐标，旋转方向，当前旋转角度
for (var i = 0; i < 10; i++) {
heartDom.push(randomHeart())
heartDom[i].style.left = getEndX() + "px";
heartDom[i].style.top = getEndY() + "px";
var endx =getEndX();
var endy = getEndY();
if (Math.random() > 0.5) {
//x坐标，y坐标，旋转方向，当前旋转角度
var stop = [endx, endy, true, 0]
} else {
var stop = [endx, endy, false, 0]
}
stops.push(stop)
}
//通过定时器来对小心心的位置、旋转的样式进行改变
setInterval(() => {
for (var i = 0; i < heartDom.length; i++) {
//以下四个判断是对小心心是否到达结束位置进行判断，当小心心到达结束位置后，
//重新生成新的结束位置，不断循环判断
if (stops[i][0] <= parseInt(heartDom[i].style.left)) {
heartDom[i].style.left = parseInt(heartDom[i].style.left) - 1 + "px";
if (stops[i][0] > parseInt(heartDom[i].style.left)) {
stops[i][0] = getEndX();
}
} else {
heartDom[i].style.left = parseInt(heartDom[i].style.left) + 1 + "px";
if (stops[i][0] < parseInt(heartDom[i].style.left)) {
stops[i][0] = getEndX();
}
}
if (stops[i][1] <= parseInt(heartDom[i].style.top)) {
heartDom[i].style.top = parseInt(heartDom[i].style.top) - 1 + "px";
if (stops[i][1] > parseInt(heartDom[i].style.top)) {
stops[i][1] = getEndY();
}
} else {
heartDom[i].style.top = parseInt(heartDom[i].style.top) + 1 + "px";
if (stops[i][1] < parseInt(heartDom[i].style.top)) {
stops[i][1] = getEndY();
}
}
//对小心心的旋转角度进行判断，当旋转360°以后重新将记录的角度归为0°
if (stops[i][3] == 360 || stops[i][3] == -360) {
stops[i][3] = 0;
//用于随机生成旋转的方向
if (Math.random() > 0.5) {
stops[i][2] = true;
} else {
stops[i][2] = false;
}
}
//根据旋转的方向对角度加减0.5个值
if (stops[i][2]) {
stops[i][3] += 0.5;
} else {
stops[i][3] -= 0.5;
}
heartDom[i].style.transform = "rotate(" + (stops[i][3]) + "deg)"
}
}, 20);
}
以上就是这个小心心demo的代码及解释啦。
