css+js实现马达拉圈旋转动画效果代码-html代码-BFW代码库

css+js实现马达拉圈旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：css+js实现马达拉圈旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<style>
html, body, svg {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

button {
	width: 80px;
	position: fixed;
	top: 10px;
	right: calc((100% - 80px) / 2);
	z-index: 10;
}

svg {
	animation: spin 15s linear infinite;
}
body {
	animation: pulse 30s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0% {
    background: hsla(0, 0%, 99%, 1);
  }
	70% {
    background: hsla(60, 90%, 90%, .7);
  }
  100% {
    background: hsla(0, 0%, 99%, 1);
  }
}
</style>



</head>

<body >
  <svg></svg>
<button onclick="generateRandomMandala()">New</button>

  
      <script  >
const screen2svg = (eleSvg, x, y) => {
	const point = eleSvg.createSVGPoint();
	point.x = x;
	point.y = y;
	return point.matrixTransform(eleSvg.getScreenCTM().inverse());
};
Math.radians = function (degrees) {
	return (degrees * Math.PI) / 180;
};
Math.degrees = function (radians) {
	return (radians * 180) / Math.PI;
};

const eleSvg = document.querySelector("svg");
let drawTimer;
let circles = [];

let patterns = [
	{ radius: 0.4, steps: 12, start: 0, circleSize: 30, hue: 67, lightness: 40 },
	{ radius: 0.4, steps: 12, start: 15, circleSize: 30, hue: 6, lightness: 40 },
	{
		radius: 0.34,
		steps: 24,
		start: -8,
		circleSize: 10,
		hue: 178,
		lightness: 40
	},
	{ radius: 0.3, steps: 12, start: 0, circleSize: 20, hue: 267, lightness: 40 },
	{
		radius: 0.25,
		steps: 24,
		start: -8,
		circleSize: 14,
		hue: 168,
		lightness: 40
	},
	{ radius: 0.2, steps: 48, start: 0, circleSize: 7, hue: 268, lightness: 30 },
	{ radius: 0.13, steps: 7, start: 0, circleSize: 31, hue: 68, lightness: 50 },
	{
		radius: 0.065,
		steps: 11,
		start: 0,
		circleSize: 10,
		hue: 188,
		lightness: 50
	},
	{ radius: 0.03, steps: 4, start: 0, circleSize: 10, hue: 0, lightness: 40 }
];

function rnd(mi, ma) {
	return Math.floor(Math.random() * (ma - mi) + mi);
}

function generateRandomMandala() {
	pat.........完整代码请登录后点击上方下载按钮下载查看