js实现canvas旋转旋涡动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现canvas旋转旋涡动画效果代码,滚动条往下拖动会更精彩。

代码标签: canvas 旋涡 动画

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

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

<head>
    <meta charset="UTF-8">
    <style>
        * {
      margin: 0;
      padding: 0;
      color: #FFF;
    }
    
    canvas#canvas {
      display: block;
      background: #000;
    }
    
    ul#navigation {
      position: absolute;
      height: 100%;
      top: 0;
      right: 0;
      text-align: center;
      margin-right: 1.6rem;
      font-size: 0.8rem;
      -webkit-writing-mode: vertical-rl;
          -ms-writing-mode: tb-rl;
              writing-mode: vertical-rl;
    }
    
    ul#navigation > li {
      display: inline-block;
    }
    </style>

</head>

<body>

    <canvas id="canvas">Canvas not supported.</canvas>
    <ul id="navigation">
        <li>Scroll up and down.</li>
    </ul>

    <script>
        (function () {
  'use strict';
  window.addEventListener(&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0