js实现canvas电光魔球旋转动画效果代码-html代码-BFW代码库

js实现canvas电光魔球旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas电光魔球旋转动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
<style>
html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: black;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}
</style>


</head>

<body >

  <script>
      
      function createElem(Obj) {
  const g = document.createElement(Obj.tagName);
  if (Obj.attributes) {
    for (const [attr, attrValue] of Object.entries(Obj.attributes)) {
      g.setAttribute(attr, attrValue);
    }
  }
  if (Obj.classes) { g.className = Obj.classes; }
  if (Obj.id) { g.id = Obj.id; }
  if (Obj.innerText) { g.innerHTML = Obj.innerText; }
  if (Obj.styles) { g.style.cssText = Obj.styles; }
  Obj.parent ? Obj.parent.appendChild(g) : document.body.appendChild(g);
  return g;
};

const housamzSignature = function(light='dark', side='right') {
  logoBack = 'ced0ce';
  logoFront = '39a9d8';
  bg = '1a1b1c';
  color = 'efefef';
  
  if (light === 'light'){
    bg = 'efefef';
    color = '1a1b1c';
    logoFront = '39a9d8';
    logoBack = '1a1b1c';
  }
  
  // add styles
  createElem({
    tagName: 'style',
    innerText: `#credits{font-size:14px;padding:7px;display:flex;justify-content:space-evenly;align-items:center;width:80px;position:fixed;z-index:10000;bottom:20px;${side}:20px;background:#${bg};border-radius:5px;font-family:Helvetica,sans-serif;text-decoration:none;line-height:1;color:#${color}}#credits strong{color:#${bg};position:absolute;${side}:50%;width:200px;text-align:${side};padding-${side}:8px;opacity:0;-webkit-transition:${side} 200ms,opacity 200ms;transition:${side} 200ms,opacity 200ms;z-index:-1;pointer-events:none}#credits .logo-front{fill:#${logoFront}}#credits .logo-back{fill:#${logoBack}}#credits span{color:#e74c3c}#credits:hover strong{opacity:1;${.........完整代码请登录后点击上方下载按钮下载查看