├── 表单登录注册特效
    ├── img
    │   ├── bg.jpg
    │   └── icon_light.f13cff3.png
    ├── 表单登录注册特效.zip
    ├── css
    │   ├── jigsaw.css
    │   └── styles.css
    ├── index.html
    └── js
    │   └── jigsaw.js
├── jQuery简易的图片无缝滚动代码
    └── jQuery简易的图片无缝滚动代码.zip
├── jQuery选项卡图片滚动切换代码
    └── jQuery选项卡图片滚动切换代码.zip
├── jquery课程项目TAB选项卡切换布局代码
    └── jquery课程项目TAB选项卡切换布局代码.zip
├── jQuery商城系统开发网站下拉导航和图片布局代码
    └── jQuery商城系统开发网站下拉导航和图片布局代码.zip
├── jQuery carousel图片叠加旋转木马轮播切换效果
    └── jQuery carousel图片叠加旋转木马轮播切换效果.zip
├── 按钮悬停动画
    └── 按钮悬停动画.html
├── 搜索栏特效
    └── 搜索栏特效.html
├── 鼠标跟随
    └── 鼠标跟随.html
├── 烟花帆布
    └── 烟花帆布.html
├── 粒子文字
    └── 粒子文字.html
├── 卡片翻转
    └── 卡片翻转.html
├── 汉堡菜单
    └── 汉堡菜单.html
├── 轮播图
    └── 轮播图.html
├── 发火光文字
    └── 1.html
├── 五彩纸屑射击
    └── 五彩纸屑射击.html
└── 图片滑动预览
    └── 图片滑动预览.html


/表单登录注册特效/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TencentIT/jQuery-/HEAD/表单登录注册特效/img/bg.jpg


--------------------------------------------------------------------------------
/表单登录注册特效/表单登录注册特效.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TencentIT/jQuery-/HEAD/表单登录注册特效/表单登录注册特效.zip


--------------------------------------------------------------------------------
/表单登录注册特效/img/icon_light.f13cff3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TencentIT/jQuery-/HEAD/表单登录注册特效/img/icon_light.f13cff3.png


--------------------------------------------------------------------------------
/jQuery简易的图片无缝滚动代码/jQuery简易的图片无缝滚动代码.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TencentIT/jQuery-/HEAD/jQuery简易的图片无缝滚动代码/jQuery简易的图片无缝滚动代码.zip


--------------------------------------------------------------------------------
/jQuery选项卡图片滚动切换代码/jQuery选项卡图片滚动切换代码.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TencentIT/jQuery-/HEAD/jQuery选项卡图片滚动切换代码/jQuery选项卡图片滚动切换代码.zip


--------------------------------------------------------------------------------
/jquery课程项目TAB选项卡切换布局代码/jquery课程项目TAB选项卡切换布局代码.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TencentIT/jQuery-/HEAD/jquery课程项目TAB选项卡切换布局代码/jquery课程项目TAB选项卡切换布局代码.zip


--------------------------------------------------------------------------------
/jQuery商城系统开发网站下拉导航和图片布局代码/jQuery商城系统开发网站下拉导航和图片布局代码.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TencentIT/jQuery-/HEAD/jQuery商城系统开发网站下拉导航和图片布局代码/jQuery商城系统开发网站下拉导航和图片布局代码.zip


--------------------------------------------------------------------------------
/jQuery carousel图片叠加旋转木马轮播切换效果/jQuery carousel图片叠加旋转木马轮播切换效果.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TencentIT/jQuery-/HEAD/jQuery carousel图片叠加旋转木马轮播切换效果/jQuery carousel图片叠加旋转木马轮播切换效果.zip


--------------------------------------------------------------------------------
/按钮悬停动画/按钮悬停动画.html:
--------------------------------------------------------------------------------
 1 | <style type="text/css">
 2 | 	body {
 3 |   background: #fff;
 4 | }
 5 | 
 6 | .container {
 7 |   -webkit-transform: translate(-50%, -50%);
 8 |   -ms-transform: translate(-50%, -50%);
 9 |   transform: translate(-50%, -50%);
10 |   position: absolute;
11 |   top: 50%;
12 |   left: 50%;
13 |   width: 100%;
14 |   text-align: center;
15 | }
16 | 
17 | button {
18 |   background-color: #2A2D34;
19 |   box-shadow: inset 0 0 6px 0 #585e6c;
20 |   border: 3px solid #131518;
21 |   border-radius: 5px;
22 |   outline: none;
23 |   color: black;
24 |   text-shadow: 0 0 2px #585e6c;
25 |   padding: 20px;
26 |   margin: 0 10px;
27 |   font-size: 20px;
28 |   font-weight: bold;
29 |   font-family: 'Roboto Slab', serif;
30 |   cursor: pointer;
31 |   position: relative;
32 |   overflow: hidden;
33 |   transition: 0.5s ease;
34 | }
35 | button::after {
36 |   -webkit-transform: rotate(10deg);
37 |   -ms-transform: rotate(10deg);
38 |   transform: rotate(10deg);
39 |   content: "";
40 |   background-color: #a6abb7;
41 |   opacity: 0.2;
42 |   height: 300px;
43 |   width: 60px;
44 |   position: absolute;
45 |   left: -120px;
46 |   top: -120px;
47 |   transition: 0.5s ease;
48 | }
49 | button:hover {
50 |   background-color: #414550;
51 |   text-shadow: 0 0 2px #414550;
52 | }
53 | button:hover:after {
54 |   left: 100%;
55 |   top: 0;
56 | }
57 | 
58 | </style>
59 | 
60 | <div class="container">
61 |   <button>Dark button</button>
62 |   <button>Is very nice</button>
63 |   <button>Amirite?</button>
64 |   <button>My dud</button>
65 | </div>


--------------------------------------------------------------------------------
/表单登录注册特效/css/jigsaw.css:
--------------------------------------------------------------------------------
  1 | .block {
  2 |   position: absolute;
  3 |   left: 0;
  4 |   top: 0;
  5 | }
  6 | 
  7 | .sliderContainer {
  8 |   position: relative;
  9 |   text-align: center;
 10 |   width: 310px;
 11 |   height: 40px;
 12 |   line-height: 40px;
 13 |   margin-top: 15px;
 14 |   background: #f7f9fa;
 15 |   color: #45494c;
 16 |   border: 1px solid #e4e7eb;
 17 | }
 18 | 
 19 | .sliderContainer_active .slider {
 20 |   height: 38px;
 21 |   top: -1px;
 22 |   border: 1px solid #1991FA;
 23 | }
 24 | 
 25 | .sliderContainer_active .sliderMask {
 26 |   height: 38px;
 27 |   border-width: 1px;
 28 | }
 29 | 
 30 | .sliderContainer_success .slider {
 31 |   height: 38px;
 32 |   top: -1px;
 33 |   border: 1px solid #52CCBA;
 34 |   background-color: #52CCBA !important;
 35 | }
 36 | 
 37 | .sliderContainer_success .sliderMask {
 38 |   height: 38px;
 39 |   border: 1px solid #52CCBA;
 40 |   background-color: #D2F4EF;
 41 | }
 42 | 
 43 | .sliderContainer_success .sliderIcon {
 44 |   background-position: 0 0 !important;
 45 | }
 46 | 
 47 | .sliderContainer_fail .slider {
 48 |   height: 38px;
 49 |   top: -1px;
 50 |   border: 1px solid #f57a7a;
 51 |   background-color: #f57a7a !important;
 52 | }
 53 | 
 54 | .sliderContainer_fail .sliderMask {
 55 |   height: 38px;
 56 |   border: 1px solid #f57a7a;
 57 |   background-color: #fce1e1;
 58 | }
 59 | 
 60 | .sliderContainer_fail .sliderIcon {
 61 |   background-position: 0 -83px !important;
 62 | }
 63 | .sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {
 64 |   display: none;
 65 | }
 66 | 
 67 | .sliderMask {
 68 |   position: absolute;
 69 |   left: 0;
 70 |   top: 0;
 71 |   height: 40px;
 72 |   border: 0 solid #1991FA;
 73 |   background: #D1E9FE;
 74 | }
 75 | 
 76 | .slider {
 77 |   position: absolute;
 78 |   top: 0;
 79 |   left: 0;
 80 |   width: 40px;
 81 |   height: 40px;
 82 |   background: #fff;
 83 |   box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 84 |   cursor: pointer;
 85 |   transition: background .2s linear;
 86 | }
 87 | 
 88 | .slider:hover {
 89 |   background: #1991FA;
 90 | }
 91 | 
 92 | .slider:hover .sliderIcon {
 93 |   background-position: 0 -13px;
 94 | }
 95 | 
 96 | .sliderIcon {
 97 |   position: absolute;
 98 |   top: 15px;
 99 |   left: 13px;
100 |   width: 14px;
101 |   height: 10px;
102 |   background: url(../img/icon_light.f13cff3.png) 0 -26px;
103 |   background-size: 34px 471px;
104 | }
105 | 
106 | .refreshIcon {
107 |   position: absolute;
108 |   right: 0;
109 |   top: 0;
110 |   width: 34px;
111 |   height: 34px;
112 |   cursor: pointer;
113 |   background: url(../img/icon_light.f13cff3.png) 0 -437px;
114 |   background-size: 34px 471px;
115 | }
116 | 


--------------------------------------------------------------------------------
/搜索栏特效/搜索栏特效.html:
--------------------------------------------------------------------------------
  1 | <div class="container">
  2 |   <input type="text" placeholder="Search...">
  3 |   <div class="search"></div>
  4 | </div>
  5 | 
  6 | <style type="text/css">
  7 | 	@import url("https://fonts.googleapis.com/css?family=Inconsolata:700");
  8 | * {
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | html, body {
 15 |   width: 100%;
 16 |   height: 100%;
 17 | }
 18 | 
 19 | body {
 20 |   background: #252525;
 21 | }
 22 | 
 23 | .container {
 24 |   position: absolute;
 25 |   margin: auto;
 26 |   top: 0;
 27 |   left: 0;
 28 |   right: 0;
 29 |   bottom: 0;
 30 |   width: 300px;
 31 |   height: 100px;
 32 | }
 33 | .container .search {
 34 |   position: absolute;
 35 |   margin: auto;
 36 |   top: 0;
 37 |   right: 0;
 38 |   bottom: 0;
 39 |   left: 0;
 40 |   width: 80px;
 41 |   height: 80px;
 42 |   background: crimson;
 43 |   border-radius: 50%;
 44 |   transition: all 1s;
 45 |   z-index: 4;
 46 |   box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
 47 | }
 48 | .container .search:hover {
 49 |   cursor: pointer;
 50 | }
 51 | .container .search::before {
 52 |   content: "";
 53 |   position: absolute;
 54 |   margin: auto;
 55 |   top: 22px;
 56 |   right: 0;
 57 |   bottom: 0;
 58 |   left: 22px;
 59 |   width: 12px;
 60 |   height: 2px;
 61 |   background: white;
 62 |   transform: rotate(45deg);
 63 |   transition: all .5s;
 64 | }
 65 | .container .search::after {
 66 |   content: "";
 67 |   position: absolute;
 68 |   margin: auto;
 69 |   top: -5px;
 70 |   right: 0;
 71 |   bottom: 0;
 72 |   left: -5px;
 73 |   width: 25px;
 74 |   height: 25px;
 75 |   border-radius: 50%;
 76 |   border: 2px solid white;
 77 |   transition: all .5s;
 78 | }
 79 | .container input {
 80 |   font-family: 'Inconsolata', monospace;
 81 |   position: absolute;
 82 |   margin: auto;
 83 |   top: 0;
 84 |   right: 0;
 85 |   bottom: 0;
 86 |   left: 0;
 87 |   width: 50px;
 88 |   height: 50px;
 89 |   outline: none;
 90 |   border: none;
 91 |   background: crimson;
 92 |   color: white;
 93 |   text-shadow: 0 0 10px crimson;
 94 |   padding: 0 80px 0 20px;
 95 |   border-radius: 30px;
 96 |   box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
 97 |   transition: all 1s;
 98 |   opacity: 0;
 99 |   z-index: 5;
100 |   font-weight: bolder;
101 |   letter-spacing: 0.1em;
102 | }
103 | .container input:hover {
104 |   cursor: pointer;
105 | }
106 | .container input:focus {
107 |   width: 300px;
108 |   opacity: 1;
109 |   cursor: text;
110 | }
111 | .container input:focus ~ .search {
112 |   right: -250px;
113 |   background: #151515;
114 |   z-index: 6;
115 | }
116 | .container input:focus ~ .search::before {
117 |   top: 0;
118 |   left: 0;
119 |   width: 25px;
120 | }
121 | .container input:focus ~ .search::after {
122 |   top: 0;
123 |   left: 0;
124 |   width: 25px;
125 |   height: 2px;
126 |   border: none;
127 |   background: white;
128 |   border-radius: 0%;
129 |   transform: rotate(-45deg);
130 | }
131 | .container input::placeholder {
132 |   color: white;
133 |   opacity: 0.5;
134 |   font-weight: bolder;
135 | }
136 | 
137 | </style>


--------------------------------------------------------------------------------
/鼠标跟随/鼠标跟随.html:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 | 	body{
  3 |   margin: 0;
  4 | }
  5 | canvas{
  6 |   position: absolute;
  7 |   width: 100%;
  8 |   height: 100%;
  9 |   background: #111a22;
 10 | }
 11 | </style>
 12 | 
 13 | <canvas></canvas>
 14 | 
 15 | <script type="text/javascript">
 16 | 	window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
 17 | 
 18 | onload = function (){
 19 |   setTimeout(init,0)
 20 | }
 21 | 
 22 | init = function(){
 23 |   canvas = document.querySelector('canvas')
 24 |   ctx = canvas.getContext('2d')
 25 | 
 26 |   onresize = function(){
 27 |     canvas.width = canvas.clientWidth
 28 |     canvas.height = canvas.clientHeight
 29 |   }
 30 |   onresize()
 31 | 
 32 |   mouse = {x:canvas.width/2,y:canvas.height/2,out:false}
 33 | 
 34 |   canvas.onmouseout = function(){
 35 |     mouse.out = true
 36 |   }
 37 | 
 38 |   canvas.onmousemove = function(e){
 39 |     var rect = canvas.getBoundingClientRect()
 40 |     mouse = {
 41 |       x: e.clientX - rect.left,
 42 |       y: e.clientY - rect.top,
 43 |       out: false
 44 |     }
 45 |   }
 46 | 
 47 |   gravityStrength = 10
 48 |   particles = []
 49 |   spawnTimer = 0
 50 |   spawnInterval = 10
 51 |   type = 0
 52 |   requestAnimationFrame(startLoop)
 53 | }
 54 | 
 55 | newParticle = function(){
 56 |   type = type?0:1
 57 |   particles.push({
 58 |     x:mouse.x,
 59 |     y:mouse.y,
 60 |     xv:type?18*Math.random()-9:24*Math.random()-12,
 61 |     yv:type?18*Math.random()-9:24*Math.random()-12,
 62 |     c:type?'rgb(255,'+((200*Math.random())|0)+','+((80*Math.random())|0)+')':'rgb(255,255,255)',
 63 |     s:type?5+10*Math.random():1,
 64 |     a:1
 65 |   })
 66 | }
 67 | 
 68 | startLoop = function(newTime){
 69 |   time = newTime
 70 |   requestAnimationFrame(loop)
 71 | }
 72 | 
 73 | loop = function(newTime){
 74 |   draw()
 75 |   calculate(newTime)
 76 |   requestAnimationFrame(loop)
 77 | }
 78 | 
 79 | draw = function(){
 80 |   ctx.clearRect(0,0,canvas.width,canvas.height)
 81 |   for(var i=0;i<particles.length;i++){
 82 |     var p = particles[i]
 83 |     ctx.globalAlpha = p.a
 84 |     ctx.fillStyle = p.c
 85 |     ctx.beginPath()
 86 |     ctx.arc(p.x,p.y,p.s,0,2*Math.PI)
 87 |     ctx.fill()
 88 |   }
 89 | }
 90 | 
 91 | calculate = function(newTime){
 92 |   var dt = newTime-time
 93 |   time = newTime
 94 | 
 95 |   if(!mouse.out){
 96 |     spawnTimer += (dt<100)?dt:100
 97 |     for(;spawnTimer>0;spawnTimer-=spawnInterval){
 98 |       newParticle()
 99 |     }
100 |   }
101 | 
102 |   particleOverflow = particles.length-700
103 |   if(particleOverflow>0){
104 |     particles.splice(0,particleOverflow)
105 |   }
106 | 
107 |   for(var i=0;i<particles.length;i++){
108 |     var p = particles[i]
109 |     if(!mouse.out){
110 |       x = mouse.x-p.x
111 |       y = mouse.y-p.y
112 |       a = x*x+y*y
113 |       a = a>100?gravityStrength/a:gravityStrength/100
114 |       p.xv = (p.xv+a*x)*0.99
115 |       p.yv = (p.yv+a*y)*0.99
116 |     }
117 |     p.x += p.xv
118 |     p.y += p.yv
119 |     p.a *= 0.99
120 |   }
121 | }
122 | </script>


--------------------------------------------------------------------------------
/表单登录注册特效/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="zh">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 	<title>用户登录注册界面</title>
  8 | 	<link rel="stylesheet" type="text/css" href="css/styles.css">
  9 | 	  <link rel="stylesheet" href="css/jigsaw.css">
 10 | 	  <style>
 11 | 	  	
 12 | 	  	  #msg {
 13 |       width: 100%;
 14 |       line-height: 40px;
 15 |       font-size: 14px;
 16 |       text-align: center;
 17 |     }
 18 | 	  </style>
 19 | </head>
 20 | <body>
 21 | 	<div class="jq22-container" style="padding-top:100px">
 22 | 		<div class="login-wrap">
 23 | 			<div class="login-html">
 24 | 				<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
 25 | 				<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
 26 | 				<div class="login-form">
 27 | 					<form>
 28 | 					<div class="sign-in-htm">
 29 | 						<div class="group">
 30 | 							<label for="user" class="label">用户名</label>
 31 | 							<input id="username" name="username" value="admin" type="text" class="input">
 32 | 						</div>
 33 | 						<div class="group">
 34 | 							<label for="pass" class="label">密码</label>
 35 | 							<input id="password" type="password" class="input" data-type="password">
 36 | 						</div>
 37 | 						<div class="group">
 38 | 							<div class="container">
 39 | 							    <div id="captcha" style="position: relative" data-type="password"></div>
 40 | 								<div id="msg"></div>
 41 | 							</div>
 42 | 						</div>
 43 | 						<div class="group">
 44 | 							<input id="check" type="checkbox" class="check" checked>
 45 | 							<label for="check"><span class="icon"></span> 保持登录</label>
 46 | 						</div>						
 47 | 						<div class="group">
 48 | 							<input type="button" class="button" value="登录" onClick="sub()">
 49 | 						</div>
 50 | 						<div class="hr"></div>
 51 | 						<div class="foot-lnk">
 52 | 							<a href="#forgot">忘记密码?</a>
 53 | 						</div>
 54 | 					</div>
 55 | 					</form>
 56 | 					<form>
 57 | 					<div class="sign-up-htm">
 58 | 						<div class="group">
 59 | 							<label for="user" class="label">用户名</label>
 60 | 							<input id="users" type="text" class="input">
 61 | 						</div>
 62 | 						<div class="group">
 63 | 							<label for="pass" class="label">密码</label>
 64 | 							<input id="passs" type="password" class="input" data-type="password">
 65 | 						</div>
 66 | 						<div class="group">
 67 | 							<label for="pass" class="label">重复密码</label>
 68 | 							<input id="passs" type="password" class="input" data-type="password">
 69 | 						</div>
 70 | 						<div class="group">
 71 | 							<label for="pass" class="label">邮箱地址</label>
 72 | 							<input id="pass" type="text" class="input">
 73 | 						</div>
 74 | 						<div class="group">
 75 | 							<a href="register.html"><input type="submit" class="button" value="注册"></a>
 76 | 						</div>
 77 | 						<div class="hr"></div>
 78 | 						<div class="foot-lnk">
 79 | 							<label for="tab-1">已经成员?</a>
 80 | 						</div>
 81 | 					</div>
 82 | 					</form>
 83 | 				</div>
 84 | 			</div>
 85 | 		</div>
 86 | 	</div>	
 87 | 	<script src="js/jigsaw.js"></script>
 88 | <script>
 89 | 	var flag=false;	
 90 | 	function sub(){
 91 | 		var name=document.getElementById('username').value;
 92 | 		var pass=document.getElementById('password').value;
 93 | 		var cname="admin";
 94 | 		var cpass="123";
 95 | 		if(name==cname && pass==cpass && flag==true){
 96 | 		alert("登录成功!")
 97 | 			//window.location.href="#";
 98 | 		}else{
 99 | 			if(flag==false){
100 | 				alert("验证失败!")
101 | 				return;
102 | 			}
103 | 			alert("用户名或密码错误!")
104 | 		}
105 | 			}
106 |  	 jigsaw.init(document.getElementById('captcha'), function () {
107 |   	 flag=true;
108 |     document.getElementById('msg').innerHTML = '登录成功！'  
109 |   })
110 | </script>
111 | </body>
112 | </html>


--------------------------------------------------------------------------------
/表单登录注册特效/css/styles.css:
--------------------------------------------------------------------------------
  1 | body{
  2 | 	margin:0;
  3 | 	color:#6a6f8c;
  4 | 	background:#c8c8c8;
  5 | 	font:600 16px/18px 'Open Sans',sans-serif;
  6 | }
  7 | *,:after,:before{box-sizing:border-box}
  8 | .clearfix:after,.clearfix:before{content:'';display:table}
  9 | .clearfix:after{clear:both;display:block}
 10 | a{color:inherit;text-decoration:none;}
 11 | input, button {
 12 |   outline: none;
 13 |   border: none;
 14 | }
 15 | .login-wrap{
 16 | 	width:100%;
 17 | 	margin:auto;
 18 | 	max-width:525px;
 19 | 	min-height:670px;
 20 | 	position:relative;
 21 | 	background:url(../img/bg.jpg) no-repeat center;
 22 | 	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
 23 | }
 24 | .login-html{
 25 | 	width:100%;
 26 | 	height:100%;
 27 | 	position:absolute;
 28 | 	padding:90px 70px 50px 70px;
 29 | 	background:rgba(40,57,101,.9);
 30 | }
 31 | .login-html .sign-in-htm,
 32 | .login-html .sign-up-htm{
 33 | 	top:0;
 34 | 	left:0;
 35 | 	right:0;
 36 | 	bottom:0;
 37 | 	position:absolute;
 38 | 	-webkit-transform:rotateY(180deg);
 39 | 	        transform:rotateY(180deg);
 40 | 	-webkit-backface-visibility:hidden;
 41 | 	        backface-visibility:hidden;
 42 | 	-webkit-transition:all .4s linear;
 43 | 	        transition:all .4s linear;
 44 | }
 45 | .login-html .sign-in,
 46 | .login-html .sign-up,
 47 | .login-form .group .check{
 48 | 	display:none;
 49 | }
 50 | .login-html .tab,
 51 | .login-form .group .label,
 52 | .login-form .group .button{
 53 | 	text-transform:uppercase;
 54 | }
 55 | .login-html .tab{
 56 | 	font-size:22px;
 57 | 	margin-right:15px;
 58 | 	padding-bottom:5px;
 59 | 	margin:0 15px 10px 0;
 60 | 	display:inline-block;
 61 | 	border-bottom:2px solid transparent;
 62 | }
 63 | .login-html .sign-in:checked + .tab,
 64 | .login-html .sign-up:checked + .tab{
 65 | 	color:#fff;
 66 | 	border-color:#1161ee;
 67 | }
 68 | .login-form{
 69 | 	min-height:345px;
 70 | 	position:relative;
 71 | 	-webkit-perspective:1000px;
 72 | 	        perspective:1000px;
 73 | 	-webkit-transform-style:preserve-3d;
 74 | 	        transform-style:preserve-3d;
 75 | }
 76 | .login-form .group{
 77 | 	margin-bottom:15px;
 78 | }
 79 | .login-form .group .label,
 80 | .login-form .group .input,
 81 | .login-form .group .button{
 82 | 	width:100%;
 83 | 	color:#fff;
 84 | 	display:block;
 85 | }
 86 | .login-form .group .input,
 87 | .login-form .group .button{
 88 | 	border:none;
 89 | 	padding:15px 20px;
 90 | 	border-radius:25px;
 91 | 	background:rgba(255,255,255,.1);
 92 | }
 93 | .login-form .group input[data-type="password"]{
 94 | 	text-security:circle;
 95 | 	-webkit-text-security:circle;
 96 | }
 97 | .login-form .group .label{
 98 | 	color:#aaa;
 99 | 	font-size:12px;
100 | }
101 | .login-form .group .button{
102 | 	background:#1161ee;
103 | }
104 | .login-form .group label .icon{
105 | 	width:15px;
106 | 	height:15px;
107 | 	border-radius:2px;
108 | 	position:relative;
109 | 	display:inline-block;
110 | 	background:rgba(255,255,255,.1);
111 | }
112 | .login-form .group label .icon:before,
113 | .login-form .group label .icon:after{
114 | 	content:'';
115 | 	width:10px;
116 | 	height:2px;
117 | 	background:#fff;
118 | 	position:absolute;
119 | 	-webkit-transition:all .2s ease-in-out 0s;
120 | 	        transition:all .2s ease-in-out 0s;
121 | }
122 | .login-form .group label .icon:before{
123 | 	left:3px;
124 | 	width:5px;
125 | 	bottom:6px;
126 | 	-webkit-transform:scale(0) rotate(0);
127 | 	    -ms-transform:scale(0) rotate(0);
128 | 	        transform:scale(0) rotate(0);
129 | }
130 | .login-form .group label .icon:after{
131 | 	top:6px;
132 | 	right:0;
133 | 	-webkit-transform:scale(0) rotate(0);
134 | 	    -ms-transform:scale(0) rotate(0);
135 | 	        transform:scale(0) rotate(0);
136 | }
137 | .login-form .group .check:checked + label{
138 | 	color:#fff;
139 | }
140 | .login-form .group .check:checked + label .icon{
141 | 	background:#1161ee;
142 | }
143 | .login-form .group .check:checked + label .icon:before{
144 | 	-webkit-transform:scale(1) rotate(45deg);
145 | 	    -ms-transform:scale(1) rotate(45deg);
146 | 	        transform:scale(1) rotate(45deg);
147 | }
148 | .login-form .group .check:checked + label .icon:after{
149 | 	-webkit-transform:scale(1) rotate(-45deg);
150 | 	    -ms-transform:scale(1) rotate(-45deg);
151 | 	        transform:scale(1) rotate(-45deg);
152 | }
153 | .login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
154 | 	-webkit-transform:rotate(0);
155 | 	    -ms-transform:rotate(0);
156 | 	        transform:rotate(0);
157 | }
158 | .login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
159 | 	-webkit-transform:rotate(0);
160 | 	    -ms-transform:rotate(0);
161 | 	        transform:rotate(0);
162 | }
163 | 
164 | .hr{
165 | 	height:2px;
166 | 	margin:60px 0 50px 0;
167 | 	background:rgba(255,255,255,.2);
168 | }
169 | .foot-lnk{
170 | 	text-align:center;
171 | }


--------------------------------------------------------------------------------
/烟花帆布/烟花帆布.html:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 | 	body {
  3 |   margin: 0;
  4 |   overflow: hidden;
  5 |   height: 100vh;
  6 |   cursor: pointer;
  7 | }
  8 | 
  9 | canvas {
 10 |   width: 100%;
 11 |   height: 100%;
 12 | }
 13 | 
 14 | .pointer {
 15 |   --size: 30px;
 16 |   pointer-events: none;
 17 |   width: var(--size);
 18 |   height: var(--size);
 19 |   background: rgba(247, 56, 89, 0.2);
 20 |   position: fixed;
 21 |   border-radius: 50%;
 22 |   transform: translate3d(-50%, -50%, 0) scale(0);
 23 |   transition: transform 0.3s;
 24 |   border: 2px solid rgba(247, 56, 89, 0.2);
 25 |   display: flex;
 26 |   align-items: center;
 27 |   justify-content: center;
 28 |   z-index: 2;
 29 | }
 30 | .pointer:before {
 31 |   content: "";
 32 |   width: 80%;
 33 |   height: 80%;
 34 |   position: absolute;
 35 |   display: block;
 36 |   background: #141829;
 37 |   border-radius: 50%;
 38 |   transition: background 0.5s, box-shadow 0.5s;
 39 | }
 40 | .is-pressed .pointer {
 41 |   transform: translate3d(-50%, -50%, 0) scale(1);
 42 | }
 43 | .is-longpress .pointer {
 44 |   animation: wobble 0.2s infinite alternate;
 45 | }
 46 | .is-longpress .pointer:before {
 47 |   background: #faf15d;
 48 |   box-shadow: 0 0 5px rgba(250, 241, 93, 0.5);
 49 |   animation: wobble2 0.2s infinite alternate;
 50 | }
 51 | 
 52 | @keyframes wobble {
 53 |   to {
 54 |     transform: translate3d(-50%, -50%, 0) scale(0.5);
 55 |   }
 56 | }
 57 | @keyframes wobble2 {
 58 |   to {
 59 |     transform: scale(0.5);
 60 |   }
 61 | }
 62 | 
 63 | </style>
 64 | 
 65 | <canvas id="canvas">
 66 | 
 67 | <script type="text/javascript">
 68 | 	const canvas = document.getElementById("canvas");
 69 | const ctx = canvas.getContext("2d");
 70 | const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
 71 | 
 72 | let balls = [];
 73 | let pressed = false;
 74 | let longPressed = false;
 75 | let longPress;
 76 | let multiplier = 0;
 77 | let width, height;
 78 | let origin;
 79 | let normal;
 80 | 
 81 | // Make the canvas high res
 82 | function updateSize() {
 83 |   canvas.width = window.innerWidth * 2;
 84 |   canvas.height = window.innerHeight * 2;
 85 |   canvas.style.width = window.innerWidth + 'px';
 86 |   canvas.style.height = window.innerHeight + 'px';
 87 |   ctx.scale(2, 2);
 88 |   
 89 |   width = (canvas.width = window.innerWidth);
 90 |   height = (canvas.height = window.innerHeight);
 91 |   origin = {
 92 |     x: width / 2,
 93 |     y: height / 2
 94 |   };
 95 |   normal = {
 96 |     x: width / 2,
 97 |     y: height / 2
 98 |   };
 99 | }
100 | 
101 | updateSize();
102 | window.addEventListener('resize', updateSize, false);
103 | 
104 | class Ball {
105 |   constructor(x = origin.x, y = origin.y) {
106 |     this.x = x;
107 |     this.y = y;
108 |     this.angle = Math.PI * 2 * Math.random();
109 |     
110 |     if( longPressed == true ) {
111 |       this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
112 |     } else {
113 |       this.multiplier = randBetween(6, 12);
114 |     }
115 |     
116 |     this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
117 |     this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
118 |     this.r = randBetween(8, 12) + 3 * Math.random();
119 |     this.color = colours[Math.floor(Math.random() * colours.length)];
120 |     this.direction = randBetween(-1, 1);
121 |   }
122 | 
123 |   update() {
124 |     this.x += this.vx - normal.x;
125 |     this.y += this.vy - normal.y;
126 | 
127 |     normal.x = -2 / window.innerWidth * Math.sin(this.angle);
128 |     normal.y = -2 / window.innerHeight * Math.cos(this.angle);
129 |     // normal.y = ((-2 / window.innerHeight) * Math.cos(this.angle)) + this.direction;
130 | 
131 |     this.r -= 0.3;
132 |     this.vx *= 0.9;
133 |     this.vy *= 0.9;
134 |   }
135 | }
136 | 
137 | function pushBalls(count = 1, x = origin.x, y = origin.y) {
138 |   for (let i = 0; i < count; i++) {
139 |     balls.push(new Ball(x, y));
140 |   }
141 | }
142 | 
143 | function randBetween(min, max) {
144 |   return Math.floor(Math.random() * max) + min;
145 | }
146 | 
147 | loop();
148 | 
149 | function loop() {
150 |   // Alpha means "motion blur", yay!
151 |   ctx.fillStyle = "rgba(20, 24, 41, 0.7)";
152 |   ctx.fillRect(0, 0, canvas.width, canvas.height);
153 | 
154 |   for (let i = 0; i < balls.length; i++) {
155 |     let b = balls[i];
156 | 
157 |     if (b.r < 0) continue;
158 | 
159 |     ctx.fillStyle = b.color;
160 |     ctx.beginPath();
161 |     ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
162 |     ctx.fill();
163 | 
164 |     b.update();
165 |   }
166 |   
167 |   if( longPressed == true ) {
168 |     multiplier += 0.2;
169 |   } else if ( !longPressed && multiplier >= 0 ) {
170 |      multiplier -= 0.4;        
171 |   }
172 | 
173 |   removeBall();
174 |   requestAnimationFrame(loop);
175 | }
176 | 
177 | function removeBall() {
178 |   for (let i = 0; i < balls.length; i++) {
179 |     let b = balls[i];
180 |     if (
181 |       b.x + b.r < 0 ||
182 |       b.x - b.r > width ||
183 |       b.y + b.r < 0 ||
184 |       b.y - b.r > height ||
185 |       b.r < 0
186 |     ) {
187 |       balls.splice(i, 1);
188 |     }
189 |   }
190 | }
191 | 
192 | window.addEventListener("mousedown", function(e) {
193 |     if (pressed == false) clearInterval(timeOut);
194 | 
195 |     pressed = true;
196 |     pushBalls(randBetween(10, 20), e.clientX, e.clientY);
197 | 
198 |     document.body.classList.add("is-pressed");
199 |     longPress = setTimeout(function() { 
200 |       document.body.classList.add("is-longpress");
201 |       longPressed = true;
202 |     }, 500);  
203 |   
204 | }, false);
205 | 
206 | window.addEventListener("mouseup", function(e) {
207 |     clearInterval(longPress);
208 |     //multiplier = 0;
209 | 
210 |     // Superblast
211 |     if( longPressed == true ) {
212 |       document.body.classList.remove("is-longpress");
213 |       pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
214 |       longPressed = false;
215 |     } 
216 |     
217 |     document.body.classList.remove("is-pressed");
218 | }, false);
219 | 
220 | // Keep it going
221 | let timeOut = setInterval(function() {
222 |   pushBalls(randBetween(10, 20), origin.x + randBetween(-50,50), origin.y + randBetween(-50,50));
223 | }, 200);
224 | 
225 | // Pointer stuff
226 | const pointer = document.createElement("span");
227 | pointer.classList.add("pointer");
228 | document.body.appendChild(pointer);
229 | 
230 | window.addEventListener("mousemove", function(e){
231 |     let x = e.clientX;
232 |     let y = e.clientY;
233 |   
234 |     pointer.style.top = y + "px";
235 |     pointer.style.left = x + "px";
236 | 
237 | }, false);
238 | </script>


--------------------------------------------------------------------------------
/粒子文字/粒子文字.html:
--------------------------------------------------------------------------------
  1 | <!-- 尝试移动鼠标并单击文本区域 -->
  2 | <div id="title-desktop" class="hidden">橘色商城</div>
  3 | <div id="title-mobile" class="hidden">www.jq22.com</div>
  4 | <canvas id="spring-text"></canvas>
  5 | 
  6 | <style type="text/css">
  7 | 	body {
  8 |   padding: 0px;
  9 |   margin: 0px;
 10 |   background-color: #252525;
 11 | }
 12 | 
 13 | .hidden {
 14 |   display: none;
 15 | }
 16 | 
 17 | #spring-text {
 18 |   position: absolute;
 19 | }
 20 | </style>
 21 | 
 22 | <script type="text/javascript">
 23 | 	// WRITTEN BY TRUMAN HEBERLE
 24 | var COLOR = "#52E6FF" 
 25 | var MESSAGE = document.getElementById("title-desktop").textContent;
 26 | 
 27 | var FONT_SIZE = 100;
 28 | var AMOUNT = 2000;
 29 | var SIZE = 2;
 30 | var INITIAL_DISPLACEMENT = 500;
 31 | var INITIAL_VELOCITY = 5;
 32 | var VELOCITY_RETENTION = 0.95;
 33 | var SETTLE_SPEED = 1;
 34 | var FLEE_SPEED = 1;
 35 | var FLEE_DISTANCE = 50;
 36 | var FLEE = true;
 37 | var SCATTER_VELOCITY = 3;
 38 | var SCATTER = true;
 39 | 
 40 | if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 41 |   // Mobile
 42 |   MESSAGE = document.getElementById("title-mobile").textContent;
 43 |   
 44 |   FONT_SIZE = 50;
 45 |   AMOUNT = 300;
 46 |   SIZE = 2;
 47 |   INITIAL_DISPLACEMENT = 100;
 48 |   SETTLE_SPEED = 1;
 49 |   FLEE = false;
 50 |   SCATTER_VELOCITY = 2;
 51 | }
 52 | 
 53 | const canvas = document.getElementById("spring-text");
 54 | const ctx = canvas.getContext("2d");
 55 | 
 56 | var POINTS = [];
 57 | var MOUSE = {
 58 |   x: 0,
 59 |   y: 0
 60 | }
 61 | 
 62 | function Point(x,y,r,g,b,a) {
 63 |   var angle = Math.random() * 6.28;
 64 |   this.dest_x = x;
 65 |   this.dest_y = y;
 66 |   this.original_r = r;
 67 |   this.original_g = g;
 68 |   this.original_a = a;
 69 |   this.x = canvas.width/2 - x + (Math.random() - 0.5) * INITIAL_DISPLACEMENT;
 70 |   this.y = canvas.height/2 - y + (Math.random() - 0.5) * INITIAL_DISPLACEMENT;
 71 |   this.velx = INITIAL_VELOCITY * Math.cos(angle);
 72 |   this.vely = INITIAL_VELOCITY * Math.sin(angle);
 73 |   this.target_x = canvas.width/2 - x;
 74 |   this.target_y = canvas.height/2 - y;
 75 |   this.r = r;
 76 |   this.g = g;
 77 |   this.b = b;
 78 |   this.a = a;
 79 |   
 80 |   this.getX = function() {
 81 |     return this.x;
 82 |   }
 83 |   
 84 |   this.getY = function() {
 85 |     return this.y;
 86 |   }
 87 |   
 88 |   this.resetTarget = function () {
 89 |     this.target_x = canvas.width/2 - this.dest_x;
 90 |     this.target_y = canvas.height/2 - this.dest_y;
 91 |   }
 92 |   
 93 |   this.fleeFrom = function(x, y) {
 94 |     this.velx -= ((MOUSE.x - this.x) * FLEE_SPEED / 10);
 95 |     this.vely -= ((MOUSE.y - this.y) * FLEE_SPEED / 10);
 96 |   }
 97 |   
 98 |   this.settleTo = function(x, y) {
 99 |     this.velx += ((this.target_x - this.x) * SETTLE_SPEED / 100);
100 |     this.vely += ((this.target_y - this.y) * SETTLE_SPEED / 100);
101 |     this.velx -= this.velx * (1-VELOCITY_RETENTION);
102 |     this.vely -= this.vely * (1-VELOCITY_RETENTION);
103 |   }
104 |   
105 |   this.scatter = function() {
106 |     var unit = this.unitVecToMouse();
107 |     var vel = SCATTER_VELOCITY * 10 * (0.5 + Math.random() / 2);
108 |     this.velx = -unit.x * vel;
109 |     this.vely = -unit.y * vel;
110 |   }
111 |   
112 |   this.move = function() {
113 |     if (this.distanceToMouse() <= FLEE_DISTANCE) {
114 |       this.fleeFrom(MOUSE.x, MOUSE.y);
115 |     }
116 |     else {
117 |       this.settleTo(this.target_x, this.target_y);
118 |     }
119 |     
120 |     if (this.x + this.velx < 0 || this.x + this.velx >= canvas.width) {
121 |       this.velx *= -1;
122 |     }
123 |     if (this.y + this.vely < 0 || this.y + this.vely >= canvas.height) {
124 |       this.vely *= -1;
125 |     }
126 |     
127 |     this.x += this.velx;
128 |     this.y += this.vely;
129 |   }
130 |   
131 |   this.distanceToTarget = function() {
132 |     return this.distanceTo(this.target_x, this.target_y);
133 |   }
134 |   
135 |   this.distanceToMouse = function() {
136 |     return this.distanceTo(MOUSE.x, MOUSE.y);
137 |   }
138 |   
139 |   this.distanceTo = function(x, y) {
140 |     return Math.sqrt((x - this.x)*(x - this.x) + (y - this.y)*(y - this.y));
141 |   }
142 |   
143 |   this.unitVecToTarget = function() {
144 |     return this.unitVecTo(this.target_x, this.target_y);
145 |   }
146 |   
147 |   this.unitVecToMouse = function() {
148 |     return this.unitVecTo(MOUSE.x, MOUSE.y);
149 |   }
150 |   
151 |   this.unitVecTo = function(x, y) {
152 |     var dx = x - this.x;
153 |     var dy = y - this.y;
154 |     return {
155 |       x: dx / Math.sqrt(dx*dx + dy*dy),
156 |       y: dy / Math.sqrt(dx*dx + dy*dy)
157 |     };
158 |   }
159 | }
160 | 
161 | window.addEventListener("resize", function() {
162 |   resizeCanvas()
163 |   adjustText()
164 | });
165 | 
166 | if (FLEE) {
167 |   window.addEventListener("mousemove", function(event) {
168 |     MOUSE.x = event.clientX;
169 |     MOUSE.y = event.clientY;
170 |   });
171 | }
172 | 
173 | if (SCATTER) {
174 |   window.addEventListener("click", function(event) {
175 |     MOUSE.x = event.clientX;
176 |     MOUSE.y = event.clientY;
177 |     for (var i=0; i<POINTS.length; i++) {
178 |       POINTS[i].scatter();
179 |     }
180 |   });
181 | }
182 | 
183 | function resizeCanvas() {
184 |   canvas.width  = window.innerWidth;
185 |   canvas.height = window.innerHeight;
186 | }
187 | 
188 | function adjustText() {
189 |   ctx.fillStyle = COLOR;
190 |   ctx.textBaseline = "middle";
191 |   ctx.textAlign = "center";
192 |   ctx.font = FONT_SIZE + "px Arial";
193 |   ctx.fillText(MESSAGE, canvas.width/2, canvas.height/2);
194 |   var textWidth = ctx.measureText(MESSAGE).width;
195 |   if (textWidth == 0) {
196 |     return;
197 |   }
198 |   var minX = canvas.width/2 - textWidth/2;
199 |   var minY = canvas.height/2 - FONT_SIZE/2;
200 |   var data = ctx.getImageData(minX, minY, textWidth, FONT_SIZE).data;
201 |   var isBlank = true;
202 |   for (var i=0; i<data.length; i++) {
203 |     if (data[i] != 0) {
204 |       isBlank = false;
205 |       break;
206 |     }
207 |   }
208 |   
209 |   if (!isBlank) {
210 |     var count = 0;
211 |     var curr = 0;
212 |     var num = 0;
213 |     var x = 0;
214 |     var y = 0;
215 |     var w = Math.floor(textWidth);
216 |     POINTS = [];
217 |     while (count < AMOUNT) {
218 |       while (curr == 0) {
219 |         num = Math.floor(Math.random() * data.length);
220 |         curr = data[num];
221 |       }
222 |       num = Math.floor(num / 4);
223 |       x = w/2 - num%w;
224 |       y = FONT_SIZE/2 - Math.floor(num/w);
225 |       POINTS.push(new Point(x,y,data[num*4],data[num*4 + 1],data[num*4 + 2],data[num*4 + 3]));
226 |       curr = 0;
227 |       count++;
228 |     }
229 |   }
230 | }
231 | 
232 | function init() {
233 |   resizeCanvas()
234 |   adjustText()
235 |   window.requestAnimationFrame(animate);
236 | }
237 | 
238 | function animate() {
239 |   update();
240 |   draw();
241 | }
242 | 
243 | function update() {
244 |   var point;
245 |   for (var i=0; i<POINTS.length; i++) {
246 |     point = POINTS[i];
247 |     point.move();
248 |   }
249 | }
250 | 
251 | function draw() {
252 |   ctx.clearRect(0, 0, canvas.width, canvas.height);
253 |   
254 |   var point;
255 |   for (var i=0; i<POINTS.length; i++) {
256 |     point = POINTS[i];
257 |     ctx.fillStyle = "rgba("+point.r+","+point.g+","+point.b+","+point.a+")";
258 |     ctx.beginPath();
259 |     ctx.arc(point.getX(),point.getY(),SIZE,0,2*Math.PI);
260 |     ctx.fill();
261 |   }
262 |   
263 |   window.requestAnimationFrame(animate);
264 | }
265 | 
266 | init();
267 | </script>


--------------------------------------------------------------------------------
/卡片翻转/卡片翻转.html:
--------------------------------------------------------------------------------
  1 | <div class="content">
  2 |   <h1 class="heading">Card Flip</h1>
  3 |   <p class="description">Hover over a card to flip it.</p><a class="card" href="#!">
  4 |     <div class="front" style="background-image: url(https://picsum.photos/300/401/?image=559);">
  5 |       <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
  6 |     </div>
  7 |     <div class="back">
  8 |       <div>
  9 |         <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 10 |         <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 11 |         <button class="button">Click Here</button>
 12 |       </div>
 13 |     </div></a><a class="card" href="#!">
 14 |     <div class="front" style="background-image: url(https://picsum.photos/300/401/?image=560);">
 15 |       <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
 16 |     </div>
 17 |     <div class="back">
 18 |       <div>
 19 |         <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 20 |         <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 21 |         <button class="button">Click Here</button>
 22 |       </div>
 23 |     </div></a><a class="card" href="#!">
 24 |     <div class="front" style="background-image: url(https://picsum.photos/300/401/?image=567);">
 25 |       <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
 26 |     </div>
 27 |     <div class="back">
 28 |       <div>
 29 |         <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 30 |         <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 31 |         <button class="button">Click Here</button>
 32 |       </div>
 33 |     </div></a><a class="card" href="#!">
 34 |     <div class="front" style="background-image: url(https://picsum.photos/300/401/?image=562);">
 35 |       <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
 36 |     </div>
 37 |     <div class="back">
 38 |       <div>
 39 |         <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 40 |         <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 41 |         <button class="button">Click Here</button>
 42 |       </div>
 43 |     </div></a><a class="card" href="#!">
 44 |     <div class="front" style="background-image: url(https://picsum.photos/300/401/?image=563);">
 45 |       <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
 46 |     </div>
 47 |     <div class="back">
 48 |       <div>
 49 |         <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 50 |         <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 51 |         <button class="button">Click Here</button>
 52 |       </div>
 53 |     </div></a><a class="card" href="#!">
 54 |     <div class="front" style="background-image: url(https://picsum.photos/300/401/?image=564);">
 55 |       <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
 56 |     </div>
 57 |     <div class="back">
 58 |       <div>
 59 |         <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 60 |         <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 61 |         <button class="button">Click Here</button>
 62 |       </div>
 63 |     </div></a>
 64 | </div>
 65 | 
 66 | <style type="text/css">
 67 |   *, *:before, *:after {
 68 |   box-sizing: border-box;
 69 | }
 70 | 
 71 | html {
 72 |   font-size: 18px;
 73 |   line-height: 1.5;
 74 |   font-weight: 300;
 75 |   color: #333;
 76 |   font-family: "Nunito Sans", sans-serif;
 77 | }
 78 | 
 79 | body {
 80 |   margin: 0;
 81 |   padding: 0;
 82 |   height: 100vh;
 83 |   background-color: #ecf0f9;
 84 |   background-attachment: fixed;
 85 | }
 86 | 
 87 | .content {
 88 |   display: flex;
 89 |   margin: 0 auto;
 90 |   justify-content: center;
 91 |   align-items: center;
 92 |   flex-wrap: wrap;
 93 |   max-width: 1000px;
 94 | }
 95 | 
 96 | .heading {
 97 |   width: 100%;
 98 |   margin-left: 1rem;
 99 |   font-weight: 900;
100 |   font-size: 1.618rem;
101 |   text-transform: uppercase;
102 |   letter-spacing: .1ch;
103 |   line-height: 1;
104 |   padding-bottom: .5em;
105 |   margin-bottom: 1rem;
106 |   position: relative;
107 | }
108 | .heading:after {
109 |   display: block;
110 |   content: '';
111 |   position: absolute;
112 |   width: 60px;
113 |   height: 4px;
114 |   background: linear-gradient(135deg, #1a9be6, #1a57e6);
115 |   bottom: 0;
116 | }
117 | 
118 | .description {
119 |   width: 100%;
120 |   margin-top: 0;
121 |   margin-left: 1rem;
122 |   margin-bottom: 3rem;
123 | }
124 | 
125 | .card {
126 |   color: inherit;
127 |   cursor: pointer;
128 |   width: calc(33% - 2rem);
129 |   min-width: calc(33% - 2rem);
130 |   height: 400px;
131 |   min-height: 400px;
132 |   perspective: 1000px;
133 |   margin: 1rem;
134 |   position: relative;
135 | }
136 | @media screen and (max-width: 800px) {
137 |   .card {
138 |     width: calc(50% - 2rem);
139 |   }
140 | }
141 | @media screen and (max-width: 500px) {
142 |   .card {
143 |     width: 100%;
144 |   }
145 | }
146 | 
147 | .front,
148 | .back {
149 |   display: flex;
150 |   border-radius: 6px;
151 |   background-position: center;
152 |   background-size: cover;
153 |   text-align: center;
154 |   justify-content: center;
155 |   align-items: center;
156 |   position: absolute;
157 |   height: 100%;
158 |   width: 100%;
159 |   -webkit-backface-visibility: hidden;
160 |   backface-visibility: hidden;
161 |   transform-style: preserve-3d;
162 |   transition: ease-in-out 600ms;
163 | }
164 | 
165 | .front {
166 |   background-size: cover;
167 |   padding: 2rem;
168 |   font-size: 1.618rem;
169 |   font-weight: 600;
170 |   color: #fff;
171 |   overflow: hidden;
172 |   font-family: Poppins, sans-serif;
173 | }
174 | .front:before {
175 |   position: absolute;
176 |   display: block;
177 |   content: '';
178 |   top: 0;
179 |   left: 0;
180 |   right: 0;
181 |   bottom: 0;
182 |   background: linear-gradient(135deg, #1a9be6, #1a57e6);
183 |   opacity: .25;
184 |   z-index: -1;
185 | }
186 | .card:hover .front {
187 |   transform: rotateY(180deg);
188 | }
189 | .card:nth-child(even):hover .front {
190 |   transform: rotateY(-180deg);
191 | }
192 | 
193 | .back {
194 |   background: #fff;
195 |   transform: rotateY(-180deg);
196 |   padding: 0 2em;
197 | }
198 | .card:hover .back {
199 |   transform: rotateY(0deg);
200 | }
201 | .card:nth-child(even) .back {
202 |   transform: rotateY(180deg);
203 | }
204 | .card:nth-child(even):hover .back {
205 |   transform: rotateY(0deg);
206 | }
207 | 
208 | .button {
209 |   transform: translateZ(40px);
210 |   cursor: pointer;
211 |   -webkit-backface-visibility: hidden;
212 |   backface-visibility: hidden;
213 |   font-weight: bold;
214 |   color: #fff;
215 |   padding: .5em 1em;
216 |   border-radius: 100px;
217 |   font: inherit;
218 |   background: linear-gradient(135deg, #1a9be6, #1a57e6);
219 |   border: none;
220 |   position: relative;
221 |   transform-style: preserve-3d;
222 |   transition: 300ms ease;
223 | }
224 | .button:before {
225 |   transition: 300ms ease;
226 |   position: absolute;
227 |   display: block;
228 |   content: '';
229 |   transform: translateZ(-40px);
230 |   -webkit-backface-visibility: hidden;
231 |   backface-visibility: hidden;
232 |   height: calc(100% - 20px);
233 |   width: calc(100% - 20px);
234 |   border-radius: 100px;
235 |   left: 10px;
236 |   top: 16px;
237 |   box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
238 |   background-color: rgba(26, 87, 230, 0.25);
239 | }
240 | .button:hover {
241 |   transform: translateZ(55px);
242 | }
243 | .button:hover:before {
244 |   transform: translateZ(-55px);
245 | }
246 | .button:active {
247 |   transform: translateZ(20px);
248 | }
249 | .button:active:before {
250 |   transform: translateZ(-20px);
251 |   top: 12px;
252 | }
253 | 
254 | </style>


--------------------------------------------------------------------------------
/表单登录注册特效/js/jigsaw.js:
--------------------------------------------------------------------------------
  1 | (function (window) {
  2 |   const l = 42, // 滑块边长
  3 |     r = 10, // 滑块半径
  4 |     w = 350, // canvas宽度
  5 |     h = 50, // canvas高度
  6 |     PI = Math.PI
  7 |   const L = l + r * 2 // 滑块实际边长
  8 | 
  9 |   function getRandomNumberByRange(start, end) {
 10 |     return Math.round(Math.random() * (end - start) + start)
 11 |   }
 12 | 
 13 |   function createCanvas(width, height) {
 14 |     const canvas = createElement('canvas')
 15 |     canvas.width = width
 16 |     canvas.height = height
 17 |     return canvas
 18 |   }
 19 | 
 20 |   function createImg(onload) {
 21 |     const img = createElement('img')
 22 |     img.crossOrigin = "Anonymous"
 23 |     img.onload = onload
 24 |     img.onerror = () => {
 25 |       img.src = getRandomImg()
 26 |     }
 27 |     img.src = getRandomImg()
 28 |     return img
 29 |   }
 30 |   
 31 |   function createElement(tagName) {
 32 |     return document.createElement(tagName)
 33 |   }
 34 | 
 35 |   function addClass(tag, className) {
 36 |     tag.classList.add(className)
 37 |   }
 38 | 
 39 |   function removeClass(tag, className) {
 40 |     tag.classList.remove(className)
 41 |   }
 42 |   
 43 |   function getRandomImg() {
 44 |     return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
 45 |   }
 46 | 
 47 |   function draw(ctx, operation, x, y) {
 48 |     ctx.beginPath()
 49 |     ctx.moveTo(x, y)
 50 |     ctx.lineTo(x + l / 2, y)
 51 |     ctx.arc(x + l / 2, y - r + 2, r, 0, 2 * PI)
 52 |     ctx.lineTo(x + l / 2, y)
 53 |     ctx.lineTo(x + l, y)
 54 |     ctx.lineTo(x + l, y + l / 2)
 55 |     ctx.arc(x + l + r - 2, y + l / 2, r, 0, 2 * PI)
 56 |     ctx.lineTo(x + l, y + l / 2)
 57 |     ctx.lineTo(x + l, y + l)
 58 |     ctx.lineTo(x, y + l)
 59 |     ctx.lineTo(x, y)
 60 |     ctx.fillStyle = '#fff'
 61 |     ctx[operation]()
 62 |     ctx.beginPath()
 63 |     ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)
 64 |     ctx.globalCompositeOperation = "xor"
 65 |     ctx.fill()
 66 |   }
 67 | 
 68 |   function sum(x, y) {
 69 |     return x + y
 70 |   }
 71 | 
 72 |   function square(x) {
 73 |     return x * x
 74 |   }
 75 | 
 76 |   class jigsaw {
 77 |     constructor(el, success, fail) {
 78 |       this.el = el
 79 |       this.success = success
 80 |       this.fail = fail
 81 |     }
 82 | 
 83 |     init() {
 84 |       this.initDOM()
 85 |       this.initImg()
 86 |       this.draw()
 87 |       this.bindEvents()
 88 |     }
 89 | 
 90 |     initDOM() {
 91 |       const canvas = createCanvas(w, h) // 画布
 92 |       const block = canvas.cloneNode(true) // 滑块
 93 |       const sliderContainer = createElement('div')
 94 |       const refreshIcon = createElement('div')
 95 |       const sliderMask = createElement('div')
 96 |       const slider = createElement('div')
 97 |       const sliderIcon = createElement('span')
 98 |       const text = createElement('span')
 99 | 
100 |       block.className = 'block'
101 |       sliderContainer.className = 'sliderContainer'
102 |       refreshIcon.className = 'refreshIcon'
103 |       sliderMask.className = 'sliderMask'
104 |       slider.className = 'slider'
105 |       sliderIcon.className = 'sliderIcon'
106 |       text.innerHTML = '向右滑动滑块填充拼图'
107 |       text.className = 'sliderText'
108 | 
109 |       const el = this.el
110 |       el.appendChild(canvas)
111 |       el.appendChild(refreshIcon)
112 |       el.appendChild(block)
113 |       slider.appendChild(sliderIcon)
114 |       sliderMask.appendChild(slider)
115 |       sliderContainer.appendChild(sliderMask)
116 |       sliderContainer.appendChild(text)
117 |       el.appendChild(sliderContainer)
118 | 
119 |       Object.assign(this, {
120 |         canvas,
121 |         block,
122 |         sliderContainer,
123 |         refreshIcon,
124 |         slider,
125 |         sliderMask,
126 |         sliderIcon,
127 |         text,
128 |         canvasCtx: canvas.getContext('2d'),
129 |         blockCtx: block.getContext('2d')
130 |       })
131 |     }
132 | 
133 |     initImg() {
134 |       const img = createImg(() => {
135 |         this.canvasCtx.drawImage(img, 0, 0, w, h)
136 |         this.blockCtx.drawImage(img, 0, 0, w, h)
137 |         const y = this.y - r * 2 + 2
138 |         const ImageData = this.blockCtx.getImageData(this.x, y, L, L)
139 |         this.block.width = L
140 |         this.blockCtx.putImageData(ImageData, 0, y)
141 |       })
142 |       this.img = img
143 |     }
144 | 
145 |     draw() {
146 |       // 随机创建滑块的位置
147 |       this.x = getRandomNumberByRange(L + 10, w - (L + 10))
148 |       this.y = getRandomNumberByRange(10 + r * 2, h - (L + 10))
149 |       draw(this.canvasCtx, 'fill', this.x, this.y)
150 |       draw(this.blockCtx, 'clip', this.x, this.y)
151 |     }
152 | 
153 |     clean() {
154 |       this.canvasCtx.clearRect(0, 0, w, h)
155 |       this.blockCtx.clearRect(0, 0, w, h)
156 |       this.block.width = w
157 |     }
158 | 
159 |     bindEvents() {
160 |       this.el.onselectstart = () => false
161 |       this.refreshIcon.onclick = () => {
162 |         this.reset()
163 |       }
164 | 
165 |       let originX, originY, trail = [], isMouseDown = false
166 |       this.slider.addEventListener('mousedown', function (e) {
167 |         originX = e.x, originY = e.y
168 |         isMouseDown = true
169 |       })
170 |       document.addEventListener('mousemove', (e) => {
171 |         if (!isMouseDown) return false
172 |         const moveX = e.x - originX
173 |         const moveY = e.y - originY
174 |         if (moveX < 0 || moveX + 38 >= w) return false
175 |         this.slider.style.left = moveX + 'px'
176 |         var blockLeft = (w - 40 - 20) / (w - 40) * moveX
177 |         this.block.style.left = blockLeft + 'px'
178 | 
179 |         addClass(this.sliderContainer, 'sliderContainer_active')
180 |         this.sliderMask.style.width = moveX + 'px'
181 |         trail.push(moveY)
182 |       })
183 |       document.addEventListener('mouseup', (e) => {
184 |         if (!isMouseDown) return false
185 |         isMouseDown = false
186 |         if (e.x == originX) return false
187 |         removeClass(this.sliderContainer, 'sliderContainer_active')
188 |         this.trail = trail
189 |         const {spliced, TuringTest} = this.verify()
190 |         if (spliced) {
191 |           if (TuringTest) {
192 |             addClass(this.sliderContainer, 'sliderContainer_success')
193 |             this.success && this.success()
194 |           } else {
195 |             addClass(this.sliderContainer, 'sliderContainer_fail')
196 |             this.text.innerHTML = '再试一次'
197 |             this.reset()
198 |           }
199 |         } else {
200 |           addClass(this.sliderContainer, 'sliderContainer_fail')
201 |           this.fail && this.fail()
202 |           setTimeout(() => {
203 |             this.reset()
204 |           }, 1000)
205 |         }
206 |       })
207 |     }
208 | 
209 |     verify() {
210 |       const arr = this.trail // 拖动时y轴的移动距离
211 |       const average = arr.reduce(sum) / arr.length // 平均值
212 |       const deviations = arr.map(x => x - average) // 偏差数组
213 |       const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length) // 标准差
214 |       const left = parseInt(this.block.style.left)
215 |       return {
216 |         spliced: Math.abs(left - this.x) < 10,
217 |         TuringTest: average !== stddev, // 只是简单的验证拖动轨迹，相等时一般为0，表示可能非人为操作
218 |       }
219 |     }
220 | 
221 |     reset() {
222 |       this.sliderContainer.className = 'sliderContainer'
223 |       this.slider.style.left = 0
224 |       this.block.style.left = 0
225 |       this.sliderMask.style.width = 0
226 |       this.clean()
227 |       this.img.src = getRandomImg()
228 |       this.draw()
229 |     }
230 | 
231 |   }
232 | 
233 |   window.jigsaw = {
234 |     init: function (element, success, fail) {
235 |       new jigsaw(element, success, fail).init()
236 |     }
237 |   }
238 | }(window))


--------------------------------------------------------------------------------
/汉堡菜单/汉堡菜单.html:
--------------------------------------------------------------------------------
  1 | <svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
  2 |   <path
  3 |         class="line top"
  4 |         d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
  5 |   <path
  6 |         class="line middle"
  7 |         d="m 30,50 h 40" />
  8 |   <path
  9 |         class="line bottom"
 10 |         d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
 11 | </svg>
 12 | <svg class="ham ham2" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
 13 |   <path
 14 |         class="line top"
 15 |         d="m 70,33 h -40 c -6.5909,0 -7.763966,-4.501509 -7.763966,-7.511428 0,-4.721448 3.376452,-9.583771 13.876919,-9.583771 14.786182,0 11.409257,14.896182 9.596449,21.970818 -1.812808,7.074636 -15.709402,12.124381 -15.709402,12.124381" />
 16 |   <path
 17 |         class="line middle"
 18 |         d="m 30,50 h 40" />
 19 |   <path
 20 |         class="line bottom"
 21 |         d="m 70,67 h -40 c -6.5909,0 -7.763966,4.501509 -7.763966,7.511428 0,4.721448 3.376452,9.583771 13.876919,9.583771 14.786182,0 11.409257,-14.896182 9.596449,-21.970818 -1.812808,-7.074636 -15.709402,-12.124381 -15.709402,-12.124381" />
 22 | </svg>
 23 | <svg class="ham ham3" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
 24 |   <path
 25 |         class="line top"
 26 |         d="m 70,33 h -40 c -11.092231,0 11.883874,13.496726 -3.420361,12.956839 -0.962502,-2.089471 -2.222071,-3.282996 -4.545687,-3.282996 -2.323616,0 -5.113897,2.622752 -5.113897,7.071068 0,4.448316 2.080609,7.007933 5.555839,7.007933 2.401943,0 2.96769,-1.283974 4.166879,-3.282995 2.209342,0.273823 4.031294,1.642466 5.857227,-0.252538 v -13.005715 16.288404 h 7.653568" />
 27 |   <path
 28 |         class="line middle"
 29 |         d="m 70,50 h -40 c -5.6862,0 -8.534259,5.373483 -8.534259,11.551069 0,7.187738 3.499166,10.922274 13.131984,10.922274 11.021777,0 7.022787,-15.773343 15.531095,-15.773343 3.268142,0 5.177031,-2.159429 5.177031,-6.7 0,-4.540571 -1.766442,-7.33533 -5.087851,-7.326157 -3.321409,0.0092 -5.771288,2.789632 -5.771288,7.326157 0,4.536525 2.478983,6.805271 5.771288,6.7" />
 30 |   <path
 31 |         class="line bottom"
 32 |         d="m 70,67 h -40 c 0,0 -3.680675,0.737051 -3.660714,-3.517857 0.02541,-5.415597 3.391687,-10.357143 10.982142,-10.357143 4.048418,0 17.88928,0.178572 23.482143,0.178572 0,2.563604 2.451177,3.403635 4.642857,3.392857 2.19168,-0.01078 4.373905,-1.369814 4.375,-3.392857 0.0011,-2.023043 -1.924401,-2.589191 -4.553571,-4.107143 -2.62917,-1.517952 -4.196429,-1.799562 -4.196429,-3.660714 0,-1.861153 2.442181,-3.118811 4.196429,-3.035715 1.754248,0.0831 4.375,0.890841 4.375,3.125 2.628634,0 6.160714,0.267857 6.160714,0.267857 l -0.178571,-2.946428 10.178571,0 -10.178571,0 v 6.696428 l 8.928571,0 -8.928571,0 v 7.142858 l 10.178571,0 -10.178571,0" />
 33 | </svg>
 34 | <svg class="ham hamRotate ham4" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
 35 |   <path
 36 |         class="line top"
 37 |         d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" />
 38 |   <path
 39 |         class="line middle"
 40 |         d="m 70,50 h -40" />
 41 |   <path
 42 |         class="line bottom"
 43 |         d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" />
 44 | </svg>
 45 | <svg class="ham hamRotate180 ham5" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
 46 |   <path
 47 |         class="line top"
 48 |         d="m 30,33 h 40 c 0,0 8.5,-0.68551 8.5,10.375 0,8.292653 -6.122707,9.002293 -8.5,6.625 l -11.071429,-11.071429" />
 49 |   <path
 50 |         class="line middle"
 51 |         d="m 70,50 h -40" />
 52 |   <path
 53 |         class="line bottom"
 54 |         d="m 30,67 h 40 c 0,0 8.5,0.68551 8.5,-10.375 0,-8.292653 -6.122707,-9.002293 -8.5,-6.625 l -11.071429,11.071429" />
 55 | </svg>
 56 | <svg class="ham ham6" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
 57 |   <path
 58 |         class="line top"
 59 |         d="m 30,33 h 40 c 13.100415,0 14.380204,31.80258 6.899646,33.421777 -24.612039,5.327373 9.016154,-52.337577 -12.75751,-30.563913 l -28.284272,28.284272" />
 60 |   <path
 61 |         class="line middle"
 62 |         d="m 70,50 c 0,0 -32.213436,0 -40,0 -7.786564,0 -6.428571,-4.640244 -6.428571,-8.571429 0,-5.895471 6.073743,-11.783399 12.286435,-5.570707 6.212692,6.212692 28.284272,28.284272 28.284272,28.284272" />
 63 |   <path
 64 |         class="line bottom"
 65 |         d="m 69.575405,67.073826 h -40 c -13.100415,0 -14.380204,-31.80258 -6.899646,-33.421777 24.612039,-5.327373 -9.016154,52.337577 12.75751,30.563913 l 28.284272,-28.284272" />
 66 | </svg>
 67 | <svg class="ham hamRotate ham7" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
 68 |   <path
 69 |         class="line top"
 70 |         d="m 70,33 h -40 c 0,0 -6,1.368796 -6,8.5 0,7.131204 6,8.5013 6,8.5013 l 20,-0.0013" />
 71 |   <path
 72 |         class="line middle"
 73 |         d="m 70,50 h -40" />
 74 |   <path
 75 |         class="line bottom"
 76 |         d="m 69.575405,67.073826 h -40 c -5.592752,0 -6.873604,-9.348582 1.371031,-9.348582 8.244634,0 19.053564,21.797129 19.053564,12.274756 l 0,-40" />
 77 | </svg>
 78 | <svg class="ham hamRotate ham8" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
 79 |   <path
 80 |         class="line top"
 81 |         d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" />
 82 |   <path
 83 |         class="line middle"
 84 |         d="m 30,50 h 40" />
 85 |   <path
 86 |         class="line bottom"
 87 |         d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" />
 88 | </svg>
 89 | 
 90 | 
 91 | <style type="text/css">
 92 |   body {
 93 |   align-items: center;
 94 |   display: flex;
 95 |   height: 100%;
 96 |   justify-content: center;
 97 |   margin: 0;
 98 |   overflow: hidden;
 99 |   position: absolute;
100 |   width: 100%;
101 |  background-color: #D4D4D4
102 | }
103 | .ham {
104 |   cursor: pointer;
105 |   -webkit-tap-highlight-color: transparent;
106 |   transition: transform 400ms;
107 |   -moz-user-select: none;
108 |   -webkit-user-select: none;
109 |   -ms-user-select: none;
110 |   user-select: none;
111 | }
112 | .hamRotate.active {
113 |   transform: rotate(45deg);
114 | }
115 | .hamRotate180.active {
116 |   transform: rotate(180deg);
117 | }
118 | .line {
119 |   fill:none;
120 |   transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
121 |   stroke:#000;
122 |   stroke-width:5.5;
123 |   stroke-linecap:round;
124 | }
125 | .ham1 .top {
126 |   stroke-dasharray: 40 139;
127 | }
128 | .ham1 .bottom {
129 |   stroke-dasharray: 40 180;
130 | }
131 | .ham1.active .top {
132 |   stroke-dashoffset: -98px;
133 | }
134 | .ham1.active .bottom {
135 |   stroke-dashoffset: -138px;
136 | }
137 | .ham2 .top {
138 |   stroke-dasharray: 40 121;
139 | }
140 | .ham2 .bottom {
141 |   stroke-dasharray: 40 121;
142 | }
143 | .ham2.active .top {
144 |   stroke-dashoffset: -102px;
145 | }
146 | .ham2.active .bottom {
147 |   stroke-dashoffset: -102px;
148 | }
149 | .ham3 .top {
150 |   stroke-dasharray: 40 130;
151 | }
152 | .ham3 .middle {
153 |   stroke-dasharray: 40 140;
154 | }
155 | .ham3 .bottom {
156 |   stroke-dasharray: 40 205;
157 | }
158 | .ham3.active .top {
159 |   stroke-dasharray: 75 130;
160 |   stroke-dashoffset: -63px;
161 | }
162 | .ham3.active .middle {
163 |   stroke-dashoffset: -102px;
164 | }
165 | .ham3.active .bottom {
166 |   stroke-dasharray: 110 205;
167 |   stroke-dashoffset: -86px;
168 | }
169 | .ham4 .top {
170 |   stroke-dasharray: 40 121;
171 | }
172 | .ham4 .bottom {
173 |   stroke-dasharray: 40 121;
174 | }
175 | .ham4.active .top {
176 |   stroke-dashoffset: -68px;
177 | }
178 | .ham4.active .bottom {
179 |   stroke-dashoffset: -68px;
180 | }
181 | .ham5 .top {
182 |   stroke-dasharray: 40 82;
183 | }
184 | .ham5 .bottom {
185 |   stroke-dasharray: 40 82;
186 | }
187 | .ham5.active .top {
188 |   stroke-dasharray: 14 82;
189 |   stroke-dashoffset: -72px;
190 | }
191 | .ham5.active .bottom {
192 |   stroke-dasharray: 14 82;
193 |   stroke-dashoffset: -72px;
194 | }
195 | .ham6 .top {
196 |   stroke-dasharray: 40 172;
197 | }
198 | .ham6 .middle {
199 |   stroke-dasharray: 40 111;
200 | }
201 | .ham6 .bottom {
202 |   stroke-dasharray: 40 172;
203 | }
204 | .ham6.active .top {
205 |   stroke-dashoffset: -132px;
206 | }
207 | .ham6.active .middle {
208 |   stroke-dashoffset: -71px;
209 | }
210 | .ham6.active .bottom {
211 |   stroke-dashoffset: -132px;
212 | }
213 | .ham7 .top {
214 |   stroke-dasharray: 40 82;
215 | }
216 | .ham7 .middle {
217 |   stroke-dasharray: 40 111;
218 | }
219 | .ham7 .bottom {
220 |   stroke-dasharray: 40 161;
221 | }
222 | .ham7.active .top {
223 |   stroke-dasharray: 17 82;
224 |   stroke-dashoffset: -62px;
225 | }
226 | .ham7.active .middle {
227 |   stroke-dashoffset: 23px;
228 | }
229 | .ham7.active .bottom {
230 |   stroke-dashoffset: -83px;
231 | }
232 | .ham8 .top {
233 |   stroke-dasharray: 40 160;
234 | }
235 | .ham8 .middle {
236 |   stroke-dasharray: 40 142;
237 |   transform-origin: 50%;
238 |   transition: transform 400ms;
239 | }
240 | .ham8 .bottom {
241 |   stroke-dasharray: 40 85;
242 |   transform-origin: 50%;
243 |   transition: transform 400ms, stroke-dashoffset 400ms;
244 | }
245 | .ham8.active .top {
246 |   stroke-dashoffset: -64px;
247 | }
248 | .ham8.active .middle {
249 |   //stroke-dashoffset: -20px;
250 |   transform: rotate(90deg);
251 | }
252 | .ham8.active .bottom {
253 |   stroke-dashoffset: -64px;
254 | }
255 | 
256 | </style>


--------------------------------------------------------------------------------
/轮播图/轮播图.html:
--------------------------------------------------------------------------------
  1 | <div class='parent'>
  2 |     <div class='slider'>
  3 |         <button type="button" id='right' class='right' name="button">
  4 | 
  5 |        <svg version="1.1" id="Capa_1" width='40px' height='40px ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  6 |          viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
  7 |        <g>
  8 |         <path style='fill: #9d9d9d;' d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
  9 |           c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
 10 |           "/>
 11 |        </g>
 12 | 
 13 |        </svg>
 14 | 
 15 |        </button>
 16 |         <button type="button" id='left' class='left' name="button">
 17 |        <svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 18 |          viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
 19 |        <g>
 20 |         <path style='fill: #9d9d9d;' d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
 21 |           c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/>
 22 |        </g>
 23 |        </svg>
 24 |        </button>
 25 |         <svg id='svg2' class='up2' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 26 |       <circle id='circle1' class='circle1 steap' cx="34px" cy="49%" r="20"  />
 27 |       <circle id='circle2' class='circle2 steap' cx="34px" cy="49%" r="100"  />
 28 |       <circle id='circle3' class='circle3 steap' cx="34px" cy="49%" r="180"  />
 29 |       <circle id='circle4' class='circle4 steap' cx="34px" cy="49%" r="260"  />
 30 |       <circle id='circle5' class='circle5 steap' cx="34px" cy="49%" r="340"  />
 31 |       <circle id='circle6' class='circle6 steap' cx="34px" cy="49%" r="420"  />
 32 |       <circle id='circle7' class='circle7 steap' cx="34px" cy="49%" r="500"  />
 33 |       <circle id='circle8' class='circle8 steap' cx="34px" cy="49%" r="580"  />
 34 |       <circle id='circle9' class='circle9 steap' cx="34px" cy="49%" r="660"  />
 35 |     </svg>
 36 |         <svg id='svg1' class='up2' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 37 |       <circle id='circle10' class='circle10 steap' cx="648px" cy="49%" r="20"  />
 38 |       <circle id='circle11' class='circle11 steap' cx="648px" cy="49%" r="100"  />
 39 |       <circle id='circle12' class='circle12 steap' cx="648px" cy="49%" r="180"  />
 40 |       <circle id='circle13' class='circle13 steap' cx="648px" cy="49%" r="260"  />
 41 |       <circle id='circle14' class='circle14 steap' cx="648px" cy="49%" r="340"  />
 42 |       <circle id='circle15' class='circle15 steap' cx="648px" cy="49%" r="420"  />
 43 |       <circle id='circle16' class='circle16 steap' cx="648px" cy="49%" r="500"  />
 44 |       <circle id='circle17' class='circle17 steap' cx="648px" cy="49%" r="580"  />
 45 |       <circle id='circle18' class='circle18 steap' cx="648px" cy="49%" r="660"  />
 46 |     </svg>
 47 |         <div id='slide1' class='slide1 up1'>MOUNTAIN</div>
 48 |         <div id='slide2' class='slide2'>BEACH</div>
 49 |         <div id='slide3' class='slide3'>FOREST</div>
 50 |         <div id='slide4' class='slide4'>DESERT</div>
 51 |     </div>
 52 | </div>
 53 | 
 54 | <style type="text/css">
 55 |   @import url("https://fonts.googleapis.com/css?family=Heebo:400,700,800");
 56 | * {
 57 |   margin: 0;
 58 |   padding: 0;
 59 |   box-sizing: border-box;
 60 | }
 61 | 
 62 | .parent {
 63 |   width: 681px;
 64 |   height: 384px;
 65 |   top: 0;
 66 |   bottom: 0;
 67 |   left: 0;
 68 |   right: 0;
 69 |   margin: auto auto;
 70 |   overflow: hidden;
 71 |   position: absolute;
 72 |   -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
 73 |   -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
 74 |   box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
 75 | }
 76 | 
 77 | svg {
 78 |   position: absolute;
 79 |   z-index: 1;
 80 |   width: 681px;
 81 |   height: 384px;
 82 | }
 83 | 
 84 | button {
 85 |   position: absolute;
 86 |   z-index: 50;
 87 |   width: 40px;
 88 |   overflow: hidden;
 89 |   height: 40px;
 90 |   border: none;
 91 |   border-radius: 50%;
 92 |   background: #fff;
 93 |   cursor: pointer;
 94 |   -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
 95 |   -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
 96 |   box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
 97 | }
 98 | button:focus {
 99 |   outline-width: 0;
100 | }
101 | 
102 | circle {
103 |   stroke: #fff;
104 |   fill: none;
105 |   transition: 0.3s;
106 | }
107 | 
108 | #svg1 circle {
109 |   transition-timing-function: linear;
110 | }
111 | 
112 | #svg2 circle {
113 |   transition-timing-function: linear;
114 | }
115 | 
116 | #Capa_1 {
117 |   position: absolute;
118 |   width: 16px;
119 |   height: 16px;
120 |   transform: translate(-7px, -8px);
121 | }
122 | 
123 | #Capa_2 {
124 |   position: absolute;
125 |   width: 16px;
126 |   height: 16px;
127 |   transform: translate(-9px, -8px);
128 | }
129 | 
130 | .right {
131 |   margin-left: 628px;
132 |   margin-top: 168px;
133 |   border: 1px solid #849494;
134 |   background-color: transparent;
135 |   transition: .5s;
136 | }
137 | .right:hover {
138 |   background-color: #fff;
139 | }
140 | 
141 | .left {
142 |   margin-left: 0.5%;
143 |   margin-top: 6.17%;
144 |   border: 1px solid #849494;
145 |   background-color: transparent;
146 |   transition: .5s;
147 | }
148 | .left:hover {
149 |   background-color: #fff;
150 | }
151 | 
152 | .circle1 {
153 |   transition-delay: 0.05s;
154 | }
155 | 
156 | .circle2 {
157 |   transition-delay: 0.1s;
158 | }
159 | 
160 | .circle3 {
161 |   transition-delay: 0.15s;
162 | }
163 | 
164 | .circle4 {
165 |   transition-delay: 0.2s;
166 | }
167 | 
168 | .circle5 {
169 |   transition-delay: 0.25s;
170 | }
171 | 
172 | .circle6 {
173 |   transition-delay: 0.3s;
174 | }
175 | 
176 | .circle7 {
177 |   transition-delay: 0.35s;
178 | }
179 | 
180 | .circle8 {
181 |   transition-delay: 0.4s;
182 | }
183 | 
184 | .circle9 {
185 |   transition-delay: 0.45s;
186 | }
187 | 
188 | .circle10 {
189 |   transition-delay: 0.05s;
190 | }
191 | 
192 | .circle11 {
193 |   transition-delay: 0.1s;
194 | }
195 | 
196 | .circle12 {
197 |   transition-delay: 0.15s;
198 | }
199 | 
200 | .circle13 {
201 |   transition-delay: 0.2s;
202 | }
203 | 
204 | .circle14 {
205 |   transition-delay: 0.25s;
206 | }
207 | 
208 | .circle15 {
209 |   transition-delay: 0.3s;
210 | }
211 | 
212 | .circle16 {
213 |   transition-delay: 0.35s;
214 | }
215 | 
216 | .circle17 {
217 |   transition-delay: 0.4s;
218 | }
219 | 
220 | .circle18 {
221 |   transition-delay: 0.45s;
222 | }
223 | 
224 | .slide1 {
225 |   background-image: url("https://images.unsplash.com/photo-1483068612337-c045daaca40e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=6de8746a693acc34ebe9e9a15c4c18d1");
226 | }
227 | 
228 | .slide2 {
229 |   background-image: url("https://images.unsplash.com/photo-1489914099268-1dad649f76bf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=f21f40bb93bae58300e83f7f72ebb5a5");
230 | }
231 | 
232 | .slide3 {
233 |   background-image: url("https://images.unsplash.com/photo-1490100667990-4fced8021649?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=247f52de1a292b8a1877b0c7dd77a291");
234 | }
235 | 
236 | .slide4 {
237 |   background-image: url("https://images.unsplash.com/photo-1494783404829-a93883e74b68?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=413f5f5c41f4db69a1474d92419601ac");
238 | }
239 | 
240 | .slider {
241 |   position: absolute;
242 |   width: 400%;
243 |   height: 100%;
244 |   background: #000;
245 |   display: inline-flex;
246 |   overflow: hidden;
247 | }
248 | 
249 | .slide1,
250 | .slide2,
251 | .slide3,
252 | .slide4 {
253 |   position: absolute;
254 |   background-position: center;
255 |   background-size: cover;
256 |   color: #fff;
257 |   font-size: 62px;
258 |   padding-top: 138px;
259 |   font-weight: 800;
260 |   font-family: 'Heebo', sans-serif;
261 |   text-align: center;
262 |   width: 25%;
263 |   height: 100%;
264 |   z-index: 10;
265 |   transition: 1.4s;
266 | }
267 | 
268 | .tran {
269 |   transform: scale(1.3);
270 | }
271 | 
272 | .up1 {
273 |   z-index: 20;
274 | }
275 | 
276 | .up2 {
277 |   z-index: 40;
278 | }
279 | 
280 | .steap {
281 |   stroke-width: 0;
282 | }
283 | 
284 | .streak {
285 |   stroke-width: 82px;
286 | }
287 | 
288 | @media (max-width: 700px) {
289 |   .parent {
290 |     margin-left: 1%;
291 |   }
292 | }
293 | 
294 | </style>
295 | 
296 | <script type="text/javascript">
297 |     var curpage = 1;
298 |   var sliding = false;
299 |   var click = true;
300 |   var left = document.getElementById('left');
301 |   var right = document.getElementById('right');
302 |   var pagePrefix = 'slide';
303 |   var pageShift = 500;
304 |   var transitionPrefix = 'circle';
305 |   var svg = true;
306 | 
307 |   function leftSlide() {
308 |     if (click) {
309 |       if (curpage == 1) curpage = 5;
310 |         console.log('woek');
311 |         sliding = true;
312 |         curpage--;
313 |         svg = true;
314 |         click = false;
315 |         for(k=1;k<=4;k++){
316 |           var a1 = document.getElementById(pagePrefix + k);
317 |           a1.className += ' tran';
318 |         }
319 |         setTimeout(()=>{
320 |           move();
321 |         },200);
322 |         setTimeout(()=>{
323 |           for(k=1;k<=4;k++){
324 |             var a1 = document.getElementById(pagePrefix + k);
325 |             a1.classList.remove('tran');
326 |           };
327 |         },1400);
328 |       }
329 |   }
330 | 
331 | 
332 |    function rightSlide() {
333 |     if (click) {
334 |       if (curpage == 4) curpage = 0;
335 |       console.log('woek');
336 |       sliding = true;
337 |       curpage++;
338 |       svg = false;
339 |       click = false;
340 |       for(k=1;k<=4;k++){
341 |         var a1 = document.getElementById(pagePrefix + k);
342 |         a1.className += ' tran';
343 |       }
344 |       setTimeout(()=>{
345 |         move();
346 |       },200);
347 |       setTimeout(()=>{
348 |         for(k=1;k<=4;k++){
349 |           var a1 = document.getElementById(pagePrefix + k);
350 |           a1.classList.remove('tran');
351 |         };
352 |       },1400);
353 |     }
354 |   }
355 | 
356 | 
357 |   function move() {
358 |     if (sliding) {
359 |       sliding = false;
360 |       if (svg) {
361 |         for (j = 1; j <= 9; j++) {
362 |           var c = document.getElementById(transitionPrefix + j);
363 |           c.classList.remove("steap");
364 |           c.setAttribute("class", (transitionPrefix + j) + " streak")
365 |           console.log('streak');
366 |         }
367 |       } else {
368 |         for (j = 10; j <= 18; j++) {
369 |           var c = document.getElementById(transitionPrefix + j);
370 |           c.classList.remove("steap");
371 |           c.setAttribute("class", (transitionPrefix + j) + " streak")
372 |           console.log('streak');
373 |         }
374 |       }
375 | 
376 |       // for(k=1;k<=4;k++){
377 |       //   var a1 = document.getElementById(pagePrefix + k);
378 |       //   a1.className += ' tran';
379 |       // }
380 | 
381 |       setTimeout(() => {
382 |         for (i = 1; i <= 4; i++) {
383 |           if (i == curpage) {
384 |             var a = document.getElementById(pagePrefix + i);
385 |             a.className += ' up1';
386 |           } else {
387 |             var b = document.getElementById(pagePrefix + i);
388 |             b.classList.remove("up1");
389 |           }
390 |         };
391 |         sliding = true;
392 |       }, 600);
393 |       setTimeout(() => {
394 |         click = true;
395 |       }, 1700);
396 | 
397 | 
398 | 
399 |       setTimeout(() => {
400 |         if (svg) {
401 |           for (j = 1; j <= 9; j++) {
402 |             var c = document.getElementById(transitionPrefix + j);
403 |             c.classList.remove("streak");
404 |             c.setAttribute("class", (transitionPrefix + j) + " steap");
405 |           }
406 |         } else {
407 |           for (j = 10; j <= 18; j++) {
408 |             var c = document.getElementById(transitionPrefix + j);
409 |             c.classList.remove("streak");
410 |             c.setAttribute("class", (transitionPrefix + j) + " steap");
411 |           }
412 |           sliding = true;
413 |         }
414 |       }, 850);
415 |       setTimeout(() => {
416 |         click = true;
417 |       }, 1700);
418 |     }
419 | 
420 |   }
421 | 
422 |   left.onmousedown=()=>{
423 |     leftSlide();
424 |   }
425 | 
426 |   right.onmousedown=()=>{
427 |     rightSlide();
428 |   }
429 | 
430 |   document.onkeydown=(e)=>{
431 |     if(e.keyCode==37){
432 |       leftSlide();
433 | 
434 |     }
435 |     else if (e.keyCode==39) {
436 |       rightSlide();
437 | 
438 |     }
439 |   }
440 | 
441 |   //for codepen header
442 |   setTimeout(()=>{
443 |           rightSlide();
444 | 
445 |   },500)
446 | 
447 | 
448 | </script>


--------------------------------------------------------------------------------
/发火光文字/1.html:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 |   body, html {
  3 |   margin:0;
  4 |   padding:0;
  5 |   font-size:0;
  6 | }
  7 | div {
  8 |   display:none;
  9 | }
 10 | canvas {
 11 |   width:100vw;
 12 |   height:100vh;
 13 | }
 14 | </style>
 15 | 
 16 | 
 17 | <div>
 18 |   <ul data-time="1000">
 19 |     <li data-saturation="0" data-lightness="100" >3</li>
 20 |   </ul>
 21 |   <ul data-time="1000">
 22 |     <li data-saturation="0" data-lightness="100" >2</li>
 23 |   </ul>
 24 |   <ul data-time="1000">
 25 |     <li data-saturation="0" data-lightness="100" >1</li>
 26 |   </ul>
 27 |   <ul data-time="3000">
 28 |     <li data-hue="197" >Ten</li>
 29 |     <li data-hue="0" >cent</li>
 30 |     <li data-hue="197" >I</li>
 31 |     <li data-hue="197" >T</li>
 32 |     <li data-hue="45" >.</li>
 33 |     <li data-hue="197" >com</li>
 34 |   </ul>
 35 | </div>
 36 | <canvas></canvas>
 37 | 
 38 | <script type="text/javascript">
 39 | 
 40 |   const newParticlesPerFrame = 100;
 41 | 
 42 | const color = (hsl, o) => {
 43 |     return `hsla(${hsl.h | 0}, ${hsl.s}%, ${hsl.l}%, ${o})`;
 44 | };
 45 | 
 46 | class TextSparks
 47 | {
 48 |     constructor() {
 49 | 
 50 |         this.opa    = 0;
 51 |         this.tick   = 0;
 52 |         this.drawCB = null;
 53 |         this.mask   = null;
 54 |         this.canvas = window.document.querySelector('canvas');
 55 |         this.engine = this.canvas.getContext('2d');
 56 | 
 57 |         this.maskTick   = 0;
 58 |         this.nextMaskCb = this.nextMask.bind(this);
 59 |         this.maskCache  = [];
 60 | 
 61 |         this.resize();
 62 |         this.fetchData();
 63 |         this.buildStackCache();
 64 | 
 65 |         this.particleMap = new Map();
 66 | 
 67 |     }
 68 | 
 69 |     buildStackCache() {
 70 | 
 71 |         this.maskCache = this.stack.map((stack) => {
 72 |             return this.buildTextMask(stack.texts);
 73 |         });
 74 | 
 75 |     }
 76 | 
 77 |     fetchData() {
 78 | 
 79 |         this.stackId = -1;
 80 |         this.stack   = [...document.querySelectorAll('div > ul')].map(ul => {
 81 |             return {
 82 |                 ticks   : 0.05 * (ul.hasAttribute('data-time') ? ul.getAttribute('data-time') : 0),
 83 |                 fadeIn  : ul.hasAttribute('data-fade-in') ? 50 / Number(ul.getAttribute('data-fade-in')) : 0,
 84 |                 fadeOut : ul.hasAttribute('data-fade-out') ? 50 / Number(ul.getAttribute('data-fade-out')) : 0,
 85 |                 texts : [...ul.querySelectorAll('li')].map(li => {
 86 |                     return {
 87 |                         text : li.innerHTML.trim(),
 88 |                         hsl : {
 89 |                             h :li.hasAttribute('data-hue') ? Number(li.getAttribute('data-hue')) : 0,
 90 |                             s :li.hasAttribute('data-saturation') ? Number(li.getAttribute('data-saturation')) : 100,
 91 |                             l :li.hasAttribute('data-lightness') ? Number(li.getAttribute('data-lightness')) : 50
 92 |                         }
 93 |                     };
 94 |                 })
 95 |             };
 96 |         });
 97 | 
 98 |     }
 99 | 
100 |     resize() {
101 | 
102 |         this.width  = window.innerWidth;
103 |         this.height = window.innerHeight;
104 | 
105 |         this.canvas.setAttribute('width', this.width);
106 |         this.canvas.setAttribute('height', this.height);
107 | 
108 |     }
109 | 
110 |     buildTextMask(texts) {
111 | 
112 |         const mask = [];
113 | 
114 |         const textAll = texts.reduce((all, textStack) => {
115 |             return all.concat(textStack.text);
116 |         }, '');
117 | 
118 |         const size         = 0.8;
119 |         const width        = 200;
120 |         const height       = width / (this.width / this.height) | 0;
121 |         const baseFontSize = 20;
122 | 
123 |         // const canvas = document.querySelector('#test');
124 |         const canvas = document.createElement('canvas');
125 |         const engine = canvas.getContext('2d');
126 | 
127 |         canvas.setAttribute('width', width);
128 |         canvas.setAttribute('height', height);
129 | 
130 |         const font = (size) => {
131 |             return `bold ${size}px Arial`;
132 |         };
133 | 
134 |         engine.fillStyle = '#000';
135 |         engine.font = font(baseFontSize);
136 |         const m     = engine.measureText(textAll);
137 |         const rel   = m.width / (width * size);
138 |         const fSize = Math.min(height * 0.8, baseFontSize / rel | 0);
139 | 
140 |         engine.font     = font(fSize);
141 |         const fontWidth = engine.measureText(textAll).width;
142 | 
143 |         engine.fillText(
144 |             textAll,
145 |             (width - fontWidth) / 2,
146 |             height / 2 + fSize * 0.35
147 |         );
148 | 
149 |         let left  = (width - fontWidth) / 2;
150 |         const bot = height / 2 + fSize * 0.35;
151 | 
152 |         Object.values(texts).forEach(textStack => {
153 | 
154 |             engine.clearRect(0, 0, width, height);
155 | 
156 |             engine.fillText(
157 |                 textStack.text,
158 |                 left,
159 |                 bot
160 |             );
161 | 
162 |             left += engine.measureText(textStack.text).width;
163 | 
164 |             const data     = engine.getImageData(0, 0, width, height);
165 |             const subStack = [];
166 | 
167 |             for (let i = 0, max = data.width * data.height; i < max; i++) {
168 |                 if (data.data[i * 4 + 3]) {
169 |                     subStack.push({
170 |                         x : (i % data.width) / data.width,
171 |                         y : (i / data.width | 0) / data.height,
172 |                         o : Math.random(),
173 |                         t : Math.random()
174 |                     });
175 |                 }
176 |             }
177 | 
178 |             mask.push({
179 |                 hsl : textStack.hsl,
180 |                 s   : subStack
181 |             });
182 | 
183 |         });
184 | 
185 |         return mask;
186 |     }
187 | 
188 |     createNewParticle() {
189 | 
190 |         for (let i = 0; i < newParticlesPerFrame; i++) {
191 | 
192 |             let main        = Math.random() * this.mask.length | 0;
193 |             let subMask     = this.mask[main];
194 |             let maskElement = this.mask[main].s[Math.random() * this.mask[main].s.length | 0];
195 | 
196 |             if (subMask && maskElement) {
197 |                 let particle = {
198 |                     x   : maskElement.x,
199 |                     y   : maskElement.y,
200 |                     hsl : subMask.hsl,
201 |                     c   : this.prepareParticle
202 |                 };
203 | 
204 |                 this.particleMap.set(particle, particle);
205 |             }
206 | 
207 |         }
208 |     }
209 | 
210 |     secLog(log, timesPerFrame) {
211 |         if(Math.random() < 1 / 60 / timesPerFrame) {
212 |             console.log(log);
213 |         }
214 |     }
215 | 
216 |     clear() {
217 |         this.engine.fillStyle = '#111';
218 |         this.engine.fillRect(0, 0, this.width, this.height);
219 |     }
220 | 
221 |     randFromList(...rands) {
222 |         return rands.reduce((acc, rand) => {
223 |             return acc + rand;
224 |         }, 0) / rands.length;
225 |     }
226 | 
227 |     prepareParticle(particle) {
228 | 
229 |         const r1 = Math.random();
230 |         const r2 = Math.random();
231 |         const r3 = Math.random();
232 | 
233 |         const rad = r3 * Math.PI * 2;
234 | 
235 |         particle.x += (-0.5 + r1) / 300;
236 |         particle.y += (-0.5 + r2) / 300;
237 |         particle.si = 1 + Math.random() * 4 | 0;
238 |         // particle.cc = this.randFromList(r2, r3);
239 |         // particle.cc = this.hue / 365;
240 | 
241 |         particle.s = 0.003 + this.randFromList(r1, r2) / 10;
242 |         particle.l = 0;
243 | 
244 |         particle.mx = Math.cos(rad) * (particle.s / (r1 < 0.05 ? 10 : 400));
245 |         particle.my = Math.sin(rad) * (particle.s / (r1 < 0.05 ? 10 : 400));
246 | 
247 |         particle.c = this.drawParticle;
248 |     }
249 | 
250 |     drawParticle(particle) {
251 | 
252 |         if (particle.l >= 1) {
253 |             particle.c = null;
254 |             return;
255 |         }
256 | 
257 |         particle.l += particle.s;
258 |         particle.x += particle.mx;
259 |         particle.y += particle.my;
260 | 
261 |         this.engine.fillStyle = color(particle.hsl, this.opa * Math.sin(particle.l * Math.PI));
262 |         this.engine.fillRect(particle.x * this.width, particle.y * this.height, particle.si, particle.si);
263 | 
264 |     }
265 | 
266 |     renderParticles() {
267 | 
268 |         this.particleMap.forEach((particle) => {
269 | 
270 |             particle.c.call(this, particle);
271 | 
272 |             if (!particle.c) {
273 |                 this.particleMap.delete(particle);
274 |             }
275 | 
276 |         });
277 | 
278 |     }
279 | 
280 |     drawStatic() {
281 | 
282 |         let i = 0;
283 |         const step = 0.01;
284 | 
285 |         this.mask.forEach(subMask => {
286 |             subMask.s.forEach(pos => {
287 | 
288 |                 i++;
289 | 
290 |                 this.engine.fillStyle = color(subMask.hsl, (1 + Math.cos(pos.x * 5 * pos.y * 5 + this.tick / 10)) / 2 * this.opa * pos.t * 0.5);
291 |                 this.engine.fillRect(
292 |                     pos.x * this.width,
293 |                     pos.y * this.height,
294 |                     this.width / 150,
295 |                     this.width / 150
296 |                 );
297 | 
298 |                 if (i % 2) {
299 |                     return;
300 |                 }
301 | 
302 |                 pos.o        += step;
303 |                 const opa     = Math.max(0, Math.sin(pos.o * Math.PI * 2));
304 |                 const padding = opa * this.width / 200;
305 | 
306 |                 this.engine.fillStyle = color(subMask.hsl, this.opa * opa * 0.2);
307 | 
308 |                 if (pos.t < 0.5) {
309 |                     this.engine.beginPath();
310 |                     this.engine.arc(
311 |                         pos.x * this.width,
312 |                         pos.y * this.height,
313 |                         this.width / 500  + padding,
314 |                         0,
315 |                         Math.PI * 2
316 |                     );
317 |                     this.engine.fill();
318 |                 } else {
319 |                     this.engine.fillRect(
320 |                         pos.x * this.width - padding,
321 |                         pos.y * this.height - padding,
322 |                         this.width / 150  + padding * 2,
323 |                         this.width / 150  + padding * 2
324 |                     );
325 |                 }
326 | 
327 |             });
328 |         });
329 | 
330 | 
331 | 
332 |     }
333 | 
334 |     draw() {
335 | 
336 |         this.tick++;
337 | 
338 |         this.nextMaskCb();
339 |         this.createNewParticle();
340 |         this.clear();
341 | 
342 |         this.engine.globalCompositeOperation = 'lighter';
343 |         this.drawStatic();
344 |         this.renderParticles();
345 |         this.engine.globalCompositeOperation = 'source-over';
346 | 
347 |         requestAnimationFrame(this.drawCB);
348 | 
349 |     }
350 | 
351 |     fadeInMask() {
352 |         this.opa += this.stack[this.stackId].fadeIn;
353 | 
354 |         if (this.opa >= 1) {
355 |             this.opa = 1;
356 | 
357 |             this.afterFadeIn();
358 |         }
359 |     }
360 | 
361 |     afterFadeIn() {
362 | 
363 |         this.opa = 1;
364 | 
365 |         if (this.stack[this.stackId].ticks) {
366 |             this.maskTick   = 0;
367 |             this.nextMaskCb = this.tickMask.bind(this);
368 |         } else {
369 |             this.nextMaskCb = () => {};
370 |         }
371 | 
372 |     }
373 | 
374 |     fadeOutMask() {
375 | 
376 |         this.opa -= this.stack[this.stackId].fadeOut;
377 | 
378 |         if (this.opa <= 0) {
379 |             this.afterFadeOut();
380 |         }
381 | 
382 |     }
383 | 
384 |     afterFadeOut() {
385 | 
386 |         this.opa = 0;
387 |         this.nextMaskCb = this.nextMask.bind(this);
388 | 
389 |     }
390 | 
391 |     tickMask() {
392 | 
393 |         this.maskTick++;
394 | 
395 |         if (this.maskTick >= this.stack[this.stackId].ticks) {
396 |             if (this.stack[this.stackId].fadeOut) {
397 |                 this.nextMaskCb = this.fadeOutMask.bind(this);
398 |             } else {
399 |                 this.afterFadeOut();
400 |             }
401 |         }
402 | 
403 |     }
404 | 
405 |     nextMask() {
406 | 
407 |         this.stackId++;
408 | 
409 |         if (this.stackId >= this.stack.length) {
410 |             this.stackId = 0;
411 |         }
412 | 
413 |         this.mask = this.maskCache[this.stackId];
414 | 
415 |         if (this.stack[this.stackId].fadeIn) {
416 |             this.nextMaskCb = this.fadeInMask.bind(this);
417 |         } else {
418 |             this.opa = 1;
419 |             this.afterFadeIn();
420 |         }
421 |     }
422 | 
423 |     run() {
424 | 
425 |         this.drawCB = this.draw.bind(this);
426 |         this.drawCB();
427 | 
428 |     }
429 | }
430 | 
431 | const a = new TextSparks();
432 | a.run();
433 | 
434 | </script>


--------------------------------------------------------------------------------
/五彩纸屑射击/五彩纸屑射击.html:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 | 	body {
  3 |   width: 100vw;
  4 |   min-height: 100vh;
  5 |   font-family: 'Inconsolata', monospace;
  6 |   overflow: hidden;
  7 | }
  8 | #canvas {
  9 |   display: block;
 10 |   cursor: pointer;
 11 | }
 12 | .hint {
 13 |   position: absolute;
 14 |   top: 0;
 15 |   left: 0;
 16 |   width: 100%;
 17 |   height: 100%;
 18 |   display: flex;
 19 |   justify-content: center;
 20 |   align-items: center;
 21 |   pointer-events: none;
 22 |   -webkit-user-select: none;
 23 |      -moz-user-select: none;
 24 |       -ms-user-select: none;
 25 |           user-select: none;
 26 |   opacity: 0;
 27 |   visibility: hidden;
 28 |   -webkit-animation: fade-in 1s ease-out 1s forwards, fade-out 1s ease-out 5s forwards;
 29 |           animation: fade-in 1s ease-out 1s forwards, fade-out 1s ease-out 5s forwards;
 30 | }
 31 | .hint > h1 {
 32 |   font-size: 32px;
 33 |   color: #fff;
 34 | }
 35 | @-webkit-keyframes fade-in {
 36 |   0% {
 37 |     opacity: 0;
 38 |     visibility: hidden;
 39 |   }
 40 |   100% {
 41 |     opacity: 1;
 42 |     visibility: visible;
 43 |   }
 44 | }
 45 | @keyframes fade-in {
 46 |   0% {
 47 |     opacity: 0;
 48 |     visibility: hidden;
 49 |   }
 50 |   100% {
 51 |     opacity: 1;
 52 |     visibility: visible;
 53 |   }
 54 | }
 55 | @-webkit-keyframes fade-out {
 56 |   0% {
 57 |     opacity: 1;
 58 |     visibility: visible;
 59 |   }
 60 |   100% {
 61 |     opacity: 0;
 62 |     visibility: hidden;
 63 |   }
 64 | }
 65 | @keyframes fade-out {
 66 |   0% {
 67 |     opacity: 1;
 68 |     visibility: visible;
 69 |   }
 70 |   100% {
 71 |     opacity: 0;
 72 |     visibility: hidden;
 73 |   }
 74 | }
 75 | 
 76 | </style>
 77 | 
 78 | <canvas id="canvas"></canvas>
 79 | <div class="hint" id="hint">
 80 |   <h1>Click.</h1>
 81 | </div>
 82 | 
 83 | <script type="text/javascript">
 84 | 	var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var getRandom = function getRandom(min, max) {
 85 |   return Math.random() * (max - min) + min;
 86 | };
 87 | 
 88 | var getRandomInt = function getRandomInt(min, max) {
 89 |   return Math.floor(Math.random() * (max - min)) + min;
 90 | };
 91 | 
 92 | var getRandomColor = function getRandomColor() {
 93 |   var colors = [
 94 |   'rgba(231, 76, 60, 1)', // red
 95 |   'rgba(241, 196, 15, 1)', // yellow
 96 |   'rgba(46, 204, 113, 1)', // green
 97 |   'rgba(52, 152, 219, 1)', // blue
 98 |   'rgba(155, 89, 182, 1)' // purple
 99 |   ];
100 | 
101 |   return colors[getRandomInt(0, colors.length)];
102 | };
103 | 
104 | // Particle
105 | var
106 | Particle = function () {
107 | 
108 |   function Particle(system, x, y) {_classCallCheck(this, Particle);
109 |     this.system = system;
110 |     this.universe = this.system.world.universe;
111 |     this.x = x;
112 |     this.y = y;
113 |     this.color = getRandomColor();
114 |     this.life = 1;
115 |     this.aging = getRandom(0.99, 0.999); // 0.99, 0.999 || 0.999, 0.9999
116 | 
117 |     this.r = getRandomInt(8, 16);
118 |     this.speed = getRandom(3, 8);
119 |     this.velocity = [
120 |     getRandom(-this.speed, this.speed),
121 |     getRandom(-this.speed, this.speed)];
122 | 
123 |   }_createClass(Particle, [{ key: 'update', value: function update(
124 | 
125 |     dt) {
126 |       this.life *= this.aging;
127 | 
128 |       if (
129 |       this.r < 0.1 ||
130 |       this.life === 0 ||
131 |       this.x + this.r < 0 ||
132 |       this.x - this.r > this.universe.width ||
133 |       this.y + this.r < 0 ||
134 |       this.y - this.r > this.universe.height)
135 |       {
136 |         this.system.removeObject(this);
137 |       }
138 | 
139 |       this.r *= this.life;
140 |       this.x += this.velocity[0];
141 |       this.y += this.velocity[1];
142 |     } }, { key: 'render', value: function render(
143 | 
144 |     ctx) {
145 |       // Main circle
146 | 
147 |       ctx.fillStyle = this.color;
148 |       ctx.beginPath();
149 |       ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
150 |       ctx.fill();
151 |       ctx.closePath();
152 | 
153 |       var r = this.color.match(/([0-9]+)/g)[0];
154 |       var g = this.color.match(/([0-9]+)/g)[1];
155 |       var b = this.color.match(/([0-9]+)/g)[2];
156 | 
157 |       // Gradient
158 | 
159 |       var spread = 1.5;
160 |       var gradient = ctx.createRadialGradient(
161 |       this.x, this.y, this.r,
162 |       this.x, this.y, this.r * spread);
163 | 
164 |       gradient.addColorStop(0, 'rgba(' + r + ', ' + g + ', ' + b + ', 0.3)');
165 |       gradient.addColorStop(1, 'rgba(' + r + ', ' + g + ', ' + b + ', 0)');
166 | 
167 |       ctx.globalCompositeOperation = 'lighter';
168 |       ctx.fillStyle = gradient;
169 |       ctx.beginPath();
170 |       ctx.arc(this.x, this.y, this.r * spread, 0, 2 * Math.PI, false);
171 |       ctx.fill();
172 |       ctx.closePath();
173 |       ctx.globalCompositeOperation = 'source-over';
174 | 
175 |       // Aberration
176 | 
177 |       var offset = this.r * 0.5;
178 |       var color = 'rgba(' + g + ', ' + b + ', ' + r + ', 0.3)';
179 | 
180 |       ctx.globalCompositeOperation = 'lighter';
181 |       ctx.fillStyle = color;
182 |       ctx.beginPath();
183 |       ctx.arc(this.x + offset, this.y + offset, this.r, 0, 2 * Math.PI, false);
184 |       ctx.fill();
185 |       ctx.closePath();
186 |       ctx.globalCompositeOperation = 'source-over';
187 |     } }]);return Particle;}();
188 | 
189 | 
190 | 
191 | // Crown
192 | var
193 | Crown = function () {
194 | 
195 |   function Crown(system, x, y) {_classCallCheck(this, Crown);
196 |     this.system = system;
197 |     this.x = x;
198 |     this.y = y;
199 |     this.r = getRandomInt(15, 20); // 5, 20
200 |     this.mod = 1.1;
201 |     this.life = 1;
202 |     this.aging = getRandom(0.83, 0.88);
203 |     this.speed = getRandom(4, 5);
204 | 
205 |     this.color = {
206 |       r: getRandomInt(236, 242),
207 |       g: getRandomInt(196, 241),
208 |       b: getRandomInt(195, 242) };
209 | 
210 | 
211 |     this.angle1 = Math.PI * getRandom(0, 2);
212 |     this.angle2 = this.angle1 + Math.PI * getRandom(0.1, 0.5);
213 |   }_createClass(Crown, [{ key: 'update', value: function update(
214 | 
215 |     dt) {
216 |       this.life *= this.aging;
217 | 
218 |       if (this.life <= 0.0001) this.system.removeObject(this);
219 | 
220 |       this.r += Math.abs(1 - this.life) * this.speed;
221 | 
222 |       this.x1 = this.x + this.r * Math.cos(this.angle1);
223 |       this.y1 = this.y + this.r * Math.sin(this.angle1);
224 | 
225 |       this.angle3 = this.angle1 + (this.angle2 - this.angle1) / 2;
226 |       this.x2 = this.x + this.r * this.mod * Math.cos(this.angle3);
227 |       this.y2 = this.y + this.r * this.mod * Math.sin(this.angle3);
228 |     } }, { key: 'render', value: function render(
229 | 
230 |     ctx) {
231 |       var gradient = ctx.createRadialGradient(
232 |       this.x, this.y, this.r * 0.9,
233 |       this.x, this.y, this.r);
234 | 
235 |       gradient.addColorStop(0, 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.life + ')');
236 |       gradient.addColorStop(1, 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.life * 0.5 + ')');
237 | 
238 |       ctx.fillStyle = gradient;
239 |       ctx.beginPath();
240 |       ctx.arc(this.x, this.y, this.r, this.angle1, this.angle2, false);
241 |       ctx.quadraticCurveTo(this.x2, this.y2, this.x1, this.y1);
242 |       ctx.fill();
243 |       ctx.closePath();
244 |     } }]);return Crown;}();
245 | 
246 | 
247 | 
248 | // Explosion
249 | var
250 | Explosion = function () {
251 | 
252 |   function Explosion(world, x, y) {_classCallCheck(this, Explosion);
253 |     this.world = world;
254 |     this.x = x;
255 |     this.y = y;
256 |     this.objects = [];
257 | 
258 |     var particles = getRandomInt(30, 80); // 10, 30 amount of particles
259 |     var crowns = particles * getRandom(0.3, 0.5);
260 | 
261 |     while (crowns-- > 0) {this.addCrown();}
262 |     while (particles-- > 0) {this.addParticle();}
263 |   }_createClass(Explosion, [{ key: 'update', value: function update(
264 | 
265 |     dt) {
266 |       this.objects.forEach(function (obj) {
267 |         if (obj) obj.update(dt);
268 |       });
269 | 
270 |       if (this.objects.length <= 0) {
271 |         this.world.clearExplosion(this);
272 |       }
273 |     } }, { key: 'render', value: function render(
274 | 
275 |     ctx) {
276 |       this.objects.forEach(function (obj) {
277 |         if (obj) obj.render(ctx);
278 |       });
279 |     } }, { key: 'addCrown', value: function addCrown()
280 | 
281 |     {
282 |       this.objects.push(new Crown(this, this.x, this.y));
283 |     } }, { key: 'addParticle', value: function addParticle()
284 | 
285 |     {
286 |       this.objects.push(new Particle(this, this.x, this.y));
287 |     } }, { key: 'removeObject', value: function removeObject(
288 | 
289 |     obj) {
290 |       var index = this.objects.indexOf(obj);
291 | 
292 |       if (index !== -1) {
293 |         this.objects.splice(index, 1);
294 |       }
295 |     } }]);return Explosion;}();
296 | 
297 | 
298 | 
299 | // World
300 | var
301 | ConfettiWorld = function () {function ConfettiWorld() {_classCallCheck(this, ConfettiWorld);}_createClass(ConfettiWorld, [{ key: 'init', value: function init()
302 | 
303 |     {
304 |       this.objects = [];
305 |       window.addEventListener('click', this.explode.bind(this));
306 | 
307 |       // Initial explosion
308 |       var counter = 3;
309 |       while (counter-- > 0) {
310 |         this.explode({
311 |           clientX: this.universe.width / 2,
312 |           clientY: this.universe.height / 2 });
313 | 
314 |       }
315 |     } }, { key: 'update', value: function update(
316 | 
317 |     dt) {
318 |       this.objects.forEach(function (obj) {
319 |         if (obj) obj.update(dt);
320 |       });
321 | 
322 |       var amount = this.objects.reduce(function (sum, explosion) {
323 |         return sum += explosion.objects.length;
324 |       }, 0);
325 |     } }, { key: 'render', value: function render(
326 | 
327 |     ctx) {
328 |       this.objects.forEach(function (obj) {
329 |         if (obj) obj.render(ctx);
330 |       });
331 |     } }, { key: 'explode', value: function explode(
332 | 
333 |     event) {
334 |       var x = event.clientX;
335 |       var y = event.clientY;
336 | 
337 |       this.objects.push(new Explosion(this, x, y));
338 |     } }, { key: 'clearExplosion', value: function clearExplosion(
339 | 
340 |     explosion) {
341 |       var index = this.objects.indexOf(explosion);
342 | 
343 |       if (index !== -1) {
344 |         this.objects.splice(index, 1);
345 |       }
346 |     } }]);return ConfettiWorld;}();
347 | 
348 | 
349 | 
350 | // Time
351 | var
352 | Time = function () {
353 | 
354 |   function Time() {_classCallCheck(this, Time);
355 |     this.now = 0; // current tick time
356 |     this.prev = 0; // prev tick time
357 |     this.elapsed = 0; // elapsed time from last tick
358 |     this.delta = 0; // time from last update
359 |     this.fps = 60; // desired fps
360 |     this.step = 1 / 60; // step duration
361 |   }_createClass(Time, [{ key: 'update', value: function update(
362 | 
363 |     time) {
364 |       this.now = time;
365 |       this.elapsed = (this.now - this.prev) / 1000;
366 |       this.prev = this.now;
367 |       this.delta += this.elapsed;
368 |     } }, { key: 'raf', value: function raf(
369 | 
370 |     func) {
371 |       window.requestAnimationFrame(func);
372 |     } }, { key: 'hasFrames', value: function hasFrames()
373 | 
374 |     {
375 |       return this.delta >= this.step;
376 |     } }, { key: 'processFrame', value: function processFrame()
377 | 
378 |     {
379 |       this.delta -= this.step;
380 |     } }]);return Time;}();
381 | 
382 | 
383 | 
384 | // Canvas
385 | var
386 | Universe = function () {
387 | 
388 |   function Universe(element) {_classCallCheck(this, Universe);
389 |     this.el = element;
390 |     this.ctx = this.el.getContext('2d');
391 |     this.pixelRatio = window.devicePixelRatio;
392 |     this.time = new Time();
393 | 
394 |     this.worlds = {};
395 |     this.world = null; // current state
396 | 
397 |     this.updateSize();
398 |     window.addEventListener('resize', this.updateSize.bind(this));
399 | 
400 |     this.addWorld('confetti', ConfettiWorld);
401 |     this.setWorld('confetti');
402 | 
403 |     this.start();
404 |   }_createClass(Universe, [{ key: 'start', value: function start()
405 | 
406 |     {
407 |       this.time.raf(this.tick.bind(this));
408 |     } }, { key: 'tick', value: function tick(
409 | 
410 |     time) {
411 |       this.time.update(time);
412 | 
413 |       if (this.time.hasFrames()) {
414 |         this.update();
415 |         this.time.processFrame();
416 |       }
417 | 
418 |       this.render();
419 |       this.time.raf(this.tick.bind(this));
420 |     } }, { key: 'update', value: function update()
421 | 
422 |     {
423 |       this.world.update(this.time.step);
424 |     } }, { key: 'render', value: function render()
425 | 
426 |     {
427 |       var gradient = this.ctx.createLinearGradient(0, 0, this.width, this.height);
428 |       gradient.addColorStop(0, '#34495e');
429 |       gradient.addColorStop(1, '#2c3e50');
430 | 
431 |       this.ctx.clearRect(0, 0, this.width, this.height);
432 |       // this.ctx.fillStyle = '#2c3e50'
433 |       this.ctx.fillStyle = gradient;
434 |       this.ctx.fillRect(0, 0, this.width, this.height);
435 |       this.world.render(this.ctx);
436 |     }
437 | 
438 |     // Helpers
439 |   }, { key: 'updateSize', value: function updateSize()
440 |     {
441 |       this.width = window.innerWidth;
442 |       this.height = window.innerHeight;
443 |       this.el.width = this.width * this.pixelRatio;
444 |       this.el.height = this.height * this.pixelRatio;
445 |       this.el.style.width = window.innerWidth + 'px';
446 |       this.el.style.height = window.innerHeight + 'px';
447 |       this.ctx.scale(this.pixelRatio, this.pixelRatio);
448 |     } }, { key: 'addWorld', value: function addWorld(
449 | 
450 |     worldName, World) {
451 |       this.worlds[worldName] = new World();
452 |       this.worlds[worldName].universe = this;
453 |       this.worlds[worldName].init();
454 |     } }, { key: 'setWorld', value: function setWorld(
455 | 
456 |     worldName) {
457 |       this.world = this.worlds[worldName];
458 |     } }]);return Universe;}();
459 | 
460 | 
461 | 
462 | // Main
463 | 
464 | console.clear();
465 | var element = document.querySelector('#canvas');
466 | window.Canvas = new Universe(element);
467 | </script>


--------------------------------------------------------------------------------
/图片滑动预览/图片滑动预览.html:
--------------------------------------------------------------------------------
  1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
  2 | 
  3 | <div id="hero-slides">
  4 |   <div id="header">
  5 |     <div id="logo"></div>
  6 |     <div id="menu">
  7 |       <div id="hamburger">
  8 |         <div class="slice"></div>
  9 |         <div class="slice"></div>
 10 |         <div class="slice"></div>
 11 |       </div>
 12 |     </div>
 13 |   </div>
 14 |   <div id="slides-cont">
 15 |     <div class="button" id="next"></div>
 16 |     <div class="button" id="prev"></div>
 17 |     <div id="slides">
 18 |       <div class="slide" style="background-image: url(http://www.jq22.com/img/cs/300x500-1.png);">
 19 |         <div class="number">01</div>
 20 |         <div class="body">
 21 |           <div class="location">Shibuya, Japan</div>
 22 |           <div class="headline">Photo by Benjamin Hung</div><a href="#">
 23 |             <div class="link">View on Unsplash</div></a>
 24 |         </div>
 25 |       </div>
 26 |       <div class="slide" style="background-image: url(http://www.jq22.com/img/cs/300x500-2.png);">
 27 |         <div class="number">02</div>
 28 |         <div class="body">
 29 |           <div class="location">Mong Kok, Hong Kong</div>
 30 |           <div class="headline">Photo by Ryan Tang</div><a href="#">
 31 |             <div class="link">View on Unsplash</div></a>
 32 |         </div>
 33 |       </div>
 34 |       <div class="slide" style="background-image: url(http://www.jq22.com/img/cs/300x500-3.png);">
 35 |         <div class="number">03</div>
 36 |         <div class="body">
 37 |           <div class="location">Incheon, South Korea</div>
 38 |           <div class="headline">Photo by Steve Roe</div><a href="#">
 39 |             <div class="link">View on Unsplash</div></a>
 40 |         </div>
 41 |       </div>
 42 |       <div class="slide" style="background-image: url(http://www.jq22.com/img/cs/300x500-4.png);">
 43 |         <div class="number">04</div>
 44 |         <div class="body">
 45 |           <div class="location">Wan Chai, Hong Kong</div>
 46 |           <div class="headline">Photo by Sean Foley</div><a href="#">
 47 |             <div class="link">View on Unsplash</div></a>
 48 |         </div>
 49 |       </div>
 50 |       <div class="slide" style="background-image: url(http://www.jq22.com/img/cs/300x500-5.png);">
 51 |         <div class="number">05</div>
 52 |         <div class="body">
 53 |           <div class="location">Shibuya-ku, Japan</div>
 54 |           <div class="headline">Photo by Alex Knight</div><a href="#">
 55 |             <div class="link">View on Unsplash</div></a>
 56 |         </div>
 57 |       </div>
 58 |       <div class="slide" style="background-image: url(http://www.jq22.com/img/cs/300x500-6.png);">
 59 |         <div class="number">06</div>
 60 |         <div class="body">
 61 |           <div class="location">Tokyo, Japan</div>
 62 |           <div class="headline">Photo by Benjamin Hung</div><a href="#">
 63 |             <div class="link">View on Unsplash</div></a>
 64 |         </div>
 65 |       </div>
 66 |       <div class="slide" style="background-image: url(http://www.jq22.com/img/cs/300x500-7.png);">
 67 |         <div class="number">07</div>
 68 |         <div class="body">
 69 |           <div class="location">Taipei City, Taiwan</div>
 70 |           <div class="headline">Photo by Jesus In Taiwan</div><a href="#">
 71 |             <div class="link">View on Unsplash</div></a>
 72 |         </div>
 73 |       </div>
 74 |     </div>
 75 |     <div id="next-catch"></div>
 76 |     <div id="prev-catch"></div>
 77 |   </div>
 78 | 
 79 |   <style type="text/css">
 80 |     @import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,400,900,800i");
 81 | body {
 82 |   --slides-per-page: 2;
 83 |   margin: 0;
 84 |   overflow: hidden;
 85 |   height: 100vh;
 86 |   font-family: 'Roboto Condensed', sans-serif;
 87 |   color: white;
 88 | }
 89 | 
 90 | a {
 91 |   text-decoration: none;
 92 |   color: inherit;
 93 | }
 94 | 
 95 | #hero-slides {
 96 |   --page: 0;
 97 |   height: 100vh;
 98 |   background: #25303c;
 99 |   background: linear-gradient(90deg, #3e4751 0%, #25303c 100%);
100 | }
101 | #hero-slides #header {
102 |   height: 12vh;
103 |   line-height: 12vh;
104 |   padding: 0 3vw;
105 |   position: relative;
106 | }
107 | #hero-slides #header #logo {
108 |   font-size: 2.5vh;
109 |   font-style: italic;
110 | }
111 | #hero-slides #header #logo:before {
112 |   content: 'The';
113 |   text-transform: uppercase;
114 |   font-weight: 100;
115 |   margin-right: 0.4em;
116 | }
117 | #hero-slides #header #logo:after {
118 |   content: 'Wall';
119 |   text-transform: uppercase;
120 |   font-weight: 800;
121 | }
122 | #hero-slides #header #menu {
123 |   position: absolute;
124 |   top: 0;
125 |   right: 0;
126 |   bottom: 0;
127 |   cursor: pointer;
128 |   padding: 0 3vw;
129 | }
130 | #hero-slides #header #menu:before {
131 |   font-size: 1.75vh;
132 |   content: 'Play Demo';
133 |   margin-right: 0.5em;
134 |   text-transform: uppercase;
135 | }
136 | #hero-slides #header #menu #hamburger {
137 |   display: inline-block;
138 | }
139 | #hero-slides #header #menu #hamburger .slice {
140 |   background: white;
141 |   height: 0.2vh;
142 |   width: 1vw;
143 | }
144 | #hero-slides #header #menu #hamburger .slice:not(:last-child) {
145 |   margin-bottom: 0.5vh;
146 | }
147 | #hero-slides #slides-cont {
148 |   position: relative;
149 |   --button-height: 6vh;
150 |   --button-spacing: 0.2vh;
151 | }
152 | #hero-slides #slides-cont .button {
153 |   width: 5vw;
154 |   height: var(--button-height);
155 |   background: #0d96f2;
156 |   position: absolute;
157 |   right: 5.375vw;
158 |   top: 38vh;
159 |   z-index: 100;
160 |   cursor: pointer;
161 | }
162 | #hero-slides #slides-cont .button:before, #hero-slides #slides-cont .button:after {
163 |   line-height: var(--button-height);
164 |   position: absolute;
165 |   margin-left: -0.25vw;
166 |   pointer-events: none;
167 |   -webkit-transform: scale(0.75, 1.5);
168 |           transform: scale(0.75, 1.5);
169 |   transition: 125ms ease-in-out;
170 | }
171 | #hero-slides #slides-cont .button:before {
172 |   left: 50%;
173 | }
174 | #hero-slides #slides-cont .button:after {
175 |   opacity: 0;
176 | }
177 | #hero-slides #slides-cont .button:hover:before, #hero-slides #slides-cont .button:hover:after {
178 |   transition: 250ms ease-in-out;
179 | }
180 | #hero-slides #slides-cont .button:hover:before {
181 |   opacity: 0;
182 | }
183 | #hero-slides #slides-cont .button:hover:after {
184 |   left: 50% !important;
185 |   opacity: 1;
186 | }
187 | #hero-slides #slides-cont #next {
188 |   margin-top: calc(-1 * (var(--button-height) + var(--button-spacing)));
189 | }
190 | #hero-slides #slides-cont #next:before, #hero-slides #slides-cont #next:after {
191 |   content: '>';
192 | }
193 | #hero-slides #slides-cont #next:after {
194 |   left: 30%;
195 | }
196 | #hero-slides #slides-cont #next:hover:before {
197 |   left: 70%;
198 | }
199 | #hero-slides #slides-cont #prev {
200 |   margin-top: var(--button-spacing);
201 |   opacity: calc(var(--page) + 0.5);
202 |   transition: 500ms opacity;
203 | }
204 | #hero-slides #slides-cont #prev:before, #hero-slides #slides-cont #prev:after {
205 |   content: '<';
206 | }
207 | #hero-slides #slides-cont #prev:after {
208 |   left: 70%;
209 | }
210 | #hero-slides #slides-cont #prev:hover:before {
211 |   left: 30%;
212 | }
213 | #hero-slides #slides-cont #next-catch,
214 | #hero-slides #slides-cont #prev-catch {
215 |   width: 10vw;
216 |   height: 76vh;
217 |   position: absolute;
218 |   top: 0;
219 |   z-index: 90;
220 | }
221 | #hero-slides #slides-cont #next-catch {
222 |   right: 0;
223 | }
224 | #hero-slides #slides-cont #prev-catch {
225 |   left: 0;
226 | }
227 | #hero-slides #slides {
228 |   --slides-height: 76vh;
229 |   width: auto;
230 |   height: var(--slides-height);
231 |   padding: 0 10vw;
232 |   font-size: 0;
233 |   white-space: nowrap;
234 |   position: absolute;
235 |   -webkit-transform: translate3D(calc(var(--page) * -80vw), 0, 0);
236 |           transform: translate3D(calc(var(--page) * -80vw), 0, 0);
237 |   transition: 1500ms -webkit-transform cubic-bezier(0.7, 0, 0.3, 1);
238 |   transition: 1500ms transform cubic-bezier(0.7, 0, 0.3, 1);
239 |   transition: 1500ms transform cubic-bezier(0.7, 0, 0.3, 1), 1500ms -webkit-transform cubic-bezier(0.7, 0, 0.3, 1);
240 | }
241 | #hero-slides #slides .slide {
242 |   display: inline-block;
243 |   vertical-align: top;
244 |   font-size: 1.5vw;
245 |   width: 24em;
246 |   height: var(--slides-height);
247 |   margin: 0 1.333em;
248 |   background: #101419;
249 |   color: white;
250 |   background-size: cover;
251 |   background-position: center;
252 |   white-space: normal;
253 |   word-break: break-word;
254 |   position: relative;
255 | }
256 | #hero-slides #slides .slide:before {
257 |   content: '';
258 |   display: block;
259 |   background: linear-gradient(180deg, rgba(86, 97, 108, 0) 0%, rgba(33, 52, 69, 0.7) 100%);
260 |   opacity: 0;
261 |   position: absolute;
262 |   top: 0;
263 |   left: 0;
264 |   right: 0;
265 |   bottom: 0;
266 | }
267 | #hero-slides #slides .slide .number {
268 |   position: absolute;
269 |   top: 2em;
270 |   left: 2em;
271 |   -webkit-filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5));
272 |           filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5));
273 | }
274 | #hero-slides #slides .slide .number, #hero-slides #slides .slide .number:before, #hero-slides #slides .slide .number:after {
275 |   vertical-align: middle;
276 | }
277 | #hero-slides #slides .slide .number:before, #hero-slides #slides .slide .number:after {
278 |   display: inline-block;
279 |   content: '';
280 |   height: 0.133em;
281 |   margin-top: -0.2em;
282 |   background: white;
283 | }
284 | #hero-slides #slides .slide .number:before {
285 |   width: 0;
286 |   margin-left: 0;
287 | }
288 | #hero-slides #slides .slide .number:after {
289 |   width: 3em;
290 |   margin-left: 1em;
291 | }
292 | #hero-slides #slides .slide .body {
293 |   position: absolute;
294 |   bottom: 2em;
295 |   left: 2em;
296 |   right: 2em;
297 | }
298 | #hero-slides #slides .slide .location,
299 | #hero-slides #slides .slide .headline {
300 |   position: relative;
301 |   bottom: 0;
302 |   cursor: default;
303 | }
304 | #hero-slides #slides .slide:before,
305 | #hero-slides #slides .slide .number:before,
306 | #hero-slides #slides .slide .number:after,
307 | #hero-slides #slides .slide .location,
308 | #hero-slides #slides .slide .headline,
309 | #hero-slides #slides .slide .link {
310 |   transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);
311 | }
312 | #hero-slides #slides .slide .location {
313 |   font-weight: 100;
314 |   margin-bottom: 1.5em;
315 |   transition-delay: 60ms;
316 | }
317 | #hero-slides #slides .slide .headline {
318 |   font-size: 2.667em;
319 |   font-weight: 900;
320 |   transition-delay: 50ms;
321 | }
322 | #hero-slides #slides .slide .link {
323 |   display: inline-block;
324 |   background: #0d96f2;
325 |   padding: 0.5em 1.25em;
326 |   font-size: 1.33em;
327 |   opacity: 0;
328 |   position: absolute;
329 |   bottom: -2em;
330 |   pointer-events: none;
331 |   transition-delay: 25ms;
332 | }
333 | #hero-slides #slides .slide.hover:before, #hero-slides #slides .slide:hover:before {
334 |   opacity: 1;
335 | }
336 | #hero-slides #slides .slide.hover:before,
337 | #hero-slides #slides .slide.hover .number:before,
338 | #hero-slides #slides .slide.hover .number:after,
339 | #hero-slides #slides .slide.hover .location,
340 | #hero-slides #slides .slide.hover .headline,
341 | #hero-slides #slides .slide.hover .link, #hero-slides #slides .slide:hover:before,
342 | #hero-slides #slides .slide:hover .number:before,
343 | #hero-slides #slides .slide:hover .number:after,
344 | #hero-slides #slides .slide:hover .location,
345 | #hero-slides #slides .slide:hover .headline,
346 | #hero-slides #slides .slide:hover .link {
347 |   transition: 500ms cubic-bezier(0.7, 0, 0.3, 1);
348 | }
349 | #hero-slides #slides .slide.hover .number:before, #hero-slides #slides .slide:hover .number:before {
350 |   width: 3em;
351 |   margin-right: 1em;
352 | }
353 | #hero-slides #slides .slide.hover .number:after, #hero-slides #slides .slide:hover .number:after {
354 |   width: 0;
355 |   margin-right: 0;
356 | }
357 | #hero-slides #slides .slide.hover .location, #hero-slides #slides .slide:hover .location {
358 |   transition-delay: 0;
359 |   bottom: 4em;
360 | }
361 | #hero-slides #slides .slide.hover .headline, #hero-slides #slides .slide:hover .headline {
362 |   transition-delay: 100ms;
363 |   bottom: 1.5em;
364 | }
365 | #hero-slides #slides .slide.hover .link, #hero-slides #slides .slide:hover .link {
366 |   bottom: 0;
367 |   opacity: 1;
368 |   transition-delay: 250ms;
369 |   pointer-events: auto;
370 | }
371 | #hero-slides #footer {
372 |   height: 12vh;
373 |   font-size: 1vh;
374 | }
375 | #hero-slides #footer #dribbble {
376 |   border-radius: 2vh;
377 |   position: absolute;
378 |   bottom: 4vh;
379 |   right: 4vh;
380 |   transition: 300ms cubic-bezier(0.7, 0, 0.3, 1);
381 |   padding-left: 1.5vh;
382 | }
383 | #hero-slides #footer #dribbble:before, #hero-slides #footer #dribbble:after {
384 |   vertical-align: middle;
385 |   transition: inherit;
386 | }
387 | #hero-slides #footer #dribbble:before {
388 |   display: inline;
389 |   content: 'View original Dribbble';
390 |   font-size: 2vh;
391 |   opacity: 0;
392 |   -webkit-transform: translate3D(-200px, 0, 0);
393 |           transform: translate3D(-200px, 0, 0);
394 | }
395 | #hero-slides #footer #dribbble:after {
396 |   content: '';
397 |   display: inline-block;
398 |   width: 4vh;
399 |   height: 4vh;
400 |   margin-left: 1vh;
401 |   background-image: url(https://alca.tv/static/u/82fde61b-28ef-4f17-976e-8f1abb5a1165.png);
402 |   background-size: contain;
403 |   background-position: center;
404 | }
405 | #hero-slides #footer #dribbble.hover, #hero-slides #footer #dribbble:hover {
406 |   background: #e94e89;
407 | }
408 | #hero-slides #footer #dribbble.hover:before, #hero-slides #footer #dribbble:hover:before {
409 |   opacity: 1;
410 |   -webkit-transform: translate3D(0, 0, 0);
411 |           transform: translate3D(0, 0, 0);
412 |   transition-delay: 50ms;
413 | }
414 | #hero-slides #footer #dribbble.hover:after, #hero-slides #footer #dribbble:hover:after {
415 |   -webkit-filter: saturate(0%) contrast(200%) brightness(200%) invert(100%);
416 |           filter: saturate(0%) contrast(200%) brightness(200%) invert(100%);
417 | }
418 | 
419 | @media (min-width: 1200px) and (max-width: 1699px) {
420 |   body {
421 |     --slides-per-page: 3;
422 |   }
423 | 
424 |   #hero-slides #slides .slide {
425 |     font-size: 1vw;
426 |   }
427 | }
428 | @media (min-width: 1700px) {
429 |   body {
430 |     --slide-per-age: 4;
431 |   }
432 | 
433 |   #hero-slides #slides .slide {
434 |     font-size: 0.75vw;
435 |   }
436 | }
437 | 
438 |   </style>
439 | 
440 |   <script type="text/javascript">
441 |     let hero = document.getElementById('hero-slides');
442 | let menu = document.getElementById('menu');
443 | let slides = document.getElementById('slides');
444 | let next = [ 'next', 'next-catch' ].map(n => document.getElementById(n));
445 | let prev = [ 'prev', 'prev-catch' ].map(n => document.getElementById(n));
446 | let slideChildren = slides.children;
447 | let slideCount = slides.children.length;
448 | let currentlyDemoing = false;
449 | let currentPage = 0;
450 | let slidesPerPage = () => window.innerWidth > 1700 ? 4 : window.innerWidth > 1200 ? 3 : 2;
451 | let maxPageCount = () => slideCount / slidesPerPage() - 1;
452 | 
453 | function goToPage(pageNumber = 0) {
454 |   currentPage = Math.min(maxPageCount(), Math.max(0, pageNumber));
455 |   console.log(currentPage);
456 |   hero.style.setProperty('--page', currentPage);
457 | }
458 | 
459 | function sleep(time) {
460 |   return new Promise(res => setTimeout(res, time));
461 | }
462 | 
463 | function hoverSlide(index) {
464 |   index in slideChildren &&
465 |     slideChildren[index].classList.add('hover');
466 | }
467 | 
468 | function unhoverSlide(index) {
469 |   index in slideChildren &&
470 |     slideChildren[index].classList.remove('hover');
471 | }
472 | 
473 | async function demo() {
474 |   if(currentlyDemoing) {
475 |     return;
476 |   }
477 |   currentlyDemoing = true;
478 |   if(currentPage !== 0) {
479 |     goToPage(0);
480 |     await sleep(800);
481 |   }
482 |   let slides = slidesPerPage();
483 |   let pageSeq_ = { 2: [ 1, 2, 1 ], 3: [ 1, 2, 1 / 3 ], 4: [ 1, 1, 0 ] };
484 |   let pageSeq = pageSeq_[slides] || pageSeq_[4];
485 |   let slideSeq_ = { 2: [ 2, 4, 3 ], 3: [ 3, 6, 2 ], 4: [ 3, 6, 2 ] };
486 |   let slideSeq = slideSeq_[slides] || slideSeq_[2];
487 |   await sleep(300);
488 |   goToPage(pageSeq[0]);
489 |   await sleep(500);
490 |   hoverSlide(slideSeq[0]);
491 |   await sleep(1200);
492 |   goToPage(pageSeq[1]);
493 |   unhoverSlide(slideSeq[0]);
494 |   await sleep(500);
495 |   hoverSlide(slideSeq[1]);
496 |   await sleep(1200);
497 |   goToPage(pageSeq[2]);
498 |   unhoverSlide(slideSeq[1]);
499 |   await sleep(300);
500 |   hoverSlide(slideSeq[2]);
501 |   await sleep(1600);
502 |   goToPage(0);
503 |   unhoverSlide(slideSeq[2]);
504 |   currentlyDemoing = false;
505 | }
506 | 
507 | next.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage + 1)));
508 | prev.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage - 1)));
509 | menu.addEventListener('click', demo);
510 | 
511 | sleep(100).then(demo);
512 | 
513 | // window.addEventListener('resize', () => {
514 |   // console.log(document.body.style.getPropertyValue('--slide-per-page'));
515 | // });
516 |   </script>


--------------------------------------------------------------------------------