主要使用 CSS 实现的动画效果，其中 CSS 需要使用 Less 编译完成。效果如下图：
Html 代码：
<!DOCTYPE html>
<html>
<head>
<title>Hypnotic Ring</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./Hyp.css">
</head>
<body>
<div class="frame"></div>
<script src="./Hyp.js"></script>
</body>
</html>
Less 代码：
.frame{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
overflow: hidden;
/*background-color: #27ae60;*/
background-color: skyblue;
color: #fff;
}
.circle{
position: absolute;
width: 200px;
height: 200px;
top: 100px;
left: 100px;
border-radius: 50%;
border: 2px dotted #fff;
transform-origin: 50% 50%;
/*transform: scale(2) translate(0, 0);*/
}
/* less 用递归实现循环 */
.circleFunction(@index) when (@index <= 50) {
.circle-@{index}{
animation: circle 10s ease-in-out @index/5s infinite backwards;
// z-index: @index;
}
// 递归调用
.circleFunction(@index+1);
}
// 从参数 1 开始调用
.circleFunction(1);
/* 动画 */
@keyframes circle{
0%{
transform: scale(0) translate(-100px, -200px);
opacity: 0.4;
}
100%{
transform: scale(3.5) translate(0, 0);
opacity: 1;
}
}
在使用 less 前需要完成两个步骤：
1、全局安装 less：npm install -g less（注：没有 npm 工具包的需要先去官网下载自带 npm 的 node 。网址：https://nodejs.org/en/）
2、编译 less： lessc 要编译的文件名.less 编译后的文件名.css
如：lessc Hyp.less Hyp.css，编译成 css 文件后，导入就行了。
Js 代码：
var frame = document.querySelector('.frame');
for(var i = 0; i < 50; i++){
var div = document.createElement('div');
div.className = 'circle';
div.classList.add('circle-' + (i + 1));
frame.appendChild(div);
}
该动画效果来自一个专门练习 CSS 的网址：https://100dayscss.com/?dayIndex=62
关于 Less的介绍，和更多 css 动画可以去博主的 github ：https://github.com/cao-lianhui/CSS100day