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, lightn.........完整代码请登录后点击上方下载按钮下载查看