今天来讲一个JS的特效，主要用到的是定时器和选择器，也算是一个比较基础的但同时也是效果很炫的一个特效。老规矩，先来看看效果！
样式效果
1.这是一开始的时候
2.鼠标点击一个小球
3.随着时间慢慢变化
4.像波纹一样的传播
5.后续的小球会慢慢变小
视频还没过审核，过了我会发在评论区。
设计思路
1.首先是先用js生成一个15行15列的div矩阵，并添加到父级container中，然后设置小div的margin: 8px;和border-radius: 50%;，让这些小的div呈现为圆形，并且有一定的间距。
2.css样式也是通过js控制的，js代码里写的很详细。其中transition: transform 0.3s linear;和transform: scale(2);要说一下，第一个是让这些小球线性变化，第二个属性是让小球变大为之前小球的两倍。
3.将15行15列的小球存为一个二维数组，然后遍历添加点击事件。
4.最后设置点击小秋后，当前小球先变大，然后延时0.1秒周围小球开始变大（变大的过程为0.3秒），然后延时0.3秒还原周围的小球的大小。
最后附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>波纹小球</title>
</head>
<body>
<h3>点击下方小球</h3>
<div id="container" class="container"></div>
<script src="main.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: #333;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 100vh就是全部的view的高度，也就是网页的全部高度 */
height: 100vh;
margin: 0;
}
h3 {
color: #fff;
letter-spacing: 1px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
/* 设置子级div不换行 */
flex-wrap: wrap;
width: 450px;
}
.circle {
background-color: #fff;
/* 设置圆角，就是成了一个圆形 */
border-radius: 50%;
cursor: pointer;
margin: 8px;
height: 14px;
width: 14px;
transition: transform 0.3s linear;
}
/* 变大两倍 */
.circle.grow {
transform: scale(2);
}
// 获取节点
const container = document.getElementById("container");
const circlesArr = [];
// 行和列
let rows = 15;
let cols = 15;
// for循环创建所有的小球,并push到circlesArr保存
for (let i = 0; i < cols; i++) {
circlesArr[i] = [];
for (let j = 0; j < rows; j++) {
// 生成子元素div
const circle = document.createElement("div");
// 添加class属性circle
circle.classList.add("circle");
// 将div添加到container中
container.appendChild(circle);
// 将div添加到数组中
circlesArr[i].push(circle);
}
}
// 遍历并为每个div小球添加点击事件
circlesArr.forEach((cols, i) => {
cols.forEach((circle, j) => {
circle.addEventListener("click", () => {
growCircles(i, j);
});
});
});
function growCircles(i, j) {
// 确认位置
if (circlesArr[i] && circlesArr[i][j]) {
// 保证身上没有grow的类名（grow是一个css样式）
if (!circlesArr[i][j].classList.contains("grow")) {
circlesArr[i][j].classList.add("grow");
// 周围小球依次变大
setTimeout(() => {
growCircles(i - 1, j);
growCircles(i + 1, j);
growCircles(i, j - 1);
growCircles(i, j + 1);
}, 100);
// 周围小球再依次还原
setTimeout(() => {
circlesArr[i][j].classList.remove("grow");
}, 300);
}
}
}