html--旋转眩晕特效

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  * {
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: 100%;
}

.c {
  background: black;
}

  style>
 HEAD>

 <BODY>
  <canvas class='c'>psychedelic rainbow spiralcanvas>
  <script>
  var c = document.querySelector('.c') /* the canvas element */, 
    
    ctx = c.getContext('2d') /* canvas context */, 
    w /* canvas height */, h /* canvas height */, 
    
    t = 0, 
        
    max = Math.max, 
    pow = Math.pow, sqrt = Math.sqrt, 
    PI = Math.PI, 
    sin = Math.sin, cos = Math.cos /* just me being lazy */,

    /* spiral vars */
    /* https://twitter.com/jackrugile/status/420459385505079296 */
    n = 8 /* shades */, 
    m = 4 /* shade repetitions */, 
    p = 32 /* dots on each branch */, 
    r,
    beta /* branch specific */, gamma /* dot specific */, 
    x0, y0, x1, y1, 
    hue,  
    t_step = 1/60, 
    requestID;

/* FUNCTIONS */
var trimUnit = function(input_str, unit) {
  return parseInt(input_str.split(unit)[0], 10);
};

var spiral = function() {  
  ctx.clearRect(0, 0, w, h);
    
  for(var i = 0; i < n*m; i++) {
    beta = i*2*PI/(n*m);
    x0 = 0;
    
    /* Begin the path up here */
    ctx.beginPath();
    hue = i*360/n;
    ctx.translate(w/2, h/2);
    ctx.rotate(t/3);
    /* only need to set the fillstyle once up here now */
    ctx.fillStyle = 'hsl(' + hue + ', 100%, 65%)';
        
    for(var j = 0; j < p; j++) {      
      gamma = j*2*PI/p;
      r = max(1, pow(2*(j*(p - j)), .43) - 10);
      
      x0 += 3.4*r;
      y0 = x0*sin(gamma + 2*t + x0/99)/5;
      
      /* change of coordinates */
      x1 = x0*cos(beta) - y0*sin(beta);
      y1 = x0*sin(beta) + y0*cos(beta);
      
      /* move it to the position of the arc */ 
      /* (remove this for a cool effect) */
      ctx.moveTo(x1,y1);
      /* setup the arc path here */
      ctx.arc(x1, y1, r, 0, 2*PI);
    }
    
    /* close the 1 path that now is a combination of all the arcs */
    ctx.closePath();
    /* fill the whole path only once now */
    ctx.fill();
    /* 
     * reason for moving the fill out of the inner loop:
     * see https://twitter.com/loktar00/status/420369245378076672
     * (thanks!)
     */
    ctx.rotate(-t/3);
    ctx.translate(-w/2, -h/2);
  }
  
  t += t_step;
  
  requestID = requestAnimationFrame(spiral)
};

var initCanvas = function() {
  var s /* canvas style set via CSS */ ;
  
  setTimeout(function() {
    s = getComputedStyle(c);
    w = c.width = trimUnit(s.width, 'px');
    h = c.height = trimUnit(s.height, 'px');
    
    /* if resizing, make sure to stop the previous animation 
     * before starting a new one */
    /* cancelAnimationFrame(requestID) should be 
     * the requestID returned by requestAnimationFrame 
     * thanks @FWeinb! */
    if(requestID) {
      cancelAnimationFrame(requestID);
    }
    spiral();
  }, 0);
};

/* STEPS */
initCanvas();

/* fix looks on resize */
addEventListener('resize', initCanvas, false);
  script>
 BODY>
HTML>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

在这里插入图片描述

相关阅读:
SPARK数据分析
Spring 事务
人大金仓分析型数据库常见性能原因
ES语法以及ajax相关操作
CANoe/CAPL ,钉钉群助手消息通知
leetcode 90双周赛
Linux搭建文件服务器
[Python] Basic Functions
【若依】多级联动下拉的实现（附HTML及JavaScript参考代码）
MDM主数据平台使用总结

原文地址：https://blog.csdn.net/stqer/article/details/138073909