├── .DS_Store ├── 3D导航栏 └── index.html ├── 3D旋转星球模型 ├── index.html └── style.css ├── 3D翻转 └── index.html ├── CSS3时钟效果 └── demo.html ├── H5弹跳小球 ├── ball.js └── index.html ├── H5粒子时间+弹跳小球 ├── graph.js └── index.html ├── H5粒子时间 ├── graph.js └── index.html ├── H5繁星 ├── image │ └── star.png ├── js │ ├── index.js │ └── star.js └── stars.html ├── JS加载效果特效 └── 条形加载 │ ├── index.html │ └── index.js ├── JS音乐播放 ├── index.html └── test.mp3 ├── JS颜色插件 ├── jscolor-example.html ├── jscolor.js └── jscolor.min.js ├── README.md ├── WebUploader ├── .DS_Store └── index.html ├── 分页 └── javascript分页.js ├── 切换卡 └── index.html ├── 拉伸和透明 ├── action.js └── index.html ├── 文件上传 └── index.html ├── 模态框手撸版 └── index.html ├── 模态框插件 ├── dist │ ├── jquery.niftymodals.bootstrap.css │ ├── jquery.niftymodals.bootstrap.min.css │ ├── jquery.niftymodals.css │ ├── jquery.niftymodals.js │ ├── jquery.niftymodals.min.css │ └── jquery.niftymodals.min.js ├── index.html ├── js │ └── jquery-2.1.1.min.js └── lib │ ├── demo.css │ ├── fonts │ └── codropsicons │ │ ├── codropsicons.eot │ │ ├── codropsicons.svg │ │ ├── codropsicons.ttf │ │ ├── codropsicons.woff │ │ └── license.txt │ └── js │ ├── css-filters-polyfill.js │ └── cssParser.js ├── 浮动文字 ├── css │ ├── default.css │ ├── demo.css │ └── reset.css ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── index.html └── index2.html ├── 滑动门 ├── images │ ├── door1.jpg │ ├── door2.jpg │ ├── door3.jpg │ └── door4.jpg ├── index.html ├── js │ └── sliderdoor.js └── style │ ├── bootstrap.min.css │ └── silderdoor.css ├── 火焰文字 ├── css │ └── style.css ├── index.html └── js │ └── index.js ├── 纯CSS轮播图 ├── img │ ├── img1.jpg │ ├── img2.jpg │ ├── img3.jpg │ ├── img4.jpg │ └── img5.jpg ├── index.html └── style.css ├── 错误页面 ├── css │ └── error.css ├── error.html └── js │ ├── 3d-lines-animation.js │ ├── canvas-renderer.js │ ├── projector.js │ └── three.min.js ├── 闪光文字 ├── css │ └── style.css ├── index.html └── js │ └── index.js └── 页面滑动 ├── images ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 21.jpg ├── 22.jpg ├── 23.jpg ├── 24.jpg ├── 25.jpg ├── 26.jpg ├── 27.jpg ├── 28.jpg ├── 29.jpg ├── 3.jpg ├── 30.jpg ├── 31.jpg ├── 32.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html ├── index2.html ├── js └── scrollReveal.js └── 说明下载.url /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/.DS_Store -------------------------------------------------------------------------------- /3D导航栏/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 制作3D旋转导航 6 | 195 | 196 | 197 | 247 | 248 | -------------------------------------------------------------------------------- /3D旋转星球模型/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 3D旋转星球模型 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /3D旋转星球模型/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | background: #000; 7 | } 8 | .window { 9 | position: relative; 10 | float: left; 11 | margin: 0px 150px; 12 | perspective: 800px; 13 | } 14 | .father { 15 | position: relative; 16 | width: 300px; 17 | height: 300px; 18 | margin: 100px auto; 19 | transform-style: preserve-3d; 20 | transform-origin: 50% 50% -150px; /*中心旋转*/ 21 | /*transform-origin: 0 100px; 绕左前轴旋转*/ 22 | /*transform: translateZ(-150px);*/ 23 | animation: xuanz 5s linear 1s infinite; 24 | } 25 | .children { 26 | position: absolute; 27 | width: 100%; 28 | height: 100%; 29 | /*transition:all 1s ease;*/ 30 | opacity: 0.5; 31 | } 32 | .c1 { 33 | background: red; 34 | transform-origin: bottom; 35 | transform: rotateX(90deg); 36 | } 37 | .c2 { 38 | background: white; 39 | } 40 | .c3 { 41 | background: green; 42 | transform: translateZ(-300px); 43 | } 44 | .c4 { 45 | transform-origin: top; 46 | background: orange; 47 | transform: rotateX(-90deg); 48 | } 49 | .c5 { 50 | background: blue; 51 | transform: rotateY(90deg); 52 | transform-origin: left; 53 | } 54 | .c6 { 55 | transform: rotateY(-90deg); 56 | background: gray; 57 | transform-origin: right; 58 | } 59 | @keyframes xuanz{ 60 | 0% { 61 | transform: rotateY(0deg); 62 | } 63 | 20% { 64 | transform: rotateY(90deg); 65 | } 66 | 40% { 67 | transform: rotateY(180deg); 68 | } 69 | 80% { 70 | transform: rotateY(270deg); 71 | } 72 | 100% { 73 | transform: rotateY(360deg); 74 | } 75 | } 76 | .ball { 77 | position: relative; 78 | width: 300px; 79 | height: 300px; 80 | margin: 100px auto; 81 | transform-style: preserve-3d; 82 | animation: gundong 5s linear 1s infinite; 83 | } 84 | .xcircle,.ycircle,.zcircle { 85 | position: absolute; 86 | left: 0px; 87 | right: 0px; 88 | top: 0px; 89 | bottom: 0px; 90 | border-radius: 50%; 91 | transition:all 1s ease; 92 | } 93 | .x1,.x3,.y1,.y3,.z1,.z3 { 94 | width: 87.5%; 95 | height: 87.5%; 96 | margin: 6.25% auto; 97 | } 98 | .x2,.y2,.z2 { 99 | width: 100%; 100 | height: 100%; 101 | } 102 | .x2,.xLine { 103 | border: solid 2px blue; 104 | transform: rotateX(90deg); 105 | } 106 | .z2,.zLine { 107 | border: solid 2px orange; 108 | transform: rotateY(90deg); 109 | } 110 | .ycircle,.yLine { 111 | border: solid 2px red; 112 | } 113 | .yLine { 114 | transform: rotateZ(90deg); 115 | } 116 | .x1 { 117 | border: solid 2px blue; 118 | transform: rotateX(90deg) translateZ(75px); 119 | } 120 | .x3 { 121 | border: solid 2px blue; 122 | transform: rotateX(90deg) translateZ(-75px); 123 | } 124 | .z1 { 125 | border: solid 2px orange; 126 | transform: rotateY(90deg) translateZ(75px); 127 | } 128 | .z3 { 129 | border: solid 2px orange; 130 | transform: rotateY(90deg) translateZ(-75px); 131 | } 132 | .y1 { 133 | border: solid 2px red; 134 | transform: translateZ(75px); 135 | } 136 | .y3 { 137 | border: solid 2px red; 138 | transform: translateZ(-75px); 139 | } 140 | .xLine,.yLine,.zLine { 141 | position: absolute; 142 | width: 100%; 143 | top: 50%; 144 | } 145 | @keyframes gundong{ 146 | 0% { 147 | transform: rotateY(0deg) rotateX(0deg); 148 | } 149 | 20% { 150 | transform: rotateY(90deg) rotateX(90deg); 151 | } 152 | 40% { 153 | transform: rotateY(180deg) rotateX(180deg); 154 | } 155 | 80% { 156 | transform: rotateY(270deg) rotateX(270deg); 157 | } 158 | 100% { 159 | transform: rotateY(360deg) rotateX(360deg); 160 | } 161 | } -------------------------------------------------------------------------------- /3D翻转/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 67 | 108 | 109 | 110 |
111 |
112 |
1
113 |
2
114 |
3
115 |
4
116 |
5
117 |
118 |
119 | pre 120 |    121 | next 122 |
123 |
124 | 125 | -------------------------------------------------------------------------------- /CSS3时钟效果/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 97 | 98 | 99 | 100 |

CSS 时钟效果分步实现

101 | 102 |
103 | 104 | 106 | 107 | 113 |
114 | 115 | 196 | -------------------------------------------------------------------------------- /H5弹跳小球/ball.js: -------------------------------------------------------------------------------- 1 | 2 | //定义小球栈 3 | var balls = []; 4 | //存取颜色数组 5 | var colors = ['#00FF00','#006EFF','#E66EFF','#FF6E00','#FFFF00','#C8F4FA','#9664FA','#FEC783']; 6 | //创建定时器t1、t2 7 | var t1,t2; 8 | //设定事件参数为600s，防止定时器无限执行 9 | var time = 0; 10 | 11 | window.onload = function () { 12 | var canvas = document.getElementById('container'); 13 | var context = canvas.getContext('2d'); 14 | var button = document.getElementById('button'); 15 | button.onclick = function () { 16 | if(button.innerHTML == '暂停') { 17 | pause(button); 18 | } else if(button.innerHTML == '开始') { 19 | t1 = setInterval(function () { 20 | if (time > 600) { 21 | pause(button); 22 | return; 23 | } 24 | time++; 25 | console.log(time); 26 | addball(); 27 | },1000); 28 | t2 = setInterval(function () { 29 | draw(context); 30 | update(); 31 | },50); 32 | button.innerHTML = '暂停'; 33 | } 34 | } 35 | } 36 | 37 | //暂停事件 38 | function pause(button) { 39 | clearInterval(t1); 40 | clearInterval(t2); 41 | time = 0; 42 | button.innerHTML = '开始'; 43 | } 44 | 45 | //更新数据 46 | function update () { 47 | for(var i in balls) { 48 | balls[i].x += balls[i].vx; 49 | balls[i].y += balls[i].vy; 50 | balls[i].vy += balls[i].g; 51 | if(balls[i].y >= 670) { 52 | balls[i].vy = - balls[i].vy*balls[i].f; 53 | } 54 | } 55 | } 56 | 57 | //绘制小球 58 | function draw (ctx) { 59 | // var num = Math.floor(Math.random()*8); 60 | ctx.clearRect(0,0,1200,700); 61 | for (var i in balls) { 62 | ctx.beginPath(); 63 | ctx.fillStyle = balls[i].color; 64 | ctx.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2,true); 65 | ctx.closePath(); 66 | ctx.fill(); 67 | } 68 | } 69 | 70 | //添加小球 71 | function addball () { 72 | var ball = { 73 | x:0, 74 | y:100, 75 | r:15, 76 | vx:Math.floor(Math.random()*8)+1, 77 | vy:Math.floor(Math.random()*10)+1, 78 | g:2, 79 | f:0.75, 80 | color:colors[Math.floor(Math.random()*8)] 81 | } 82 | balls.push(ball); 83 | } 84 | 85 | 86 | -------------------------------------------------------------------------------- /H5弹跳小球/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | canvas弹跳小球 5 | 6 | 7 | 8 | 您的浏览器不支持canvas属性 9 | 开始 10 | 11 | 12 | -------------------------------------------------------------------------------- /H5粒子时间+弹跳小球/graph.js: -------------------------------------------------------------------------------- 1 | //定义小球栈 2 | var balls = []; 3 | //存取颜色数组 4 | var colors = ['#00FF00','#006EFF','#E66EFF','#FF6E00','#FFFF00','#C8F4FA','#9664FA','#FEC783']; 5 | //需要展示的时间 6 | var curShowTime = 0; 7 | //定义画布的长和宽 8 | var WIDTH = 1200,HEIGHT = 700; 9 | //定义小球半径 10 | var RADIUS = 10; 11 | //定义摩擦系数和重力加速度 12 | var Ff = 0.75,Gg = 2; 13 | //设置定时器 14 | var Timer; 15 | 16 | window.onload = function () { 17 | var canvas = document.getElementById("container"); 18 | var context = canvas.getContext("2d"); 19 | var button = document.getElementById('button'); 20 | curShowTime = getCurShowTime(); 21 | button.onclick = function () { 22 | if(button.innerHTML == '暂停') { 23 | clearInterval(Timer); 24 | button.innerHTML = '开始'; 25 | } else if(button.innerHTML == '开始') { 26 | Timer = setInterval(function () { 27 | drawTime(context); 28 | console.log(balls.length); 29 | update(); 30 | },50); 31 | button.innerHTML = '暂停'; 32 | } 33 | } 34 | } 35 | 36 | //获取当前要展示的时间 37 | function getCurShowTime() { 38 | var dt = new Date(); 39 | var time = [dt.getHours(),dt.getMinutes(),dt.getSeconds()]; 40 | for (var i = 0; i < time.length; i++) { 41 | if(time[i] < 10) { 42 | time[i] = '0' + time[i]; 43 | } 44 | time[i] = "" + time[i]; 45 | } 46 | return time; 47 | } 48 | 49 | //添加时间绘制属性 50 | function drawTime(ctx) { 51 | 52 | var nextShowTime = getCurShowTime(); 53 | 54 | var nextHours = parseInt(nextShowTime[0]); 55 | var nextMinutes = parseInt(nextShowTime[1]); 56 | var nextSeconds = parseInt(nextShowTime[2]); 57 | 58 | var curHours = parseInt(curShowTime[0]); 59 | var curMinutes = parseInt(curShowTime[1]); 60 | var curSeconds = parseInt(curShowTime[2]); 61 | 62 | if (curSeconds != nextSeconds) { 63 | curShowTime = nextShowTime; 64 | if (parseInt(curHours/10) != parseInt(nextHours/10)) { 65 | addball(30,60,parseInt(nextHours/10)); 66 | } 67 | if (parseInt(curHours%10) != parseInt(nextHours%10)) { 68 | addball(30 + 15*RADIUS,60,parseInt(nextHours%10)); 69 | } 70 | if (parseInt(curMinutes/10) != parseInt(nextMinutes/10)) { 71 | addball(30 + 39*RADIUS,60,parseInt(nextMinutes/10)); 72 | } 73 | if (parseInt(curMinutes%10) != parseInt(nextMinutes%10)) { 74 | addball(30 + 54*RADIUS,60,parseInt(nextMinutes%10)); 75 | } 76 | if (parseInt(curSeconds/10) != parseInt(nextSeconds/10)) { 77 | addball(30 + 78*RADIUS,60,parseInt(nextSeconds/10)); 78 | } 79 | if (parseInt(curSeconds%10) != parseInt(nextSeconds%10)) { 80 | addball(30 + 93*RADIUS,60,parseInt(nextSeconds%10)); 81 | } 82 | } 83 | ctx.clearRect(0,0,WIDTH,HEIGHT); 84 | draw( 30 , 60 , parseInt(curHours/10) , ctx ) 85 | draw( 30 + 15*RADIUS , 60 , parseInt(curHours%10) , ctx ) 86 | draw( 30 + 30*RADIUS , 60 , 10 , ctx ) 87 | draw( 30 + 39*RADIUS , 60 , parseInt(curMinutes/10) , ctx); 88 | draw( 30 + 54*RADIUS , 60 , parseInt(curMinutes%10) , ctx); 89 | draw( 30 + 69*RADIUS , 60 , 10 , ctx); 90 | draw( 30 + 78*RADIUS , 60 , parseInt(curSeconds/10) , ctx); 91 | draw( 30 + 93*RADIUS , 60 , parseInt(curSeconds%10) , ctx); 92 | } 93 | 94 | function draw( x , y , num , ctx ){ 95 | ctx.fillStyle = "#FF0000"; 96 | for( var i = 0 ; i < numbers[num].length ; i ++ ) { 97 | for(var j = 0 ; j < numbers[num][i].length ; j ++ ) { 98 | if( numbers[num][i][j] == 1 ){ 99 | ctx.beginPath(); 100 | ctx.arc( x+j*2*RADIUS+10 , y+i*2*RADIUS+10, 10 , 0 , 2*Math.PI ) 101 | ctx.closePath() 102 | 103 | ctx.fill() 104 | } 105 | } 106 | } 107 | for (var i in balls) { 108 | ctx.beginPath(); 109 | ctx.fillStyle = balls[i].color; 110 | ctx.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2,true); 111 | ctx.closePath(); 112 | ctx.fill(); 113 | } 114 | } 115 | 116 | //添加小球 117 | function addball (x,y,num) { 118 | // console.log(num); 119 | for (var i = 0; i < numbers[num].length; i++) { 120 | for (var j = 0; j < numbers[num][i].length; j++) { 121 | if (numbers[num][i][j] == 1) { 122 | var ball = { 123 | x:x+j*2*RADIUS+10, 124 | y:y+i*2*RADIUS+10, 125 | r:RADIUS, 126 | vx:-Math.floor(Math.random()*8)+1, 127 | vy:Math.floor(Math.random()*10)+1, 128 | g:Gg, 129 | f:Ff, 130 | color:colors[Math.floor(Math.random()*8)] 131 | } 132 | balls.push(ball); 133 | } 134 | } 135 | } 136 | } 137 | 138 | //更新数据 139 | function update () { 140 | for(var i in balls) { 141 | balls[i].x += balls[i].vx; 142 | balls[i].y += balls[i].vy; 143 | balls[i].vy += balls[i].g; 144 | if(balls[i].y >= 685) { 145 | balls[i].vy = - balls[i].vy*balls[i].f; 146 | } 147 | // console.log(balls[i].x); 148 | if (balls[i].x <= 0 || balls[i].x >= WIDTH) { 149 | balls.splice(i,1); 150 | } 151 | } 152 | } 153 | 154 | 155 | //存取数据数组 156 | var numbers = [ 157 | [ 158 | [0,0,1,1,1,0,0], 159 | [0,1,1,0,1,1,0], 160 | [1,1,0,0,0,1,1], 161 | [1,1,0,0,0,1,1], 162 | [1,1,0,0,0,1,1], 163 | [1,1,0,0,0,1,1], 164 | [1,1,0,0,0,1,1], 165 | [1,1,0,0,0,1,1], 166 | [0,1,1,0,1,1,0], 167 | [0,0,1,1,1,0,0] 168 | ],//0 169 | [ 170 | [0,0,0,1,1,0,0], 171 | [0,1,1,1,1,0,0], 172 | [0,0,0,1,1,0,0], 173 | [0,0,0,1,1,0,0], 174 | [0,0,0,1,1,0,0], 175 | [0,0,0,1,1,0,0], 176 | [0,0,0,1,1,0,0], 177 | [0,0,0,1,1,0,0], 178 | [0,0,0,1,1,0,0], 179 | [1,1,1,1,1,1,1] 180 | ],//1 181 | [ 182 | [0,1,1,1,1,1,0], 183 | [1,1,0,0,0,1,1], 184 | [0,0,0,0,0,1,1], 185 | [0,0,0,0,1,1,0], 186 | [0,0,0,1,1,0,0], 187 | [0,0,1,1,0,0,0], 188 | [0,1,1,0,0,0,0], 189 | [1,1,0,0,0,0,0], 190 | [1,1,0,0,0,1,1], 191 | [1,1,1,1,1,1,1] 192 | ],//2 193 | [ 194 | [1,1,1,1,1,1,1], 195 | [0,0,0,0,0,1,1], 196 | [0,0,0,0,1,1,0], 197 | [0,0,0,1,1,0,0], 198 | [0,0,1,1,1,0,0], 199 | [0,0,0,0,1,1,0], 200 | [0,0,0,0,0,1,1], 201 | [0,0,0,0,0,1,1], 202 | [1,1,0,0,0,1,1], 203 | [0,1,1,1,1,1,0] 204 | ],//3 205 | [ 206 | [0,0,0,0,1,1,0], 207 | [0,0,0,1,1,1,0], 208 | [0,0,1,1,1,1,0], 209 | [0,1,1,0,1,1,0], 210 | [1,1,0,0,1,1,0], 211 | [1,1,1,1,1,1,1], 212 | [0,0,0,0,1,1,0], 213 | [0,0,0,0,1,1,0], 214 | [0,0,0,0,1,1,0], 215 | [0,0,0,1,1,1,1] 216 | ],//4 217 | [ 218 | [1,1,1,1,1,1,1], 219 | [1,1,0,0,0,0,0], 220 | [1,1,0,0,0,0,0], 221 | [1,1,1,1,1,1,0], 222 | [0,0,0,0,0,1,1], 223 | [0,0,0,0,0,1,1], 224 | [0,0,0,0,0,1,1], 225 | [0,0,0,0,0,1,1], 226 | [1,1,0,0,0,1,1], 227 | [0,1,1,1,1,1,0] 228 | ],//5 229 | [ 230 | [0,0,0,1,1,1,0], 231 | [0,0,1,1,0,0,0], 232 | [0,1,1,0,0,0,0], 233 | [1,1,0,0,0,0,0], 234 | [1,1,0,1,1,1,0], 235 | [1,1,0,0,0,1,1], 236 | [1,1,0,0,0,1,1], 237 | [1,1,0,0,0,1,1], 238 | [1,1,0,0,0,1,1], 239 | [0,1,1,1,1,1,0] 240 | ],//6 241 | [ 242 | [1,1,1,1,1,1,1], 243 | [1,1,0,0,0,1,1], 244 | [0,0,0,0,1,1,0], 245 | [0,0,0,0,1,1,0], 246 | [0,0,0,1,1,0,0], 247 | [0,0,0,1,1,0,0], 248 | [0,0,1,1,0,0,0], 249 | [0,0,1,1,0,0,0], 250 | [0,0,1,1,0,0,0], 251 | [0,0,1,1,0,0,0] 252 | ],//7 253 | [ 254 | [0,1,1,1,1,1,0], 255 | [1,1,0,0,0,1,1], 256 | [1,1,0,0,0,1,1], 257 | [1,1,0,0,0,1,1], 258 | [0,1,1,1,1,1,0], 259 | [1,1,0,0,0,1,1], 260 | [1,1,0,0,0,1,1], 261 | [1,1,0,0,0,1,1], 262 | [1,1,0,0,0,1,1], 263 | [0,1,1,1,1,1,0] 264 | ],//8 265 | [ 266 | [0,1,1,1,1,1,0], 267 | [1,1,0,0,0,1,1], 268 | [1,1,0,0,0,1,1], 269 | [1,1,0,0,0,1,1], 270 | [0,1,1,1,0,1,1], 271 | [0,0,0,0,0,1,1], 272 | [0,0,0,0,0,1,1], 273 | [0,0,0,0,1,1,0], 274 | [0,0,0,1,1,0,0], 275 | [0,1,1,0,0,0,0] 276 | ],//9 277 | [ 278 | [0,0,0,0], 279 | [0,0,0,0], 280 | [0,1,1,0], 281 | [0,1,1,0], 282 | [0,0,0,0], 283 | [0,0,0,0], 284 | [0,1,1,0], 285 | [0,1,1,0], 286 | [0,0,0,0], 287 | [0,0,0,0] 288 | ]//: 289 | ]; -------------------------------------------------------------------------------- /H5粒子时间+弹跳小球/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | canvas粒子图 5 | 6 | 7 | 8 |
9 | 您的浏览器不支持canvas属性 10 |
11 | 开始 12 | 13 | 14 | -------------------------------------------------------------------------------- /H5粒子时间/graph.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | var canvas = document.getElementById("container"); 3 | var context = canvas.getContext("2d"); 4 | setInterval(start(context),1000); 5 | } 6 | 7 | //利用无参匿名函数向定时器传参 8 | function start(ctx) { 9 | return function () { 10 | ctx.clearRect(0,0,1200,700); 11 | update(ctx); 12 | } 13 | } 14 | 15 | //更新时间 16 | function update(ctx) { 17 | var dt = new Date(); 18 | var time = [dt.getHours(),dt.getMinutes(),dt.getSeconds()]; 19 | var leftNum = [],rightNum = []; 20 | var nextNum = []; //TODO下一个数字 21 | for (var i = 0; i < time.length; i++) { 22 | if(time[i] < 10) { 23 | leftNum[i] = 0; 24 | rightNum[i] = time[i]; 25 | } else { 26 | leftNum[i] = parseInt(time[i] / 10); 27 | rightNum[i] = time[i] % 10; 28 | } 29 | if(i == 0) { 30 | nextNum[i] = (leftNum[i] + 1) % 3; 31 | } else { 32 | nextNum[i*2] = (leftNum[i] + 1) % 10; 33 | } 34 | nextNum[i*2 + 1] = (rightNum[i] + 1) % 10; 35 | drawTime(i,leftNum[i],rightNum[i],ctx); 36 | } 37 | for (var i = 0;i < 2;i++) { 38 | drawDots(i,ctx); 39 | } 40 | } 41 | 42 | //绘制当前时间 43 | function drawTime(leftbegin,leftNum,rightNum,ctx) { 44 | for (var i = 0; i < numbers[leftNum].length; i++) { 45 | for (var j = 0; j < numbers[leftNum].length; j++) { 46 | if(numbers[leftNum][i][j] == 1) { 47 | ctx.beginPath(); 48 | ctx.fillStyle = "#FF0000"; 49 | ctx.arc(30+412*leftbegin+j*22,100+i*22,10,0,Math.PI*2,true); 50 | ctx.fill(); 51 | // ctx.fillRect(100 + j*20,100 + i*20,20,20); 52 | ctx.closePath(); 53 | } 54 | } 55 | } 56 | for (var i = 0; i < numbers[rightNum].length; i++) { 57 | for (var j = 0; j < numbers[rightNum].length; j++) { 58 | if(numbers[rightNum][i][j] == 1) { 59 | ctx.beginPath(); 60 | ctx.fillStyle = "#FF0000"; 61 | ctx.arc(194+416*leftbegin+j*22,100+i*22,10,0,Math.PI*2,true); 62 | ctx.fill(); 63 | // ctx.fillRect(100 + j*20,100 + i*20,20,20); 64 | ctx.closePath(); 65 | } 66 | } 67 | } 68 | } 69 | 70 | //绘制冒号 71 | function drawDots (leftbeigin,ctx) { 72 | for (var i = 0; i < numbers[10].length; i++) { 73 | for (var j = 0; j < numbers[10][0].length; j++) { 74 | if(numbers[10][i][j] == 1) { 75 | ctx.beginPath(); 76 | ctx.fillStyle = "#FF0000"; 77 | ctx.arc(346+leftbeigin*414+j*22,100+i*22,10,0,Math.PI*2,true); 78 | ctx.fill(); 79 | // ctx.fillRect(100 + j*20,100 + i*20,20,20); 80 | ctx.closePath(); 81 | } 82 | } 83 | } 84 | } 85 | 86 | 87 | //存取颜色数组 88 | var colors = ['#00FF00','#006EFF','#E66EFF','#FF6E00','#FFFF00','#C8F4FA','#9664FA','#FEC783']; 89 | 90 | //存取数据数组 91 | var numbers = [ 92 | [ 93 | [0,0,1,1,1,0,0], 94 | [0,1,1,0,1,1,0], 95 | [1,1,0,0,0,1,1], 96 | [1,1,0,0,0,1,1], 97 | [1,1,0,0,0,1,1], 98 | [1,1,0,0,0,1,1], 99 | [1,1,0,0,0,1,1], 100 | [1,1,0,0,0,1,1], 101 | [0,1,1,0,1,1,0], 102 | [0,0,1,1,1,0,0] 103 | ],//0 104 | [ 105 | [0,0,0,1,1,0,0], 106 | [0,1,1,1,1,0,0], 107 | [0,0,0,1,1,0,0], 108 | [0,0,0,1,1,0,0], 109 | [0,0,0,1,1,0,0], 110 | [0,0,0,1,1,0,0], 111 | [0,0,0,1,1,0,0], 112 | [0,0,0,1,1,0,0], 113 | [0,0,0,1,1,0,0], 114 | [1,1,1,1,1,1,1] 115 | ],//1 116 | [ 117 | [0,1,1,1,1,1,0], 118 | [1,1,0,0,0,1,1], 119 | [0,0,0,0,0,1,1], 120 | [0,0,0,0,1,1,0], 121 | [0,0,0,1,1,0,0], 122 | [0,0,1,1,0,0,0], 123 | [0,1,1,0,0,0,0], 124 | [1,1,0,0,0,0,0], 125 | [1,1,0,0,0,1,1], 126 | [1,1,1,1,1,1,1] 127 | ],//2 128 | [ 129 | [1,1,1,1,1,1,1], 130 | [0,0,0,0,0,1,1], 131 | [0,0,0,0,1,1,0], 132 | [0,0,0,1,1,0,0], 133 | [0,0,1,1,1,0,0], 134 | [0,0,0,0,1,1,0], 135 | [0,0,0,0,0,1,1], 136 | [0,0,0,0,0,1,1], 137 | [1,1,0,0,0,1,1], 138 | [0,1,1,1,1,1,0] 139 | ],//3 140 | [ 141 | [0,0,0,0,1,1,0], 142 | [0,0,0,1,1,1,0], 143 | [0,0,1,1,1,1,0], 144 | [0,1,1,0,1,1,0], 145 | [1,1,0,0,1,1,0], 146 | [1,1,1,1,1,1,1], 147 | [0,0,0,0,1,1,0], 148 | [0,0,0,0,1,1,0], 149 | [0,0,0,0,1,1,0], 150 | [0,0,0,1,1,1,1] 151 | ],//4 152 | [ 153 | [1,1,1,1,1,1,1], 154 | [1,1,0,0,0,0,0], 155 | [1,1,0,0,0,0,0], 156 | [1,1,1,1,1,1,0], 157 | [0,0,0,0,0,1,1], 158 | [0,0,0,0,0,1,1], 159 | [0,0,0,0,0,1,1], 160 | [0,0,0,0,0,1,1], 161 | [1,1,0,0,0,1,1], 162 | [0,1,1,1,1,1,0] 163 | ],//5 164 | [ 165 | [0,0,0,1,1,1,0], 166 | [0,0,1,1,0,0,0], 167 | [0,1,1,0,0,0,0], 168 | [1,1,0,0,0,0,0], 169 | [1,1,0,1,1,1,0], 170 | [1,1,0,0,0,1,1], 171 | [1,1,0,0,0,1,1], 172 | [1,1,0,0,0,1,1], 173 | [1,1,0,0,0,1,1], 174 | [0,1,1,1,1,1,0] 175 | ],//6 176 | [ 177 | [1,1,1,1,1,1,1], 178 | [1,1,0,0,0,1,1], 179 | [0,0,0,0,1,1,0], 180 | [0,0,0,0,1,1,0], 181 | [0,0,0,1,1,0,0], 182 | [0,0,0,1,1,0,0], 183 | [0,0,1,1,0,0,0], 184 | [0,0,1,1,0,0,0], 185 | [0,0,1,1,0,0,0], 186 | [0,0,1,1,0,0,0] 187 | ],//7 188 | [ 189 | [0,1,1,1,1,1,0], 190 | [1,1,0,0,0,1,1], 191 | [1,1,0,0,0,1,1], 192 | [1,1,0,0,0,1,1], 193 | [0,1,1,1,1,1,0], 194 | [1,1,0,0,0,1,1], 195 | [1,1,0,0,0,1,1], 196 | [1,1,0,0,0,1,1], 197 | [1,1,0,0,0,1,1], 198 | [0,1,1,1,1,1,0] 199 | ],//8 200 | [ 201 | [0,1,1,1,1,1,0], 202 | [1,1,0,0,0,1,1], 203 | [1,1,0,0,0,1,1], 204 | [1,1,0,0,0,1,1], 205 | [0,1,1,1,0,1,1], 206 | [0,0,0,0,0,1,1], 207 | [0,0,0,0,0,1,1], 208 | [0,0,0,0,1,1,0], 209 | [0,0,0,1,1,0,0], 210 | [0,1,1,0,0,0,0] 211 | ],//9 212 | [ 213 | [0,0,0,0], 214 | [0,0,0,0], 215 | [0,1,1,0], 216 | [0,1,1,0], 217 | [0,0,0,0], 218 | [0,0,0,0], 219 | [0,1,1,0], 220 | [0,1,1,0], 221 | [0,0,0,0], 222 | [0,0,0,0] 223 | ]//: 224 | ]; -------------------------------------------------------------------------------- /H5粒子时间/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | canvas粒子图 5 | 6 | 7 | 8 | 您的浏览器不支持canvas属性 9 | 10 | 11 | -------------------------------------------------------------------------------- /H5繁星/image/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/H5繁星/image/star.png -------------------------------------------------------------------------------- /H5繁星/js/index.js: -------------------------------------------------------------------------------- 1 | //canvas容器 2 | var can; 3 | var ctx; 4 | 5 | //实例化img对象 6 | var img = new Image(); 7 | img.src = 'image/star.png'; 8 | 9 | //定义星星类 10 | var stars = []; 11 | var num = 299; 12 | 13 | window.onload = function () { 14 | //获得canvas容器 15 | can = document.getElementById('canvas'); 16 | ctx = can.getContext('2d'); 17 | 18 | for (var i = 0; i < num; i++) { 19 | stars[i] = new star(); 20 | stars[i].init(); 21 | }; 22 | updateCanvas(); 23 | } 24 | 25 | //设置定时器，刷新画布 26 | function updateCanvas() { 27 | var t = setTimeout("updateCanvas()",100); 28 | ctx.fillStyle = "#000"; 29 | ctx.fillRect(0,0,1000,600); 30 | for (var i = 0; i < num; i++) { 31 | stars[i].draw(); 32 | stars[i].update(); 33 | }; 34 | } -------------------------------------------------------------------------------- /H5繁星/js/star.js: -------------------------------------------------------------------------------- 1 | //创建star对象 2 | var star = function() { 3 | //位置 4 | this.x; 5 | this.y; 6 | //帧序号 7 | this.picNum; 8 | //移动速度 9 | this.xSpd; 10 | this.ySpd; 11 | }; 12 | 13 | //star对象的初始化方法 14 | star.prototype.init = function() { 15 | this.x = Math.random()*1000; 16 | this.y = Math.random()*600; 17 | this.picNum = (Math.random()*6)%6; 18 | this.xSpd = Math.random()*6-3; 19 | this.ySpd = Math.random()*6-3; 20 | }; 21 | 22 | //绘制星星的方法 23 | star.prototype.draw = function() { 24 | ctx.drawImage(img,this.picNum*7,0,7,7,this.x,this.y,7,7); 25 | }; 26 | 27 | //变帧方法 28 | star.prototype.update = function(first_argument) { 29 | this.x += this.xSpd*0.1; 30 | this.y += this.ySpd*0.1; 31 | if (this.x < 0 || this.x > 1000 || this.y < 0 || this.y > 600) { 32 | this.init(); 33 | return; 34 | }; 35 | this.picNum += 1; 36 | if (this.picNum >= 7) { 37 | this.picNum = 0; 38 | }; 39 | }; -------------------------------------------------------------------------------- /H5繁星/stars.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 20 | 21 | 22 |
23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /JS加载效果特效/条形加载/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 加载效果滑动条 6 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /JS加载效果特效/条形加载/index.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | // stop(); 3 | } 4 | 5 | //创建滑动条对象 6 | var slide = document.getElementById('wrap_in'); 7 | var timer = null; 8 | var end = document.getElementById('wrap').offsetWidth; 9 | 10 | //自动执行的方法 11 | (function () { 12 | init(); 13 | start(); 14 | // stop(); 15 | })(); 16 | 17 | function init () { 18 | slide.style.width = "0px"; 19 | slide.speed = 10; 20 | } 21 | 22 | function start () { 23 | if (slide.offsetWidth >= end) { 24 | return; 25 | }; 26 | slide.style.width = slide.offsetWidth + slide.speed + 'px'; 27 | timer = setTimeout("start()",10); 28 | } 29 | 30 | function stop () { 31 | clearTimeout(timer); 32 | } 33 | -------------------------------------------------------------------------------- /JS音乐播放/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | JS播放音乐 5 | 6 | 7 | 8 | 22 | 23 | -------------------------------------------------------------------------------- /JS音乐播放/test.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/JS音乐播放/test.mp3 -------------------------------------------------------------------------------- /JS颜色插件/jscolor-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jscolor Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Example 1

15 | Color: 16 | 17 | 18 | 19 |

Example 2

20 | 21 | 24 | 25 | HEX value: 26 | 27 | 32 | 33 | 34 | 35 |

Check out more examples at jscolor.com!

36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JS-CSS-API 2 | JS和CSS的各种特效 3 | 4 | 看到自己喜欢的或者觉得有意思的特效就动手实现一下 5 | 6 | 在项目中如果需要可以直接使用 7 | -------------------------------------------------------------------------------- /WebUploader/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/WebUploader/.DS_Store -------------------------------------------------------------------------------- /WebUploader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 文件上传 7 | 8 | 9 | 10 | 69 | 70 | 71 |
72 |
73 |
74 |
选择文件
75 |
76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
文件名文件大小进度状态
87 | 88 | 156 | 157 | -------------------------------------------------------------------------------- /分页/javascript分页.js: -------------------------------------------------------------------------------- 1 | var obj,j; 2 | var page=0; 3 | var nowPage=0;//当前页数 4 | var listNum=5;//每页显示的数目 5 | var pagesLen;//总页数 6 | var pageNum=4;//分页连接的个数 7 | function onload () { 8 | obj=document.getElementById('onegood'); 9 | j=obj.length; 10 | pagesLen=Math.ceil(j/listNum); 11 | upPage(0); 12 | } 13 | function upPage(p) { 14 | nowPage=p; 15 | for (var i = 0; i < j; i++) { 16 | obj[i].style.display="none"; 17 | }; 18 | for (var i = p*listNum; i < (p+1)*listNum; i++) { 19 | if (obj[i]) { 20 | obj[i].style.display="block"; 21 | }; 22 | }; 23 | strS='首页'; 24 | var pageNum_2=pageNum%2==0?Math.ceil(pageNum/2)+1:Math.ceil(pageNum/2); 25 | var pageNum_3=pageNum%2==0?Math.ceil(pageNum/2):Math.ceil(pageNum/2)+1; 26 | var strC="",startPage,endPage; 27 | if (pageNum>=pagesLen) { 28 | startPage=0; 29 | endPage=pagesLen-1; 30 | }else if(nowPagepageNum?pageNum:pagesLen-1; 33 | }else{ 34 | startPage=nowPage+pageNum_3>=pagesLen 35 | ?pagesLen-pageNum-1:nowPage-pageNum_2+1; 36 | var t=startPage+pageNum; 37 | endPage=t>pagesLen?pagesLen-1:t; 38 | }; 39 | for (var i = startPage; i < endPage; i++) { 40 | if (i==nowPage) { 41 | strC+=''+(i+1)+''; 42 | }; 43 | else { 44 | strC+=''+(i+1)+''; 45 | } 46 | }; 47 | strE='尾页'; 48 | strE2=nowPage+1+"/"+pagesLen+"页"+"共"+j+"条"; 49 | document.getElementById('page').innerHTML=strS+" "+strC+strE+strE2; 50 | } -------------------------------------------------------------------------------- /切换卡/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 |
9 | 23 |
24 |
25 |
26 |
27 |
28 |
29 | 48 | 49 | -------------------------------------------------------------------------------- /拉伸和透明/action.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | var aLi = document.getElementsByTagName('li'); 3 | for (var i = 0; i < aLi.length; i++) { 4 | aLi[i].opa = 30; 5 | aLi[i].timer = null; 6 | aLi[i].onmouseover = function () { 7 | startMove(this,400); 8 | } 9 | aLi[i].onmouseout = function () { 10 | startMove(this,200); 11 | } 12 | }; 13 | } 14 | 15 | //移动的方法 16 | function startMove (obj,target) { 17 | clearInterval(obj.timer); 18 | obj.timer = setInterval(function () { 19 | var speed = (target-obj.offsetWidth)/8; 20 | speed = speed >0?Math.ceil(speed):Math.floor(speed); 21 | if (obj.offsetLeft == target) { 22 | clearInterval(timer); 23 | }else{ 24 | obj.opa = obj.opa + speed; 25 | obj.style.width = obj.offsetWidth + speed + 'px'; 26 | obj.style.opacity = obj.opa/100; 27 | }; 28 | },30); 29 | } -------------------------------------------------------------------------------- /拉伸和透明/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 多物体运动 6 | 7 | 19 | 20 | 21 | 26 | 27 | -------------------------------------------------------------------------------- /文件上传/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 文件上传 7 | 8 | 67 | 68 | 69 | 87 |
88 |
89 |
90 |
点击选择文件 91 | 92 |
93 |

未选择文件

94 |
95 |
96 | 97 |
98 | 105 | 106 | -------------------------------------------------------------------------------- /模态框手撸版/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 模态框 5 | 86 | 98 | 99 | 100 | 打开 101 |
102 |
103 | 107 |
对话框的内容
108 | 114 |
115 |
116 | 117 | -------------------------------------------------------------------------------- /模态框插件/dist/jquery.niftymodals.bootstrap.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jquery.niftymodals v1.1.1 (https://github.com/foxythemes/jquery-niftymodals) 3 | * Copyright 2016 Codrops and Foxy Themes 4 | * Licensed under Codrops license http://tympanus.net/codrops/licensing/ 5 | */.md-perspective,.md-perspective body{height:100%;overflow:hidden}.md-perspective body{background:#222;-webkit-perspective:600px;-moz-perspective:600px;perspective:600px}.md-container{position:fixed;top:50%;left:50%;width:50%;max-width:630px;min-width:320px;height:auto;z-index:2001;visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.md-show{visibility:visible}.md-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:2000;opacity:0;background:rgba(0,0,0,.5);-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show~.md-overlay{opacity:1;visibility:visible}.md-content{position:relative;border-radius:3px}.md-effect-1 .md-content{-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-1 .md-content{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.md-effect-2 .md-content{-webkit-transform:translateX(20%);-moz-transform:translateX(20%);-ms-transform:translateX(20%);transform:translateX(20%);opacity:0;-webkit-transition:all .3s cubic-bezier(.25,.5,.5,.9);-moz-transition:all .3s cubic-bezier(.25,.5,.5,.9);transition:all .3s cubic-bezier(.25,.5,.5,.9)}.md-effect-3 .md-content,.md-effect-7 .md-content{-webkit-transition:all .3s;-moz-transition:all .3s}.md-show.md-effect-2 .md-content{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1}.md-effect-3 .md-content{-webkit-transform:translateY(20%);-moz-transform:translateY(20%);-ms-transform:translateY(20%);transform:translateY(20%);opacity:0;transition:all .3s}.md-show.md-effect-3 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.md-effect-4 .md-content{-webkit-transform:scale(0) rotate(720deg);-moz-transform:scale(0) rotate(720deg);-ms-transform:scale(0) rotate(720deg);transform:scale(0) rotate(720deg);opacity:0}.md-effect-4 .md-content,.md-show.md-effect-4~.md-overlay{-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s}.md-show.md-effect-4 .md-content{-webkit-transform:scale(1) rotate(0);-moz-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);opacity:1}.md-effect-5.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-5 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(600px) rotateX(20deg);-moz-transform:translateZ(600px) rotateX(20deg);-ms-transform:translateZ(600px) rotateX(20deg);transform:translateZ(600px) rotateX(20deg);opacity:0}.md-show.md-effect-5 .md-content{-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in;-webkit-transform:translateZ(0) rotateX(0);-moz-transform:translateZ(0) rotateX(0);-ms-transform:translateZ(0) rotateX(0);transform:translateZ(0) rotateX(0);opacity:1}.md-effect-6.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-6 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translate(30%) translateZ(600px) rotate(10deg);-moz-transform:translate(30%) translateZ(600px) rotate(10deg);-ms-transform:translate(30%) translateZ(600px) rotate(10deg);transform:translate(30%) translateZ(600px) rotate(10deg);opacity:0}.md-show.md-effect-6 .md-content{-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in;-webkit-transform:translate(0) translateZ(0) rotate(0);-moz-transform:translate(0) translateZ(0) rotate(0);-ms-transform:translate(0) translateZ(0) rotate(0);transform:translate(0) translateZ(0) rotate(0);opacity:1}.md-effect-7{top:0;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.md-effect-7 .md-content{-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);transition:all .3s;opacity:0}.md-effect-8 .md-content,.md-effect-9 .md-content{-webkit-transition:all .3s;-moz-transition:all .3s}.md-show.md-effect-7 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);border-radius:0 0 3px 3px;opacity:1}.md-effect-8.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-8 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-70deg);-moz-transform:rotateY(-70deg);-ms-transform:rotateY(-70deg);transform:rotateY(-70deg);transition:all .3s;opacity:0}.md-show.md-effect-8 .md-content{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0);opacity:1}.md-effect-9.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-9 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-70deg);-moz-transform:rotateX(-70deg);-ms-transform:rotateX(-70deg);transform:rotateX(-70deg);transition:all .3s;opacity:0}.md-show.md-effect-9 .md-content{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0);opacity:1}.md-effect-10.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-10 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-60deg);-moz-transform:rotateX(-60deg);-ms-transform:rotateX(-60deg);transform:rotateX(-60deg);-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0;opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-10 .md-content{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0);opacity:1}.md-effect-11 .md-content{-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-11 .md-content{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.md-effect-12 .md-content{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-12~.md-overlay{background:#000}.md-show.md-effect-12 .md-content{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.md-effect-13.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-13 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-3000px) rotateY(90deg);-moz-transform:translateZ(-3000px) rotateY(90deg);-ms-transform:translateZ(-3000px) rotateY(90deg);transform:translateZ(-3000px) rotateY(90deg);opacity:0}.md-show.md-effect-13 .md-content{-webkit-animation:slit .7s forwards ease-out;-moz-animation:slit .7s forwards ease-out;animation:slit .7s forwards ease-out}@-webkit-keyframes slit{50%{-webkit-transform:translateZ(-250px) rotateY(89deg);opacity:.5;-webkit-animation-timing-function:ease-out}100%{-webkit-transform:translateZ(0) rotateY(0);opacity:1}}@-moz-keyframes slit{50%{-moz-transform:translateZ(-250px) rotateY(89deg);opacity:.5;-moz-animation-timing-function:ease-out}100%{-moz-transform:translateZ(0) rotateY(0);opacity:1}}@keyframes slit{50%{transform:translateZ(-250px) rotateY(89deg);opacity:1;animation-timing-function:ease-in}100%{transform:translateZ(0) rotateY(0);opacity:1}}.md-effect-14.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-14 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateY(100%) rotateX(90deg);-moz-transform:translateY(100%) rotateX(90deg);-ms-transform:translateY(100%) rotateX(90deg);transform:translateY(100%) rotateX(90deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;transform-origin:0 100%;opacity:0;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out}.md-show.md-effect-14 .md-content{-webkit-transform:translateY(0) rotateX(0);-moz-transform:translateY(0) rotateX(0);-ms-transform:translateY(0) rotateX(0);transform:translateY(0) rotateX(0);opacity:1}.md-effect-15.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-15 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(100px) translateX(-30%) rotateY(90deg);-moz-transform:translateZ(100px) translateX(-30%) rotateY(90deg);-ms-transform:translateZ(100px) translateX(-30%) rotateY(90deg);transform:translateZ(100px) translateX(-30%) rotateY(90deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;transform-origin:0 100%;opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-15 .md-content{-webkit-transform:translateZ(0) translateX(0) rotateY(0);-moz-transform:translateZ(0) translateX(0) rotateY(0);-ms-transform:translateZ(0) translateX(0) rotateY(0);transform:translateZ(0) translateX(0) rotateY(0);opacity:1}.md-show.md-effect-16~.md-overlay{background:rgba(180,46,32,.5)}.md-show.md-effect-16~.container{-webkit-filter:blur(3px);-moz-filter:blur(3px);filter:blur(3px)}.md-effect-16 .md-content{-webkit-transform:translateY(-5%);-moz-transform:translateY(-5%);-ms-transform:translateY(-5%);transform:translateY(-5%);opacity:0}.md-effect-16 .md-content,.md-show.md-effect-16~.container{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-16 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.md-show.md-effect-17~.container{height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;-moz-transition:-moz-transform .3s;transition:transform .3s}.md-show.md-effect-17~.container,.md-show.md-effect-17~.md-overlay{-webkit-transform:rotateX(-2deg);-moz-transform:rotateX(-2deg);-ms-transform:rotateX(-2deg);transform:rotateX(-2deg);-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.md-effect-17 .md-content{opacity:0;-webkit-transform:translateY(200%);-moz-transform:translateY(200%);-ms-transform:translateY(200%);transform:translateY(200%)}.md-show.md-effect-17 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all .3s .2s;-moz-transition:all .3s .2s;transition:all .3s .2s}.md-show.md-effect-18~.container{height:100%;overflow:hidden}.md-show.md-effect-18~.md-overlay{background:rgba(143,27,15,.8);-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s}.md-show.md-effect-18~.container,.md-show.md-effect-18~.md-overlay{-webkit-transform-style:preserve-3d;-webkit-transform-origin:0 50%;-webkit-animation:rotateRightSideFirst .5s forwards ease-in;-moz-transform-style:preserve-3d;-moz-transform-origin:0 50%;-moz-animation:rotateRightSideFirst .5s forwards ease-in;transform-style:preserve-3d;transform-origin:0 50%;animation:rotateRightSideFirst .5s forwards ease-in}@-webkit-keyframes rotateRightSideFirst{50%{-webkit-transform:translateZ(-50px) rotateY(5deg);-webkit-animation-timing-function:ease-out}100%{-webkit-transform:translateZ(-200px)}}@-moz-keyframes rotateRightSideFirst{50%{-moz-transform:translateZ(-50px) rotateY(5deg);-moz-animation-timing-function:ease-out}100%{-moz-transform:translateZ(-200px)}}@keyframes rotateRightSideFirst{50%{transform:translateZ(-50px) rotateY(5deg);animation-timing-function:ease-out}100%{transform:translateZ(-200px)}}.md-effect-18 .md-content{-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);transform:translateX(200%);opacity:0}.md-show.md-effect-18 .md-content{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;-webkit-transition:all .5s .1s;-moz-transition:all .5s .1s;transition:all .5s .1s} -------------------------------------------------------------------------------- /模态框插件/dist/jquery.niftymodals.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jquery.niftymodals v1.1.1 (https://github.com/foxythemes/jquery-niftymodals) 3 | * Copyright 2016 Codrops and Foxy Themes 4 | * Licensed under Codrops license http://tympanus.net/codrops/licensing/ 5 | */ 6 | 7 | ;(function($) { 8 | 'use strict'; 9 | 10 | var defaults = { 11 | overlaySelector: '.md-overlay', 12 | closeSelector: '.md-close', 13 | classAddAfterOpen: 'md-show', 14 | data: false, 15 | buttons: false, 16 | beforeOpen: false, 17 | afterOpen: false, 18 | beforeClose: false, 19 | afterClose: false 20 | }; 21 | 22 | $.fn.niftyModal = function(method) { 23 | 24 | var config = {}; 25 | var modal = {}; 26 | 27 | var helpers = { 28 | 29 | removeModal: function( m ) { 30 | var mod = $( m ); 31 | mod.removeClass( config.classAddAfterOpen ); 32 | mod.css({'perspective':'1300px'}); 33 | mod.trigger('hide'); 34 | }, 35 | showModal: function( m ){ 36 | var mod = $(m); 37 | var overlay = $(config.overlaySelector); 38 | var close = $(config.closeSelector, m); 39 | 40 | //beforeOpen event 41 | if( typeof config.beforeOpen === 'function' ){ 42 | if( config.beforeOpen( modal ) === false){ 43 | return false; 44 | } 45 | } 46 | 47 | //Make the modal visible 48 | mod.addClass(config.classAddAfterOpen, function( m ){ 49 | 50 | //After open event 51 | if( typeof config.afterOpen === 'function' ){ 52 | config.afterOpen( modal ); 53 | } 54 | }); 55 | 56 | //Overlay Click Event 57 | overlay.on('click', function ( e ) { 58 | 59 | modal.closeEl = overlay.get( 0 ); 60 | 61 | //Before close event 62 | if( typeof config.beforeClose === 'function' ){ 63 | if( config.beforeClose(modal, e) === false ){ 64 | return false; 65 | } 66 | } 67 | 68 | helpers.removeModal(m); 69 | overlay.off('click'); 70 | close.off('click'); 71 | 72 | //After close event 73 | if( typeof config.afterClose === 'function' ){ 74 | config.afterClose(modal, e); 75 | } 76 | 77 | }); 78 | 79 | setTimeout( function() { 80 | mod.css({'perspective':'none'}); 81 | 82 | //3D Blur Bug Fix 83 | if( mod.height() % 2 !== 0){ 84 | mod.css({ 'height' : mod.height() + 1 }); 85 | } 86 | 87 | }, 500 ); 88 | 89 | //Close Event 90 | close.on( 'click', function( ev ) { 91 | var btn = $(this); 92 | modal.closeEl = close.get( 0 ); 93 | 94 | //Before close event 95 | if( typeof config.beforeClose === 'function' ){ 96 | if( config.beforeClose(modal, ev) === false ){ 97 | return false; 98 | } 99 | } 100 | 101 | //Buttons callback 102 | if( config.buttons && $.isArray( config.buttons ) ){ 103 | var cancel = true; 104 | 105 | $.each(config.buttons, function( i, v){ 106 | if( btn.hasClass( v.class ) && typeof v.callback === 'function' ){ 107 | cancel = v.callback( btn.get( 0 ), modal, ev); 108 | } 109 | }); 110 | 111 | if( cancel === false && typeof cancel !== undefined ){ 112 | return false; 113 | } 114 | } 115 | 116 | helpers.removeModal( m ); 117 | close.off('click'); 118 | 119 | //After close event 120 | if( typeof config.afterClose === 'function' ){ 121 | config.afterClose( modal, ev); 122 | } 123 | 124 | ev.stopPropagation(); 125 | }); 126 | 127 | mod.trigger('show'); 128 | } 129 | 130 | }; 131 | 132 | var methods = { 133 | 134 | init : function( options ) { 135 | 136 | return this.each(function() { 137 | config = $.extend({}, defaults, options); 138 | 139 | modal.modalEl = this; 140 | 141 | if( config.data !== false ){ 142 | modal.data = options.data; 143 | } 144 | 145 | //Show modal 146 | helpers.showModal( this ); 147 | }); 148 | 149 | }, 150 | toggle: function(options) { 151 | return this.each(function() { 152 | config = $.extend({}, defaults, options); 153 | var modal = $(this); 154 | if(modal.hasClass(config.classAddAfterOpen)){ 155 | helpers.removeModal(modal); 156 | }else{ 157 | helpers.showModal(modal); 158 | } 159 | }); 160 | }, 161 | show: function(options) { 162 | config = $.extend({}, defaults, options); 163 | return this.each(function() { 164 | 165 | var mod = $( this ); 166 | 167 | //Show the modal 168 | helpers.showModal( mod ); 169 | 170 | }); 171 | }, 172 | hide: function(options) { 173 | config = $.extend({}, defaults, options); 174 | return this.each(function() { 175 | helpers.removeModal($(this)); 176 | }); 177 | }, 178 | setDefaults: function( options ) { 179 | defaults = $.extend({}, defaults, options); 180 | }, 181 | getDefaults: function( ) { 182 | return defaults; 183 | } 184 | }; 185 | 186 | if (methods[method]) { 187 | return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 188 | } else if (typeof method === 'object' || !method) { 189 | return methods.init.apply(this, arguments); 190 | } else { 191 | $.error( 'Method "' + method + '" does not exist in niftyModal plugin!'); 192 | } 193 | 194 | }; 195 | 196 | })(jQuery); 197 | 198 | /** 199 | * Self execute to support previous versions with 'md-trigger' class & data-modal attribute 200 | */ 201 | 202 | $('.md-trigger').on('click',function(){ 203 | var modal = $(this).data('modal'); 204 | $("#" + modal).niftyModal(); 205 | }); -------------------------------------------------------------------------------- /模态框插件/dist/jquery.niftymodals.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jquery.niftymodals v1.1.1 (https://github.com/foxythemes/jquery-niftymodals) 3 | * Copyright 2016 Codrops and Foxy Themes 4 | * Licensed under Codrops license http://tympanus.net/codrops/licensing/ 5 | */.md-perspective,.md-perspective body{height:100%;overflow:hidden}.md-perspective body{background:#222;-webkit-perspective:600px;-moz-perspective:600px;perspective:600px}.md-container{position:fixed;top:50%;left:50%;width:50%;max-width:630px;min-width:320px;height:auto;z-index:2000;visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.md-show{visibility:visible}.md-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:1000;opacity:0;background:rgba(0,0,0,.5);-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show~.md-overlay{opacity:1;visibility:visible}.md-content{color:#fff;background:#e74c3c;position:relative;border-radius:3px;margin:0 auto}.md-content h3{margin:0;padding:.4em;text-align:center;font-size:2.4em;font-weight:300;opacity:.8;background:rgba(0,0,0,.1);border-radius:3px 3px 0 0}.md-content>div{padding:15px 40px 30px;margin:0;font-weight:300;font-size:1.15em}.md-content>div p{margin:0;padding:10px 0}.md-content>div ul{margin:0;padding:0 0 30px 20px}.md-content>div ul li{padding:5px 0}.md-content button{display:block;margin:0 auto;font-size:.8em}.md-effect-1 .md-content{-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-1 .md-content{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.md-effect-2 .md-content{-webkit-transform:translateX(20%);-moz-transform:translateX(20%);-ms-transform:translateX(20%);transform:translateX(20%);opacity:0;-webkit-transition:all .3s cubic-bezier(.25,.5,.5,.9);-moz-transition:all .3s cubic-bezier(.25,.5,.5,.9);transition:all .3s cubic-bezier(.25,.5,.5,.9)}.md-effect-3 .md-content,.md-effect-7 .md-content{-webkit-transition:all .3s;-moz-transition:all .3s}.md-show.md-effect-2 .md-content{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1}.md-effect-3 .md-content{-webkit-transform:translateY(20%);-moz-transform:translateY(20%);-ms-transform:translateY(20%);transform:translateY(20%);opacity:0;transition:all .3s}.md-show.md-effect-3 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.md-effect-4 .md-content{-webkit-transform:scale(0) rotate(720deg);-moz-transform:scale(0) rotate(720deg);-ms-transform:scale(0) rotate(720deg);transform:scale(0) rotate(720deg);opacity:0}.md-effect-4 .md-content,.md-show.md-effect-4~.md-overlay{-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s}.md-show.md-effect-4 .md-content{-webkit-transform:scale(1) rotate(0);-moz-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);opacity:1}.md-effect-5.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-5 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(600px) rotateX(20deg);-moz-transform:translateZ(600px) rotateX(20deg);-ms-transform:translateZ(600px) rotateX(20deg);transform:translateZ(600px) rotateX(20deg);opacity:0}.md-show.md-effect-5 .md-content{-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in;-webkit-transform:translateZ(0) rotateX(0);-moz-transform:translateZ(0) rotateX(0);-ms-transform:translateZ(0) rotateX(0);transform:translateZ(0) rotateX(0);opacity:1}.md-effect-6.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-6 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translate(30%) translateZ(600px) rotate(10deg);-moz-transform:translate(30%) translateZ(600px) rotate(10deg);-ms-transform:translate(30%) translateZ(600px) rotate(10deg);transform:translate(30%) translateZ(600px) rotate(10deg);opacity:0}.md-show.md-effect-6 .md-content{-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in;-webkit-transform:translate(0) translateZ(0) rotate(0);-moz-transform:translate(0) translateZ(0) rotate(0);-ms-transform:translate(0) translateZ(0) rotate(0);transform:translate(0) translateZ(0) rotate(0);opacity:1}.md-effect-7{top:0;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.md-effect-7 .md-content{-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);transition:all .3s;opacity:0}.md-effect-8 .md-content,.md-effect-9 .md-content{-webkit-transition:all .3s;-moz-transition:all .3s}.md-show.md-effect-7 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);border-radius:0 0 3px 3px;opacity:1}.md-effect-8.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-8 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-70deg);-moz-transform:rotateY(-70deg);-ms-transform:rotateY(-70deg);transform:rotateY(-70deg);transition:all .3s;opacity:0}.md-show.md-effect-8 .md-content{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0);opacity:1}.md-effect-9.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-9 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-70deg);-moz-transform:rotateX(-70deg);-ms-transform:rotateX(-70deg);transform:rotateX(-70deg);transition:all .3s;opacity:0}.md-show.md-effect-9 .md-content{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0);opacity:1}.md-effect-10.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-10 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-60deg);-moz-transform:rotateX(-60deg);-ms-transform:rotateX(-60deg);transform:rotateX(-60deg);-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0;opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-10 .md-content{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0);opacity:1}.md-effect-11 .md-content{-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-11 .md-content{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.md-effect-12 .md-content{-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-12~.md-overlay{background:#000}.md-show.md-effect-12 .md-content{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.md-effect-13.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-13 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-3000px) rotateY(90deg);-moz-transform:translateZ(-3000px) rotateY(90deg);-ms-transform:translateZ(-3000px) rotateY(90deg);transform:translateZ(-3000px) rotateY(90deg);opacity:0}.md-show.md-effect-13 .md-content{-webkit-animation:slit .7s forwards ease-out;-moz-animation:slit .7s forwards ease-out;animation:slit .7s forwards ease-out}@-webkit-keyframes slit{50%{-webkit-transform:translateZ(-250px) rotateY(89deg);opacity:.5;-webkit-animation-timing-function:ease-out}100%{-webkit-transform:translateZ(0) rotateY(0);opacity:1}}@-moz-keyframes slit{50%{-moz-transform:translateZ(-250px) rotateY(89deg);opacity:.5;-moz-animation-timing-function:ease-out}100%{-moz-transform:translateZ(0) rotateY(0);opacity:1}}@keyframes slit{50%{transform:translateZ(-250px) rotateY(89deg);opacity:1;animation-timing-function:ease-in}100%{transform:translateZ(0) rotateY(0);opacity:1}}.md-effect-14.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-14 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateY(100%) rotateX(90deg);-moz-transform:translateY(100%) rotateX(90deg);-ms-transform:translateY(100%) rotateX(90deg);transform:translateY(100%) rotateX(90deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;transform-origin:0 100%;opacity:0;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out}.md-show.md-effect-14 .md-content{-webkit-transform:translateY(0) rotateX(0);-moz-transform:translateY(0) rotateX(0);-ms-transform:translateY(0) rotateX(0);transform:translateY(0) rotateX(0);opacity:1}.md-effect-15.md-container{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}.md-effect-15 .md-content{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(100px) translateX(-30%) rotateY(90deg);-moz-transform:translateZ(100px) translateX(-30%) rotateY(90deg);-ms-transform:translateZ(100px) translateX(-30%) rotateY(90deg);transform:translateZ(100px) translateX(-30%) rotateY(90deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;transform-origin:0 100%;opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-15 .md-content{-webkit-transform:translateZ(0) translateX(0) rotateY(0);-moz-transform:translateZ(0) translateX(0) rotateY(0);-ms-transform:translateZ(0) translateX(0) rotateY(0);transform:translateZ(0) translateX(0) rotateY(0);opacity:1}.md-show.md-effect-16~.md-overlay{background:rgba(180,46,32,.5)}.md-show.md-effect-16~.container{-webkit-filter:blur(3px);-moz-filter:blur(3px);filter:blur(3px)}.md-effect-16 .md-content{-webkit-transform:translateY(-5%);-moz-transform:translateY(-5%);-ms-transform:translateY(-5%);transform:translateY(-5%);opacity:0}.md-effect-16 .md-content,.md-show.md-effect-16~.container{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.md-show.md-effect-16 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.md-show.md-effect-17~.container{height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;-moz-transition:-moz-transform .3s;transition:transform .3s}.md-show.md-effect-17~.container,.md-show.md-effect-17~.md-overlay{-webkit-transform:rotateX(-2deg);-moz-transform:rotateX(-2deg);-ms-transform:rotateX(-2deg);transform:rotateX(-2deg);-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.md-effect-17 .md-content{opacity:0;-webkit-transform:translateY(200%);-moz-transform:translateY(200%);-ms-transform:translateY(200%);transform:translateY(200%)}.md-show.md-effect-17 .md-content{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all .3s .2s;-moz-transition:all .3s .2s;transition:all .3s .2s}.md-show.md-effect-18~.container{height:100%;overflow:hidden}.md-show.md-effect-18~.md-overlay{background:rgba(143,27,15,.8);-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s}.md-show.md-effect-18~.container,.md-show.md-effect-18~.md-overlay{-webkit-transform-style:preserve-3d;-webkit-transform-origin:0 50%;-webkit-animation:rotateRightSideFirst .5s forwards ease-in;-moz-transform-style:preserve-3d;-moz-transform-origin:0 50%;-moz-animation:rotateRightSideFirst .5s forwards ease-in;transform-style:preserve-3d;transform-origin:0 50%;animation:rotateRightSideFirst .5s forwards ease-in}@-webkit-keyframes rotateRightSideFirst{50%{-webkit-transform:translateZ(-50px) rotateY(5deg);-webkit-animation-timing-function:ease-out}100%{-webkit-transform:translateZ(-200px)}}@-moz-keyframes rotateRightSideFirst{50%{-moz-transform:translateZ(-50px) rotateY(5deg);-moz-animation-timing-function:ease-out}100%{-moz-transform:translateZ(-200px)}}@keyframes rotateRightSideFirst{50%{transform:translateZ(-50px) rotateY(5deg);animation-timing-function:ease-out}100%{transform:translateZ(-200px)}}.md-effect-18 .md-content{-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);transform:translateX(200%);opacity:0}.md-show.md-effect-18 .md-content{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;-webkit-transition:all .5s .1s;-moz-transition:all .5s .1s;transition:all .5s .1s} -------------------------------------------------------------------------------- /模态框插件/dist/jquery.niftymodals.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jquery.niftymodals v1.1.1 (https://github.com/foxythemes/jquery-niftymodals) 3 | * Copyright 2016 Codrops and Foxy Themes 4 | * Licensed under Codrops license http://tympanus.net/codrops/licensing/ 5 | */ 6 | 7 | !function(a){"use strict";var b={overlaySelector:".md-overlay",closeSelector:".md-close",classAddAfterOpen:"md-show",data:!1,buttons:!1,beforeOpen:!1,afterOpen:!1,beforeClose:!1,afterClose:!1};a.fn.niftyModal=function(c){var d={},e={},f={removeModal:function(b){var c=a(b);c.removeClass(d.classAddAfterOpen),c.css({perspective:"1300px"}),c.trigger("hide")},showModal:function(b){var c=a(b),g=a(d.overlaySelector),h=a(d.closeSelector,b);return("function"!=typeof d.beforeOpen||d.beforeOpen(e)!==!1)&&(c.addClass(d.classAddAfterOpen,function(a){"function"==typeof d.afterOpen&&d.afterOpen(e)}),g.on("click",function(a){return e.closeEl=g.get(0),("function"!=typeof d.beforeClose||d.beforeClose(e,a)!==!1)&&(f.removeModal(b),g.off("click"),h.off("click"),void("function"==typeof d.afterClose&&d.afterClose(e,a)))}),setTimeout(function(){c.css({perspective:"none"}),c.height()%2!==0&&c.css({height:c.height()+1})},500),h.on("click",function(c){var g=a(this);if(e.closeEl=h.get(0),"function"==typeof d.beforeClose&&d.beforeClose(e,c)===!1)return!1;if(d.buttons&&a.isArray(d.buttons)){var i=!0;if(a.each(d.buttons,function(a,b){g.hasClass(b.class)&&"function"==typeof b.callback&&(i=b.callback(g.get(0),e,c))}),i===!1&&void 0!==typeof i)return!1}f.removeModal(b),h.off("click"),"function"==typeof d.afterClose&&d.afterClose(e,c),c.stopPropagation()}),void c.trigger("show"))}},g={init:function(c){return this.each(function(){d=a.extend({},b,c),e.modalEl=this,d.data!==!1&&(e.data=c.data),f.showModal(this)})},toggle:function(c){return this.each(function(){d=a.extend({},b,c);var e=a(this);e.hasClass(d.classAddAfterOpen)?f.removeModal(e):f.showModal(e)})},show:function(c){return d=a.extend({},b,c),this.each(function(){var b=a(this);f.showModal(b)})},hide:function(c){return d=a.extend({},b,c),this.each(function(){f.removeModal(a(this))})},setDefaults:function(c){b=a.extend({},b,c)},getDefaults:function(){return b}};return g[c]?g[c].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof c&&c?void a.error('Method "'+c+'" does not exist in niftyModal plugin!'):g.init.apply(this,arguments)}}(jQuery),$(".md-trigger").on("click",function(){var a=$(this).data("modal");$("#"+a).niftyModal()}); -------------------------------------------------------------------------------- /模态框插件/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | jQuery+CSS3过渡动画模态窗口特效 - 站长素材 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

There are many possibilities for modal overlays to appear. Here are some modern ways of showing them using CSS transitions and animations.

18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 |
43 | 44 | 58 | 72 | 86 | 100 | 114 | 128 | 142 | 156 | 170 | 184 | 198 | 212 | 226 | 240 | 254 | 268 | 282 | 296 | 310 | 324 |
325 | 326 | 327 | 328 | 339 | 343 | 344 | 345 | 346 | 347 |
348 |

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

349 |

来源：站长素材

350 |
351 | 352 | -------------------------------------------------------------------------------- /模态框插件/lib/demo.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 4 | body, html { font-size: 100%; padding: 0; margin: 0; } 5 | 6 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 7 | .clearfix:before, .clearfix:after { content: " "; display: table; } 8 | .clearfix:after { clear: both; } 9 | 10 | body { 11 | font-family: 'Lato', Calibri, Arial, sans-serif; 12 | color: #fff; 13 | background: #3598db; 14 | } 15 | 16 | a { 17 | color: #D5D6E2; 18 | text-decoration: none; 19 | } 20 | 21 | a:hover, 22 | a:active { 23 | color: #333; 24 | } 25 | 26 | /* Header Style */ 27 | .main, 28 | .container > header { 29 | margin: 0 auto; 30 | padding: 2em; 31 | } 32 | 33 | .container > header { 34 | text-align: center; 35 | background: #d94839; 36 | padding: 3em; 37 | } 38 | 39 | .container > header h1 { 40 | font-size: 2.625em; 41 | line-height: 1.3; 42 | margin: 0; 43 | font-weight: 300; 44 | } 45 | 46 | .container > header span { 47 | display: block; 48 | font-size: 60%; 49 | opacity: 0.7; 50 | padding: 0 0 0.6em 0.1em; 51 | } 52 | 53 | /* Main Content */ 54 | .main { 55 | max-width: 69em; 56 | } 57 | 58 | .column { 59 | float: left; 60 | width: 50%; 61 | padding: 0 2em; 62 | min-height: 300px; 63 | position: relative; 64 | } 65 | 66 | .column:nth-child(2) { 67 | box-shadow: -1px 0 0 rgba(0,0,0,0.1); 68 | } 69 | 70 | .column p { 71 | font-weight: 300; 72 | font-size: 2em; 73 | padding: 0; 74 | margin: 0; 75 | text-align: right; 76 | line-height: 1.5; 77 | } 78 | 79 | button { 80 | border: none; 81 | padding: 0.6em 1.2em; 82 | background: #297fb8; 83 | color: #fff; 84 | font-family: 'Lato', Calibri, Arial, sans-serif; 85 | font-size: 1em; 86 | letter-spacing: 1px; 87 | text-transform: uppercase; 88 | cursor: pointer; 89 | display: inline-block; 90 | margin: 3px 2px; 91 | border-radius: 2px; 92 | } 93 | 94 | button:hover { 95 | background: #0f5d91; 96 | } 97 | 98 | @media screen and (max-width: 46.0625em) { 99 | .column { 100 | width: 100%; 101 | min-width: auto; 102 | min-height: auto; 103 | padding: 1em; 104 | } 105 | 106 | .column p { 107 | text-align: left; 108 | font-size: 1.5em; 109 | } 110 | 111 | .column:nth-child(2) { 112 | box-shadow: 0 -1px 0 rgba(0,0,0,0.1); 113 | } 114 | } 115 | 116 | 117 | .invisible { 118 | visibility: hidden; 119 | } 120 | 121 | .original, 122 | .info-download { 123 | border-radius: 3px 3px 3px 3px; 124 | box-shadow: 0 1px 3px -2px #FFFFFF inset; 125 | color: #FFFFFF !important; 126 | font-family: 'Open Sans',sans-serif; 127 | font-size: 12px; 128 | font-weight: 600; 129 | line-height: 30px; 130 | padding: 6px 10px; 131 | text-shadow: 0 0 1px #333333; 132 | text-transform: uppercase; 133 | transition: all 0.4s linear 0s; 134 | vertical-align: middle; 135 | white-space: nowrap; 136 | border: 5px solid #444; 137 | } 138 | 139 | .original { 140 | background: linear-gradient(to bottom, #6CBBE2 0%, #457991 100%) repeat scroll 0 0 transparent; 141 | } 142 | 143 | .info-download { 144 | background: linear-gradient(to bottom, #FFA84C 0%, #FF7B0D 100%) repeat scroll 0 0 transparent; 145 | } -------------------------------------------------------------------------------- /模态框插件/lib/fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/模态框插件/lib/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /模态框插件/lib/fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /模态框插件/lib/fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/模态框插件/lib/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /模态框插件/lib/fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/模态框插件/lib/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /模态框插件/lib/fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /浮动文字/css/default.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800); 2 | @font-face { 3 | font-family: 'icomoon'; 4 | src:url('../fonts/icomoon.eot?rretjt'); 5 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), 6 | url('../fonts/icomoon.woff?rretjt') format('woff'), 7 | url('../fonts/icomoon.ttf?rretjt') format('truetype'), 8 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | [class^="icon-"], [class*=" icon-"] { 14 | font-family: 'icomoon'; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | body, html { font-size: 100%; padding: 0; margin: 0;} 28 | 29 | /* Reset */ 30 | *, 31 | *:after, 32 | *:before { 33 | -webkit-box-sizing: border-box; 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | } 37 | 38 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 39 | .clearfix:before, 40 | .clearfix:after { 41 | content: " "; 42 | display: table; 43 | } 44 | 45 | .clearfix:after { 46 | clear: both; 47 | } 48 | 49 | body{ 50 | background: #f9f7f6; 51 | color: #404d5b; 52 | font-weight: 500; 53 | font-size: 1.05em; 54 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 55 | } 56 | a{color: #2fa0ec;text-decoration: none;outline: none;} 57 | a:hover,a:focus{color:#74777b;} 58 | 59 | .htmleaf-container{ 60 | margin: 0 auto; 61 | text-align: center; 62 | overflow: hidden; 63 | } 64 | .htmleaf-content { 65 | font-size: 150%; 66 | padding: 1em 0; 67 | } 68 | 69 | .htmleaf-content h2 { 70 | margin: 0 0 2em; 71 | opacity: 0.1; 72 | } 73 | 74 | .htmleaf-content p { 75 | margin: 1em 0; 76 | padding: 5em 0 0 0; 77 | font-size: 0.65em; 78 | } 79 | .bgcolor-1 { background: #f0efee; } 80 | .bgcolor-2 { background: #f9f9f9; } 81 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/ 82 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ 83 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ 84 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ 85 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/ 86 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ 87 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ 88 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ 89 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ 90 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ 91 | /* Header */ 92 | .htmleaf-header{ 93 | padding: 1em 190px 1em; 94 | letter-spacing: -1px; 95 | text-align: center; 96 | } 97 | .htmleaf-header h1 { 98 | color: #fff; 99 | font-weight: 600; 100 | font-size: 2em; 101 | line-height: 1; 102 | margin-bottom: 0; 103 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 104 | } 105 | .htmleaf-header h1 span { 106 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 107 | display: block; 108 | font-size: 60%; 109 | font-weight: 400; 110 | padding: 0.8em 0 0.5em 0; 111 | color: #c3c8cd; 112 | } 113 | /*nav*/ 114 | .htmleaf-demo a{color: #1d7db1;text-decoration: none;} 115 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} 116 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;} 117 | .htmleaf-demo a:hover{opacity: 0.6;} 118 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; } 119 | /* Top Navigation Style */ 120 | .htmleaf-links { 121 | position: relative; 122 | display: inline-block; 123 | white-space: nowrap; 124 | font-size: 1.5em; 125 | text-align: center; 126 | } 127 | 128 | .htmleaf-links::after { 129 | position: absolute; 130 | top: 0; 131 | left: 50%; 132 | margin-left: -1px; 133 | width: 2px; 134 | height: 100%; 135 | background: #dbdbdb; 136 | content: ''; 137 | -webkit-transform: rotate3d(0,0,1,22.5deg); 138 | transform: rotate3d(0,0,1,22.5deg); 139 | } 140 | 141 | .htmleaf-icon { 142 | display: inline-block; 143 | margin: 0.5em; 144 | padding: 0em 0; 145 | width: 1.5em; 146 | text-decoration: none; 147 | } 148 | 149 | .htmleaf-icon span { 150 | display: none; 151 | } 152 | 153 | .htmleaf-icon:before { 154 | margin: 0 5px; 155 | text-transform: none; 156 | font-weight: normal; 157 | font-style: normal; 158 | font-variant: normal; 159 | font-family: 'icomoon'; 160 | line-height: 1; 161 | speak: none; 162 | -webkit-font-smoothing: antialiased; 163 | } 164 | /* footer */ 165 | .htmleaf-footer{width: 100%;padding-top: 10px;} 166 | .htmleaf-small{font-size: 0.8em;} 167 | .center{text-align: center;} 168 | /****/ 169 | .related { 170 | color: #fff; 171 | background: #333; 172 | text-align: center; 173 | font-size: 1.25em; 174 | padding: 0.5em 0; 175 | overflow: hidden; 176 | } 177 | 178 | .related > a { 179 | vertical-align: top; 180 | width: calc(100% - 20px); 181 | max-width: 340px; 182 | display: inline-block; 183 | text-align: center; 184 | margin: 20px 10px; 185 | padding: 25px; 186 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 187 | } 188 | .related a { 189 | display: inline-block; 190 | text-align: left; 191 | margin: 20px auto; 192 | padding: 10px 20px; 193 | opacity: 0.8; 194 | -webkit-transition: opacity 0.3s; 195 | transition: opacity 0.3s; 196 | -webkit-backface-visibility: hidden; 197 | } 198 | 199 | .related a:hover, 200 | .related a:active { 201 | opacity: 1; 202 | } 203 | 204 | .related a img { 205 | max-width: 100%; 206 | opacity: 0.8; 207 | border-radius: 4px; 208 | } 209 | .related a:hover img, 210 | .related a:active img { 211 | opacity: 1; 212 | } 213 | .related h3{font-family: "Microsoft YaHei", sans-serif;} 214 | .related a h3 { 215 | font-weight: 300; 216 | margin-top: 0.15em; 217 | color: #fff; 218 | } 219 | /* icomoon */ 220 | .icon-htmleaf-home-outline:before { 221 | content: "\e5000"; 222 | } 223 | 224 | .icon-htmleaf-arrow-forward-outline:before { 225 | content: "\e5001"; 226 | } 227 | 228 | @media screen and (max-width: 50em) { 229 | .htmleaf-header { 230 | padding: 3em 10% 4em; 231 | } 232 | .htmleaf-header h1 { 233 | font-size:2em; 234 | } 235 | } 236 | 237 | 238 | @media screen and (max-width: 40em) { 239 | .htmleaf-header h1 { 240 | font-size: 1.5em; 241 | } 242 | } 243 | 244 | @media screen and (max-width: 30em) { 245 | .htmleaf-header h1 { 246 | font-size:1.2em; 247 | } 248 | } -------------------------------------------------------------------------------- /浮动文字/css/demo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | html, body { 3 | min-height: 450px; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000000); 9 | } 10 | 11 | .stage { 12 | height: 300px; 13 | width: 500px; 14 | margin: auto; 15 | position: absolute; 16 | top: 0; 17 | right: 0; 18 | bottom: 0; 19 | left: 0; 20 | perspective: 9999px; 21 | transform-style: preserve-3d; 22 | } 23 | 24 | .layer { 25 | width: 100%; 26 | height: 100%; 27 | position: absolute; 28 | transform-style: preserve-3d; 29 | opacity: 0; 30 | animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1; 31 | animation-fill-mode: forwards; 32 | transform: rotateY(40deg) rotateX(33deg) translateZ(0); 33 | } 34 | 35 | .layer:after { 36 | font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif; 37 | content: 'Pure\A css!'; 38 | white-space: pre; 39 | text-align: center; 40 | height: 100%; 41 | width: 100%; 42 | position: absolute; 43 | top: 50px; 44 | color: whitesmoke; 45 | letter-spacing: -2px; 46 | text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13); 47 | } 48 | 49 | .layer:nth-child(1):after { 50 | transform: translateZ(0px); 51 | } 52 | 53 | .layer:nth-child(2):after { 54 | transform: translateZ(-2px); 55 | } 56 | 57 | .layer:nth-child(3):after { 58 | transform: translateZ(-4px); 59 | } 60 | 61 | .layer:nth-child(4):after { 62 | transform: translateZ(-6px); 63 | } 64 | 65 | .layer:nth-child(5):after { 66 | transform: translateZ(-8px); 67 | } 68 | 69 | .layer:nth-child(6):after { 70 | transform: translateZ(-10px); 71 | } 72 | 73 | .layer:nth-child(7):after { 74 | transform: translateZ(-12px); 75 | } 76 | 77 | .layer:nth-child(8):after { 78 | transform: translateZ(-14px); 79 | } 80 | 81 | .layer:nth-child(9):after { 82 | transform: translateZ(-16px); 83 | } 84 | 85 | .layer:nth-child(10):after { 86 | transform: translateZ(-18px); 87 | } 88 | 89 | .layer:nth-child(11):after { 90 | transform: translateZ(-20px); 91 | } 92 | 93 | .layer:nth-child(12):after { 94 | transform: translateZ(-22px); 95 | } 96 | 97 | .layer:nth-child(13):after { 98 | transform: translateZ(-24px); 99 | } 100 | 101 | .layer:nth-child(14):after { 102 | transform: translateZ(-26px); 103 | } 104 | 105 | .layer:nth-child(15):after { 106 | transform: translateZ(-28px); 107 | } 108 | 109 | .layer:nth-child(16):after { 110 | transform: translateZ(-30px); 111 | } 112 | 113 | .layer:nth-child(17):after { 114 | transform: translateZ(-32px); 115 | } 116 | 117 | .layer:nth-child(18):after { 118 | transform: translateZ(-34px); 119 | } 120 | 121 | .layer:nth-child(19):after { 122 | transform: translateZ(-36px); 123 | } 124 | 125 | .layer:nth-child(20):after { 126 | transform: translateZ(-38px); 127 | } 128 | 129 | .layer:nth-child(n+10):after { 130 | -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25); 131 | } 132 | 133 | .layer:nth-child(n+11):after { 134 | -webkit-text-stroke: 15px dodgerblue; 135 | text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b; 136 | } 137 | 138 | .layer:nth-child(n+12):after { 139 | -webkit-text-stroke: 15px #0077ea; 140 | } 141 | 142 | .layer:last-child:after { 143 | -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1); 144 | } 145 | 146 | .layer:first-child:after { 147 | color: #fff; 148 | text-shadow: none; 149 | } 150 | 151 | @keyframes ಠ_ಠ { 152 | 100% { 153 | transform: rotateY(-40deg) rotateX(-43deg); 154 | } 155 | } 156 | @keyframes o_O { 157 | 100% { 158 | opacity: 1; 159 | } 160 | } -------------------------------------------------------------------------------- /浮动文字/css/reset.css: -------------------------------------------------------------------------------- 1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /浮动文字/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/浮动文字/fonts/icomoon.eot -------------------------------------------------------------------------------- /浮动文字/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /浮动文字/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/浮动文字/fonts/icomoon.ttf -------------------------------------------------------------------------------- /浮动文字/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/浮动文字/fonts/icomoon.woff -------------------------------------------------------------------------------- /浮动文字/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 纯CSS3浮雕质感的立体文字旋转动画DEMO演示 8 | 9 | 10 | 11 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /浮动文字/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 纯CSS3浮雕质感的立体文字旋转动画DEMO演示 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /滑动门/images/door1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/滑动门/images/door1.jpg -------------------------------------------------------------------------------- /滑动门/images/door2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/滑动门/images/door2.jpg -------------------------------------------------------------------------------- /滑动门/images/door3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/滑动门/images/door3.jpg -------------------------------------------------------------------------------- /滑动门/images/door4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/滑动门/images/door4.jpg -------------------------------------------------------------------------------- /滑动门/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 |
12 | 66666 13 | 77777 14 | 88888 15 | 99999 16 |
17 | 18 | -------------------------------------------------------------------------------- /滑动门/js/sliderdoor.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | // 获得容器对象 3 | var box = document.getElementById('container'); 4 | 5 | //获得图片对象集合 6 | var img = box.getElementsByTagName('img'); 7 | 8 | //获得单张图片的宽度 9 | var imgWidth = img[0].offsetWidth; 10 | 11 | //设置掩体门露出的宽度 12 | var exposeWidth = 200; 13 | 14 | //设置容器的总宽度 15 | var boxWidth = imgWidth + (img.length-1)*exposeWidth; 16 | box.style.width = boxWidth + 'px'; 17 | 18 | //每扇门移动的距离 19 | var translate = 0; 20 | 21 | //设置门的初始位置 22 | function setInitSet() { 23 | translate = imgWidth - exposeWidth; 24 | for (var i = 1; i < img.length; i++) { 25 | img[i].style.left = imgWidth + exposeWidth*(i-1) + 'px'; 26 | }; 27 | } 28 | setInitSet(); 29 | 30 | //响应事件 31 | for (var i = 0; i < img.length; i++) { 32 | //自动执行的方法 33 | (function (i) { 34 | img[i].onmouseover = function () { 35 | setInitSet(); 36 | for (var j = 1; j <= i; j++) { 37 | img[j].style.left = img[j].offsetLeft - translate + 'px'; 38 | }; 39 | } 40 | })(i); 41 | }; 42 | } -------------------------------------------------------------------------------- /滑动门/style/silderdoor.css: -------------------------------------------------------------------------------- 1 | #container{ 2 | height: 320px; 3 | margin: 0 auto; 4 | position: relative; 5 | overflow: hidden; 6 | border-bottom: 1px solid #f0f0f0; 7 | } 8 | #container img{ 9 | display: block; 10 | margin-top: 50px; 11 | width: 500px; 12 | left: 0; 13 | position: absolute; 14 | border: 1px solid #ccc; 15 | } -------------------------------------------------------------------------------- /火焰文字/css/style.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | margin : 0px; 3 | width : 100%; 4 | height : 100%; 5 | overflow: hidden; 6 | background-color: #000000; 7 | font-family: sans-serif; 8 | } 9 | 10 | #canvasContainer{ 11 | margin : 0px; 12 | width : 100%; 13 | height : 100%; 14 | } 15 | 16 | #textInputSpan{ 17 | position: absolute; 18 | color: #FFFFFF; 19 | font-family: sans-serif; 20 | } -------------------------------------------------------------------------------- /火焰文字/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML5火焰文字特效DEMO演示 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /纯CSS轮播图/img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/纯CSS轮播图/img/img1.jpg -------------------------------------------------------------------------------- /纯CSS轮播图/img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/纯CSS轮播图/img/img2.jpg -------------------------------------------------------------------------------- /纯CSS轮播图/img/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/纯CSS轮播图/img/img3.jpg -------------------------------------------------------------------------------- /纯CSS轮播图/img/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/纯CSS轮播图/img/img4.jpg -------------------------------------------------------------------------------- /纯CSS轮播图/img/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/纯CSS轮播图/img/img5.jpg -------------------------------------------------------------------------------- /纯CSS轮播图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 纯CSS实现预览轮播图 5 | 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /纯CSS轮播图/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .main { 6 | position: relative; 7 | width: 1200px; 8 | margin: 50px auto; 9 | border: solid 1px #ccc; 10 | } 11 | .imgs { 12 | position: relative; 13 | width: 100%; 14 | height: 600px; 15 | overflow: hidden; 16 | } 17 | .main a { 18 | display: block; 19 | width: 100%; 20 | height: 100%; 21 | } 22 | .imgs a:first-child{ 23 | animation: imgAnimate 18s linear infinite alternate; 24 | } 25 | .imgs:hover > .first-img, 26 | .imgs:hover + .controller .show-run { 27 | animation-play-state: paused; 28 | } 29 | .imgs a img { 30 | width: 100%; 31 | height: 100%; 32 | } 33 | .controller { 34 | position: absolute; 35 | top: 0px; 36 | right: 0px; 37 | left: 0px; 38 | bottom: 0px; 39 | width: 80%; 40 | height: 40px; 41 | margin: 0 auto; 42 | margin-top: 560px; 43 | } 44 | .controller .show-run { 45 | margin-bottom: -17px; 46 | height: 16px; 47 | width: 20%; 48 | background: #FDB024; 49 | animation: showAnimate 18s linear infinite alternate; 50 | } 51 | .controller .show-static { 52 | margin-bottom: -17px; 53 | height: 17px; 54 | width: 100%; 55 | background: #575757; 56 | } 57 | .controller a { 58 | display: block; 59 | box-sizing: border-box; 60 | float: left; 61 | width: 20%; 62 | height: 17px; 63 | margin: 0px; 64 | border: solid 1px #CCC; 65 | } 66 | .controller a img { 67 | display: none; 68 | box-sizing: border-box; 69 | width: 100%; 70 | height: 150px; 71 | margin-top: -160px; 72 | border: solid 1px #FDB024; 73 | } 74 | 75 | .controller a::after { 76 | position: relative; 77 | content: ""; 78 | display: none; 79 | margin-left: -20px; 80 | left: 50%; 81 | width: 10px; 82 | height: 0px; 83 | border-left:20px solid transparent; 84 | border-right:20px solid transparent; 85 | border-top: solid 10px #FDB024; 86 | } 87 | .controller-tag1:hover > img, 88 | .controller-tag1:hover::after{ 89 | display: block; 90 | } 91 | .controller-tag2:hover > img, 92 | .controller-tag2:hover::after{ 93 | display: block; 94 | } 95 | .controller-tag3:hover > img, 96 | .controller-tag3:hover::after{ 97 | display: block; 98 | } 99 | .controller-tag4:hover > img, 100 | .controller-tag4:hover::after{ 101 | display: block; 102 | } 103 | .controller-tag5:hover > img, 104 | .controller-tag5:hover::after{ 105 | display: block; 106 | } 107 | 108 | @keyframes imgAnimate 109 | { 110 | 0% { 111 | margin-top: 0px; 112 | } 113 | 11.11% { 114 | margin-top: 0px; 115 | } 116 | 22.22% { 117 | margin-top: -600px; 118 | } 119 | 33.33% { 120 | margin-top: -600px; 121 | } 122 | 44.44% { 123 | margin-top: -1200px; 124 | } 125 | 55.55% { 126 | margin-top: -1200px; 127 | } 128 | 66.66% { 129 | margin-top: -1800px; 130 | } 131 | 77.77% { 132 | margin-top: -1800px; 133 | } 134 | 88.88% { 135 | margin-top: -2400px; 136 | } 137 | 100% { 138 | margin-top: -2400px; 139 | } 140 | } 141 | 142 | @keyframes showAnimate 143 | { 144 | 0% { 145 | margin-left: 0px; 146 | } 147 | 11.11% { 148 | margin-left: 0px; 149 | } 150 | 22.22% { 151 | margin-left: 20%; 152 | } 153 | 33.33% { 154 | margin-left: 20%; 155 | } 156 | 44.44% { 157 | margin-left: 40%; 158 | } 159 | 55.55% { 160 | margin-left: 40%; 161 | } 162 | 66.66% { 163 | margin-left: 60%; 164 | } 165 | 77.77% { 166 | margin-left: 60%; 167 | } 168 | 88.88% { 169 | margin-left: 80%; 170 | } 171 | 100% { 172 | margin-left: 80%; 173 | } 174 | } 175 | 176 | -------------------------------------------------------------------------------- /错误页面/css/error.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | margin: 0px; 4 | width: 100%; 5 | height: 100%; 6 | /*overflow: hidden;*/ 7 | font-family:arial; 8 | color:#77C0FD; 9 | } 10 | #canvas { 11 | width: 100%; 12 | height: 100%; 13 | overflow: hidden; 14 | position: fixed; 15 | background: #09192A; 16 | } 17 | .canvas-wrap { 18 | position: relative; 19 | height: 100%; 20 | } 21 | .canvas-wrap.canvas-content{ 22 | position:relative; 23 | z-index:2000; 24 | color:#fff; 25 | text-align:center; 26 | padding-top:30px; 27 | } 28 | #errorInfo { 29 | position: absolute; 30 | left: 50%; 31 | margin-left: -200px; 32 | margin-top: 150px; 33 | z-index: 99999; 34 | width: 400px; 35 | height: 300px; 36 | border: solid 1px #77C0FD; 37 | box-shadow: 0 0 5px 0 #77C0FD; 38 | } 39 | #errorInfo-bottom { 40 | position: absolute; 41 | margin-top: 470px; 42 | left: 50%; 43 | margin-left: -250px; 44 | width: 500px; 45 | height: 30px; 46 | z-index: 99999; 47 | border: solid 1px #77C0FD; 48 | border-bottom-left-radius: 50px; 49 | border-bottom-right-radius: 50px; 50 | box-shadow: 0 0 5px 0 #77C0FD; 51 | } 52 | #errorInfo-inner { 53 | position: absolute; 54 | left: 50%; 55 | margin-left: -190px; 56 | margin-top: 10px; 57 | z-index: 99999; 58 | width: 380px; 59 | height: 280px; 60 | border: solid 1px #77C0FD; 61 | box-shadow: 0 0 5px 0 #77C0FD; 62 | border-radius: 10px; 63 | } 64 | #errorInfo-inner p { 65 | width: 280px; 66 | margin: 40px auto; 67 | padding: 30px; 68 | font-size: 25px; 69 | } 70 | #error-bottom { 71 | position: fixed; 72 | left: 50%; 73 | margin-left: -88px; 74 | bottom: 10px; 75 | z-index: 99999; 76 | } 77 | #errorInfo-inner p a{ 78 | display: block; 79 | text-decoration: none; 80 | font-size: 80px; 81 | color:#77C0FD; 82 | -webkit-animation: neon6 1.5s ease-in-out infinite alternate; 83 | -moz-animation: neon6 1.5s ease-in-out infinite alternate; 84 | animation: neon6 1.5s ease-in-out infinite alternate; 85 | } 86 | #errorInfo-inner p a:hover{ 87 | -webkit-animation: neon1 1.5s ease-in-out infinite alternate; 88 | -moz-animation: neon1 1.5s ease-in-out infinite alternate; 89 | animation: neon1 1.5s ease-in-out infinite alternate; 90 | color: #191970; 91 | } 92 | 93 | @-moz-keyframes neon1 { 94 | from { 95 | text-shadow: 0 0 10px #fff, 96 | 0 0 20px #fff, 97 | 0 0 30px #fff, 98 | 0 0 40px #FF1177, 99 | 0 0 70px #FF1177, 100 | 0 0 80px #FF1177, 101 | 0 0 100px #FF1177, 102 | 0 0 150px #FF1177; 103 | } 104 | to { 105 | text-shadow: 0 0 5px #fff, 106 | 0 0 10px #fff, 107 | 0 0 15px #fff, 108 | 0 0 20px #FF1177, 109 | 0 0 35px #FF1177, 110 | 0 0 40px #FF1177, 111 | 0 0 50px #FF1177, 112 | 0 0 75px #FF1177; 113 | } 114 | } 115 | @-webkit-keyframes neon1 { 116 | from { 117 | text-shadow: 0 0 10px #fff, 118 | 0 0 20px #fff, 119 | 0 0 30px #fff, 120 | 0 0 40px #FF1177, 121 | 0 0 70px #FF1177, 122 | 0 0 80px #FF1177, 123 | 0 0 100px #FF1177, 124 | 0 0 150px #FF1177; 125 | } 126 | to { 127 | text-shadow: 0 0 5px #fff, 128 | 0 0 10px #fff, 129 | 0 0 15px #fff, 130 | 0 0 20px #FF1177, 131 | 0 0 35px #FF1177, 132 | 0 0 40px #FF1177, 133 | 0 0 50px #FF1177, 134 | 0 0 75px #FF1177; 135 | } 136 | } 137 | @keyframes neon1 { 138 | from { 139 | text-shadow: 0 0 10px #fff, 140 | 0 0 20px #fff, 141 | 0 0 30px #fff, 142 | 0 0 40px #FF1177, 143 | 0 0 70px #FF1177, 144 | 0 0 80px #FF1177, 145 | 0 0 100px #FF1177, 146 | 0 0 150px #FF1177; 147 | } 148 | to { 149 | text-shadow: 0 0 5px #fff, 150 | 0 0 10px #fff, 151 | 0 0 15px #fff, 152 | 0 0 20px #FF1177, 153 | 0 0 35px #FF1177, 154 | 0 0 40px #FF1177, 155 | 0 0 50px #FF1177, 156 | 0 0 75px #FF1177; 157 | } 158 | } 159 | @-moz-keyframes neon6 { 160 | from { 161 | text-shadow: 0 0 10px #fff, 162 | 0 0 20px #fff, 163 | 0 0 30px #fff, 164 | 0 0 40px #228DFF, 165 | 0 0 70px #228DFF, 166 | 0 0 80px #228DFF, 167 | 0 0 100px #228DFF, 168 | 0 0 150px #228DFF; 169 | } 170 | to { 171 | color: #191970; 172 | text-shadow: 0 0 5px #fff, 173 | 0 0 10px #fff, 174 | 0 0 15px #fff, 175 | 0 0 20px #228DFF, 176 | 0 0 35px #228DFF, 177 | 0 0 40px #228DFF, 178 | 0 0 50px #228DFF, 179 | 0 0 75px #228DFF; 180 | } 181 | } 182 | 183 | @-webkit-keyframes neon6 { 184 | from { 185 | text-shadow: 0 0 10px #fff, 186 | 0 0 20px #fff, 187 | 0 0 30px #fff, 188 | 0 0 40px #228DFF, 189 | 0 0 70px #228DFF, 190 | 0 0 80px #228DFF, 191 | 0 0 100px #228DFF, 192 | 0 0 150px #228DFF; 193 | } 194 | to { 195 | color: #191970; 196 | text-shadow: 0 0 5px #fff, 197 | 0 0 10px #fff, 198 | 0 0 15px #fff, 199 | 0 0 20px #228DFF, 200 | 0 0 35px #228DFF, 201 | 0 0 40px #228DFF, 202 | 0 0 50px #228DFF, 203 | 0 0 75px #228DFF; 204 | } 205 | } 206 | 207 | @keyframes neon6 { 208 | from { 209 | text-shadow: 0 0 10px #fff, 210 | 0 0 20px #fff, 211 | 0 0 30px #fff, 212 | 0 0 40px #228DFF, 213 | 0 0 70px #228DFF, 214 | 0 0 80px #228DFF, 215 | 0 0 100px #228DFF, 216 | 0 0 150px #228DFF; 217 | } 218 | to { 219 | color: #191970; 220 | text-shadow: 0 0 5px #fff, 221 | 0 0 10px #fff, 222 | 0 0 15px #fff, 223 | 0 0 20px #228DFF, 224 | 0 0 35px #228DFF, 225 | 0 0 40px #228DFF, 226 | 0 0 50px #228DFF, 227 | 0 0 75px #228DFF; 228 | } 229 | } 230 | -------------------------------------------------------------------------------- /错误页面/error.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 错误页面 8 | 9 | 10 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |

20 | You are luck to find this 21 | ERROR 22 | page!  Congratulation! 23 |

24 | 25 |
26 |
27 |
28 |
29 |
30 |
©Powered By W_littlewhite
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /错误页面/js/3d-lines-animation.js: -------------------------------------------------------------------------------- 1 | var mouseX = 0, mouseY = 0, 2 | 3 | windowHalfX = window.innerWidth / 2, 4 | windowHalfY = window.innerHeight / 2, 5 | 6 | SEPARATION = 200, 7 | AMOUNTX = 1, 8 | AMOUNTY = 1, 9 | 10 | camera, scene, renderer; 11 | 12 | init(); 13 | animate(); 14 | 15 | 16 | 17 | function init() { 18 | 19 | 20 | /* 21 | * Define variables 22 | */ 23 | var container, separation = 1000, amountX = 50, amountY = 50, color = 0x77C0FD, 24 | particles, particle; 25 | 26 | container = document.getElementById("canvas"); 27 | 28 | 29 | camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); 30 | camera.position.z = 100; 31 | 32 | scene = new THREE.Scene(); 33 | 34 | renderer = new THREE.CanvasRenderer({ alpha: true }); 35 | renderer.setPixelRatio( window.devicePixelRatio ); 36 | renderer.setClearColor( 0x000000, 0 ); // canvas background color 37 | renderer.setSize( window.innerWidth, window.innerHeight ); 38 | container.appendChild( renderer.domElement ); 39 | 40 | 41 | 42 | var PI2 = Math.PI * 2; 43 | var material = new THREE.SpriteCanvasMaterial( { 44 | 45 | color: color, 46 | opacity: 0.5, 47 | program: function ( context ) { 48 | 49 | context.beginPath(); 50 | context.arc( 0, 0, 0.5, 0, PI2, true ); 51 | context.fill(); 52 | 53 | } 54 | 55 | } ); 56 | 57 | var geometry = new THREE.Geometry(); 58 | 59 | /* 60 | * Number of particles 61 | */ 62 | for ( var i = 0; i < 150; i ++ ) { 63 | 64 | particle = new THREE.Sprite( material ); 65 | particle.position.x = Math.random() * 2 - 1; 66 | particle.position.y = Math.random() * 2 - 1; 67 | particle.position.z = Math.random() * 2 - 1; 68 | particle.position.normalize(); 69 | particle.position.multiplyScalar( Math.random() * 10 + 600 ); 70 | particle.scale.x = particle.scale.y = 5; 71 | 72 | scene.add( particle ); 73 | 74 | geometry.vertices.push( particle.position ); 75 | 76 | } 77 | 78 | /* 79 | * Lines 80 | */ 81 | 82 | var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: color, opacity: 0.2 } ) ); 83 | scene.add( line ); 84 | 85 | document.addEventListener( 'mousemove', onDocumentMouseMove, false ); 86 | document.addEventListener( 'touchstart', onDocumentTouchStart, false ); 87 | document.addEventListener( 'touchmove', onDocumentTouchMove, false ); 88 | 89 | // 90 | 91 | window.addEventListener( 'resize', onWindowResize, false ); 92 | 93 | } 94 | 95 | function onWindowResize() { 96 | 97 | windowHalfX = window.innerWidth / 2; 98 | windowHalfY = window.innerHeight / 2; 99 | 100 | camera.aspect = window.innerWidth / window.innerHeight; 101 | camera.updateProjectionMatrix(); 102 | 103 | renderer.setSize( window.innerWidth, window.innerHeight ); 104 | 105 | } 106 | 107 | // 108 | 109 | function onDocumentMouseMove(event) { 110 | 111 | mouseX = (event.clientX - windowHalfX) * 0.05; 112 | mouseY = (event.clientY - windowHalfY) * 0.2; 113 | 114 | } 115 | 116 | function onDocumentTouchStart( event ) { 117 | 118 | if ( event.touches.length > 1 ) { 119 | 120 | event.preventDefault(); 121 | 122 | mouseX = (event.touches[ 0 ].pageX - windowHalfX) * 0.7; 123 | mouseY = (event.touches[ 0 ].pageY - windowHalfY) * 0.7; 124 | 125 | } 126 | 127 | } 128 | 129 | function onDocumentTouchMove( event ) { 130 | 131 | if ( event.touches.length == 1 ) { 132 | 133 | event.preventDefault(); 134 | 135 | mouseX = event.touches[ 0 ].pageX - windowHalfX; 136 | mouseY = event.touches[ 0 ].pageY - windowHalfY; 137 | 138 | } 139 | 140 | } 141 | 142 | // 143 | 144 | function animate() { 145 | 146 | requestAnimationFrame( animate ); 147 | 148 | render(); 149 | 150 | } 151 | 152 | function render() { 153 | 154 | camera.position.x += ( mouseX - camera.position.x ) * 0.1; 155 | camera.position.y += ( - mouseY + 200 - camera.position.y ) * 0.05; 156 | camera.lookAt( scene.position ); 157 | 158 | renderer.render( scene, camera ); 159 | 160 | } -------------------------------------------------------------------------------- /闪光文字/css/style.css: -------------------------------------------------------------------------------- 1 | /*setup*/ 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body{ 8 | background-color: #222222; 9 | } 10 | 11 | #container{ 12 | width:500px; 13 | margin:auto; 14 | } 15 | 16 | 17 | /*neeeeoooon*/ 18 | p{ 19 | text-align:center; 20 | font-size:7em; 21 | margin:20px 0 20px 0; 22 | } 23 | 24 | a{ 25 | text-decoration:none; 26 | -webkit-transition: all 0.5s; 27 | -moz-transition: all 0.5s; 28 | transition: all 0.5s; 29 | } 30 | 31 | p:nth-child(1) a{ 32 | color:#FF1177; 33 | font-family:Monoton; 34 | } 35 | p:nth-child(1) a:hover{ 36 | -webkit-animation: neon1 1.5s ease-in-out infinite alternate; 37 | -moz-animation: neon1 1.5s ease-in-out infinite alternate; 38 | animation: neon1 1.5s ease-in-out infinite alternate; 39 | } 40 | 41 | p:nth-child(2) a{ 42 | font-size:1.5em; 43 | color:#228DFF; 44 | font-family:Iceland; 45 | } 46 | p:nth-child(2) a:hover{ 47 | -webkit-animation: neon2 1.5s ease-in-out infinite alternate; 48 | -moz-animation: neon2 1.5s ease-in-out infinite alternate; 49 | animation: neon2 1.5s ease-in-out infinite alternate; 50 | } 51 | 52 | p:nth-child(3) a{ 53 | color:#FFDD1B; 54 | font-family:Pacifico; 55 | } 56 | p:nth-child(3) a:hover{ 57 | -webkit-animation: neon3 1.5s ease-in-out infinite alternate; 58 | -moz-animation: neon3 1.5s ease-in-out infinite alternate; 59 | animation: neon3 1.5s ease-in-out infinite alternate; 60 | } 61 | 62 | p:nth-child(4) a{ 63 | color:#B6FF00; 64 | font-family:PressStart; 65 | font-size:0.8em; 66 | } 67 | p:nth-child(4) a:hover{ 68 | -webkit-animation: neon4 1.5s ease-in-out infinite alternate; 69 | -moz-animation: neon4 1.5s ease-in-out infinite alternate; 70 | animation: neon4 1.5s ease-in-out infinite alternate; 71 | } 72 | 73 | p:nth-child(5) a{ 74 | color:#FF9900; 75 | font-family:Audiowide; 76 | } 77 | p:nth-child(5) a:hover{ 78 | -webkit-animation: neon5 1.5s ease-in-out infinite alternate; 79 | -moz-animation: neon5 1.5s ease-in-out infinite alternate; 80 | animation: neon5 1.5s ease-in-out infinite alternate; 81 | } 82 | 83 | p:nth-child(6) a{ 84 | color:#BA01FF; 85 | font-family:Vampiro One; 86 | } 87 | p:nth-child(6) a:hover{ 88 | -webkit-animation: neon6 1.5s ease-in-out infinite alternate; 89 | -moz-animation: neon6 1.5s ease-in-out infinite alternate; 90 | animation: neon6 1.5s ease-in-out infinite alternate; 91 | } 92 | 93 | p a:hover{ 94 | color:#ffffff; 95 | } 96 | 97 | 98 | 99 | /*glow for webkit*/ 100 | @-webkit-keyframes neon1 { 101 | from { 102 | text-shadow: 0 0 10px #fff, 103 | 0 0 20px #fff, 104 | 0 0 30px #fff, 105 | 0 0 40px #FF1177, 106 | 0 0 70px #FF1177, 107 | 0 0 80px #FF1177, 108 | 0 0 100px #FF1177, 109 | 0 0 150px #FF1177; 110 | } 111 | to { 112 | text-shadow: 0 0 5px #fff, 113 | 0 0 10px #fff, 114 | 0 0 15px #fff, 115 | 0 0 20px #FF1177, 116 | 0 0 35px #FF1177, 117 | 0 0 40px #FF1177, 118 | 0 0 50px #FF1177, 119 | 0 0 75px #FF1177; 120 | } 121 | } 122 | 123 | @-webkit-keyframes neon2 { 124 | from { 125 | text-shadow: 0 0 10px #fff, 126 | 0 0 20px #fff, 127 | 0 0 30px #fff, 128 | 0 0 40px #228DFF, 129 | 0 0 70px #228DFF, 130 | 0 0 80px #228DFF, 131 | 0 0 100px #228DFF, 132 | 0 0 150px #228DFF; 133 | } 134 | to { 135 | text-shadow: 0 0 5px #fff, 136 | 0 0 10px #fff, 137 | 0 0 15px #fff, 138 | 0 0 20px #228DFF, 139 | 0 0 35px #228DFF, 140 | 0 0 40px #228DFF, 141 | 0 0 50px #228DFF, 142 | 0 0 75px #228DFF; 143 | } 144 | } 145 | 146 | @-webkit-keyframes neon3 { 147 | from { 148 | text-shadow: 0 0 10px #fff, 149 | 0 0 20px #fff, 150 | 0 0 30px #fff, 151 | 0 0 40px #FFDD1B, 152 | 0 0 70px #FFDD1B, 153 | 0 0 80px #FFDD1B, 154 | 0 0 100px #FFDD1B, 155 | 0 0 150px #FFDD1B; 156 | } 157 | to { 158 | text-shadow: 0 0 5px #fff, 159 | 0 0 10px #fff, 160 | 0 0 15px #fff, 161 | 0 0 20px #FFDD1B, 162 | 0 0 35px #FFDD1B, 163 | 0 0 40px #FFDD1B, 164 | 0 0 50px #FFDD1B, 165 | 0 0 75px #FFDD1B; 166 | } 167 | } 168 | 169 | @-webkit-keyframes neon4 { 170 | from { 171 | text-shadow: 0 0 10px #fff, 172 | 0 0 20px #fff, 173 | 0 0 30px #fff, 174 | 0 0 40px #B6FF00, 175 | 0 0 70px #B6FF00, 176 | 0 0 80px #B6FF00, 177 | 0 0 100px #B6FF00, 178 | 0 0 150px #B6FF00; 179 | } 180 | to { 181 | text-shadow: 0 0 5px #fff, 182 | 0 0 10px #fff, 183 | 0 0 15px #fff, 184 | 0 0 20px #B6FF00, 185 | 0 0 35px #B6FF00, 186 | 0 0 40px #B6FF00, 187 | 0 0 50px #B6FF00, 188 | 0 0 75px #B6FF00; 189 | } 190 | } 191 | 192 | @-webkit-keyframes neon5 { 193 | from { 194 | text-shadow: 0 0 10px #fff, 195 | 0 0 20px #fff, 196 | 0 0 30px #fff, 197 | 0 0 40px #FF9900, 198 | 0 0 70px #FF9900, 199 | 0 0 80px #FF9900, 200 | 0 0 100px #FF9900, 201 | 0 0 150px #FF9900; 202 | } 203 | to { 204 | text-shadow: 0 0 5px #fff, 205 | 0 0 10px #fff, 206 | 0 0 15px #fff, 207 | 0 0 20px #FF9900, 208 | 0 0 35px #FF9900, 209 | 0 0 40px #FF9900, 210 | 0 0 50px #FF9900, 211 | 0 0 75px #FF9900; 212 | } 213 | } 214 | 215 | @-webkit-keyframes neon6 { 216 | from { 217 | text-shadow: 0 0 10px #fff, 218 | 0 0 20px #fff, 219 | 0 0 30px #fff, 220 | 0 0 40px #ff00de, 221 | 0 0 70px #ff00de, 222 | 0 0 80px #ff00de, 223 | 0 0 100px #ff00de, 224 | 0 0 150px #ff00de; 225 | } 226 | to { 227 | text-shadow: 0 0 5px #fff, 228 | 0 0 10px #fff, 229 | 0 0 15px #fff, 230 | 0 0 20px #ff00de, 231 | 0 0 35px #ff00de, 232 | 0 0 40px #ff00de, 233 | 0 0 50px #ff00de, 234 | 0 0 75px #ff00de; 235 | } 236 | } 237 | 238 | /*glow for mozilla*/ 239 | @-moz-keyframes neon1 { 240 | from { 241 | text-shadow: 0 0 10px #fff, 242 | 0 0 20px #fff, 243 | 0 0 30px #fff, 244 | 0 0 40px #FF1177, 245 | 0 0 70px #FF1177, 246 | 0 0 80px #FF1177, 247 | 0 0 100px #FF1177, 248 | 0 0 150px #FF1177; 249 | } 250 | to { 251 | text-shadow: 0 0 5px #fff, 252 | 0 0 10px #fff, 253 | 0 0 15px #fff, 254 | 0 0 20px #FF1177, 255 | 0 0 35px #FF1177, 256 | 0 0 40px #FF1177, 257 | 0 0 50px #FF1177, 258 | 0 0 75px #FF1177; 259 | } 260 | } 261 | 262 | @-moz-keyframes neon2 { 263 | from { 264 | text-shadow: 0 0 10px #fff, 265 | 0 0 20px #fff, 266 | 0 0 30px #fff, 267 | 0 0 40px #228DFF, 268 | 0 0 70px #228DFF, 269 | 0 0 80px #228DFF, 270 | 0 0 100px #228DFF, 271 | 0 0 150px #228DFF; 272 | } 273 | to { 274 | text-shadow: 0 0 5px #fff, 275 | 0 0 10px #fff, 276 | 0 0 15px #fff, 277 | 0 0 20px #228DFF, 278 | 0 0 35px #228DFF, 279 | 0 0 40px #228DFF, 280 | 0 0 50px #228DFF, 281 | 0 0 75px #228DFF; 282 | } 283 | } 284 | 285 | @-moz-keyframes neon3 { 286 | from { 287 | text-shadow: 0 0 10px #fff, 288 | 0 0 20px #fff, 289 | 0 0 30px #fff, 290 | 0 0 40px #FFDD1B, 291 | 0 0 70px #FFDD1B, 292 | 0 0 80px #FFDD1B, 293 | 0 0 100px #FFDD1B, 294 | 0 0 150px #FFDD1B; 295 | } 296 | to { 297 | text-shadow: 0 0 5px #fff, 298 | 0 0 10px #fff, 299 | 0 0 15px #fff, 300 | 0 0 20px #FFDD1B, 301 | 0 0 35px #FFDD1B, 302 | 0 0 40px #FFDD1B, 303 | 0 0 50px #FFDD1B, 304 | 0 0 75px #FFDD1B; 305 | } 306 | } 307 | 308 | @-moz-keyframes neon4 { 309 | from { 310 | text-shadow: 0 0 10px #fff, 311 | 0 0 20px #fff, 312 | 0 0 30px #fff, 313 | 0 0 40px #B6FF00, 314 | 0 0 70px #B6FF00, 315 | 0 0 80px #B6FF00, 316 | 0 0 100px #B6FF00, 317 | 0 0 150px #B6FF00; 318 | } 319 | to { 320 | text-shadow: 0 0 5px #fff, 321 | 0 0 10px #fff, 322 | 0 0 15px #fff, 323 | 0 0 20px #B6FF00, 324 | 0 0 35px #B6FF00, 325 | 0 0 40px #B6FF00, 326 | 0 0 50px #B6FF00, 327 | 0 0 75px #B6FF00; 328 | } 329 | } 330 | 331 | @-moz-keyframes neon5 { 332 | from { 333 | text-shadow: 0 0 10px #fff, 334 | 0 0 20px #fff, 335 | 0 0 30px #fff, 336 | 0 0 40px #FF9900, 337 | 0 0 70px #FF9900, 338 | 0 0 80px #FF9900, 339 | 0 0 100px #FF9900, 340 | 0 0 150px #FF9900; 341 | } 342 | to { 343 | text-shadow: 0 0 5px #fff, 344 | 0 0 10px #fff, 345 | 0 0 15px #fff, 346 | 0 0 20px #FF9900, 347 | 0 0 35px #FF9900, 348 | 0 0 40px #FF9900, 349 | 0 0 50px #FF9900, 350 | 0 0 75px #FF9900; 351 | } 352 | } 353 | 354 | @-moz-keyframes neon6 { 355 | from { 356 | text-shadow: 0 0 10px #fff, 357 | 0 0 20px #fff, 358 | 0 0 30px #fff, 359 | 0 0 40px #ff00de, 360 | 0 0 70px #ff00de, 361 | 0 0 80px #ff00de, 362 | 0 0 100px #ff00de, 363 | 0 0 150px #ff00de; 364 | } 365 | to { 366 | text-shadow: 0 0 5px #fff, 367 | 0 0 10px #fff, 368 | 0 0 15px #fff, 369 | 0 0 20px #ff00de, 370 | 0 0 35px #ff00de, 371 | 0 0 40px #ff00de, 372 | 0 0 50px #ff00de, 373 | 0 0 75px #ff00de; 374 | } 375 | } 376 | 377 | /*glow*/ 378 | @keyframes neon1 { 379 | from { 380 | text-shadow: 0 0 10px #fff, 381 | 0 0 20px #fff, 382 | 0 0 30px #fff, 383 | 0 0 40px #FF1177, 384 | 0 0 70px #FF1177, 385 | 0 0 80px #FF1177, 386 | 0 0 100px #FF1177, 387 | 0 0 150px #FF1177; 388 | } 389 | to { 390 | text-shadow: 0 0 5px #fff, 391 | 0 0 10px #fff, 392 | 0 0 15px #fff, 393 | 0 0 20px #FF1177, 394 | 0 0 35px #FF1177, 395 | 0 0 40px #FF1177, 396 | 0 0 50px #FF1177, 397 | 0 0 75px #FF1177; 398 | } 399 | } 400 | 401 | @keyframes neon2 { 402 | from { 403 | text-shadow: 0 0 10px #fff, 404 | 0 0 20px #fff, 405 | 0 0 30px #fff, 406 | 0 0 40px #228DFF, 407 | 0 0 70px #228DFF, 408 | 0 0 80px #228DFF, 409 | 0 0 100px #228DFF, 410 | 0 0 150px #228DFF; 411 | } 412 | to { 413 | text-shadow: 0 0 5px #fff, 414 | 0 0 10px #fff, 415 | 0 0 15px #fff, 416 | 0 0 20px #228DFF, 417 | 0 0 35px #228DFF, 418 | 0 0 40px #228DFF, 419 | 0 0 50px #228DFF, 420 | 0 0 75px #228DFF; 421 | } 422 | } 423 | 424 | @keyframes neon3 { 425 | from { 426 | text-shadow: 0 0 10px #fff, 427 | 0 0 20px #fff, 428 | 0 0 30px #fff, 429 | 0 0 40px #FFDD1B, 430 | 0 0 70px #FFDD1B, 431 | 0 0 80px #FFDD1B, 432 | 0 0 100px #FFDD1B, 433 | 0 0 150px #FFDD1B; 434 | } 435 | to { 436 | text-shadow: 0 0 5px #fff, 437 | 0 0 10px #fff, 438 | 0 0 15px #fff, 439 | 0 0 20px #FFDD1B, 440 | 0 0 35px #FFDD1B, 441 | 0 0 40px #FFDD1B, 442 | 0 0 50px #FFDD1B, 443 | 0 0 75px #FFDD1B; 444 | } 445 | } 446 | 447 | @keyframes neon4 { 448 | from { 449 | text-shadow: 0 0 10px #fff, 450 | 0 0 20px #fff, 451 | 0 0 30px #fff, 452 | 0 0 40px #B6FF00, 453 | 0 0 70px #B6FF00, 454 | 0 0 80px #B6FF00, 455 | 0 0 100px #B6FF00, 456 | 0 0 150px #B6FF00; 457 | } 458 | to { 459 | text-shadow: 0 0 5px #fff, 460 | 0 0 10px #fff, 461 | 0 0 15px #fff, 462 | 0 0 20px #B6FF00, 463 | 0 0 35px #B6FF00, 464 | 0 0 40px #B6FF00, 465 | 0 0 50px #B6FF00, 466 | 0 0 75px #B6FF00; 467 | } 468 | } 469 | 470 | @keyframes neon5 { 471 | from { 472 | text-shadow: 0 0 10px #fff, 473 | 0 0 20px #fff, 474 | 0 0 30px #fff, 475 | 0 0 40px #FF9900, 476 | 0 0 70px #FF9900, 477 | 0 0 80px #FF9900, 478 | 0 0 100px #FF9900, 479 | 0 0 150px #FF9900; 480 | } 481 | to { 482 | text-shadow: 0 0 5px #fff, 483 | 0 0 10px #fff, 484 | 0 0 15px #fff, 485 | 0 0 20px #FF9900, 486 | 0 0 35px #FF9900, 487 | 0 0 40px #FF9900, 488 | 0 0 50px #FF9900, 489 | 0 0 75px #FF9900; 490 | } 491 | } 492 | 493 | @keyframes neon6 { 494 | from { 495 | text-shadow: 0 0 10px #fff, 496 | 0 0 20px #fff, 497 | 0 0 30px #fff, 498 | 0 0 40px #ff00de, 499 | 0 0 70px #ff00de, 500 | 0 0 80px #ff00de, 501 | 0 0 100px #ff00de, 502 | 0 0 150px #ff00de; 503 | } 504 | to { 505 | text-shadow: 0 0 5px #fff, 506 | 0 0 10px #fff, 507 | 0 0 15px #fff, 508 | 0 0 20px #ff00de, 509 | 0 0 35px #ff00de, 510 | 0 0 40px #ff00de, 511 | 0 0 50px #ff00de, 512 | 0 0 75px #ff00de; 513 | } 514 | } 515 | 516 | 517 | /*REEEEEEEEEEESPONSIVE*/ 518 | @media (max-width: 650px) { 519 | 520 | #container{ 521 | width: 100%; 522 | } 523 | 524 | p{ 525 | font-size:3.5em; 526 | } 527 | 528 | } -------------------------------------------------------------------------------- /闪光文字/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | [CSS3] Neon Glow - CodePen 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |

19 | RED 20 |

21 | 22 |

23 | BLUE 24 |

25 | 26 | 28 | 29 | 30 |

31 | Yellow 32 |

33 | 34 |

35 | GREEN 36 |

37 | 38 |

39 | ORANGE 40 |

41 | 42 |

43 | VIOLET 44 |

45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /闪光文字/js/index.js: -------------------------------------------------------------------------------- 1 | //if some fonts are not being loaded, reload the page 2 | //all fonts hosted on google fonts: https://www.google.com/fonts 3 | //#################################################### 4 | //Also check out this!: http://youtu.be/j-e7aBV4nbs 5 | //################################################### -------------------------------------------------------------------------------- /页面滑动/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/1.jpg -------------------------------------------------------------------------------- /页面滑动/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/10.jpg -------------------------------------------------------------------------------- /页面滑动/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/11.jpg -------------------------------------------------------------------------------- /页面滑动/images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/12.jpg -------------------------------------------------------------------------------- /页面滑动/images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/13.jpg -------------------------------------------------------------------------------- /页面滑动/images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/14.jpg -------------------------------------------------------------------------------- /页面滑动/images/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/15.jpg -------------------------------------------------------------------------------- /页面滑动/images/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/16.jpg -------------------------------------------------------------------------------- /页面滑动/images/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/17.jpg -------------------------------------------------------------------------------- /页面滑动/images/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/18.jpg -------------------------------------------------------------------------------- /页面滑动/images/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/19.jpg -------------------------------------------------------------------------------- /页面滑动/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/2.jpg -------------------------------------------------------------------------------- /页面滑动/images/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/20.jpg -------------------------------------------------------------------------------- /页面滑动/images/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/21.jpg -------------------------------------------------------------------------------- /页面滑动/images/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/22.jpg -------------------------------------------------------------------------------- /页面滑动/images/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/23.jpg -------------------------------------------------------------------------------- /页面滑动/images/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/24.jpg -------------------------------------------------------------------------------- /页面滑动/images/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/25.jpg -------------------------------------------------------------------------------- /页面滑动/images/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/26.jpg -------------------------------------------------------------------------------- /页面滑动/images/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/27.jpg -------------------------------------------------------------------------------- /页面滑动/images/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/28.jpg -------------------------------------------------------------------------------- /页面滑动/images/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/29.jpg -------------------------------------------------------------------------------- /页面滑动/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/3.jpg -------------------------------------------------------------------------------- /页面滑动/images/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/30.jpg -------------------------------------------------------------------------------- /页面滑动/images/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/31.jpg -------------------------------------------------------------------------------- /页面滑动/images/32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/32.jpg -------------------------------------------------------------------------------- /页面滑动/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/4.jpg -------------------------------------------------------------------------------- /页面滑动/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/5.jpg -------------------------------------------------------------------------------- /页面滑动/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/6.jpg -------------------------------------------------------------------------------- /页面滑动/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/7.jpg -------------------------------------------------------------------------------- /页面滑动/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/8.jpg -------------------------------------------------------------------------------- /页面滑动/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helianthuswhite/JS-CSS-Demo/1786e646d651fb501171b2df9a387bc0284c8aa7/页面滑动/images/9.jpg -------------------------------------------------------------------------------- /页面滑动/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | scrollReveal.js演示1_dowebok 5 | 6 | 25 | 26 | 27 | 28 |

scrollReveal.js

29 |

——页面滚动显示动画 JavaScript，不支持 IE6 - IE9

30 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | 42 | 43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | 52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 | 72 | 73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | 82 | 83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | 92 | 93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 | 102 | 103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | 113 | 114 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 135 |

136 | dowebok.com 137 | 说 明 138 | 下 载 139 |

140 | 141 | 142 | -------------------------------------------------------------------------------- /页面滑动/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | scrollReveal.js演示2_dowebok 5 | 6 | 16 | 17 | 18 | 19 |

scrollReveal.js演示2

20 | 21 |

页面滚动显示动画效果，IE10 以下无效

22 | 23 |
24 | 34 | 44 | 54 | 64 |
65 | 66 | 67 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 90 |

91 | dowebok.com 92 | 说 明 93 | 下 载 94 |

95 | 96 | 97 | -------------------------------------------------------------------------------- /页面滑动/js/scrollReveal.js: -------------------------------------------------------------------------------- 1 | /* 2 | _ _ _____ _ _ 3 | | | | __ \ | | (_) 4 | ___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___ 5 | / __|/ __| '__/ _ \| | | _ // _ \ \ / / _ \/ _` | | | / __| 6 | \__ \ (__| | | (_) | | | | \ \ __/\ V / __/ (_| | |_| \__ \ 7 | |___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ v.0.1.3 8 | _/ | 9 | |__/ 10 | 11 | "Declarative on-scroll reveal animations." 12 | 13 | /*============================================================================= 14 | 15 | scrollReveal.js was inspired by cbpScroller.js (c) 2014 Codrops. 16 | 17 | Licensed under the MIT license. 18 | http://www.opensource.org/licenses/mit-license.php 19 | 20 | =============================================================================*/ 21 | 22 | /*! scrollReveal.js v0.1.3 (c) 2014 Julian Lloyd | MIT license */ 23 | 24 | /*===========================================================================*/ 25 | 26 | 27 | window.scrollReveal = (function (window) { 28 | 29 | 'use strict'; 30 | 31 | // generator (increments) for the next scroll-reveal-id 32 | var nextId = 1; 33 | 34 | /** 35 | * RequestAnimationFrame polyfill 36 | * @function 37 | * @private 38 | */ 39 | var requestAnimFrame = (function () { 40 | return window.requestAnimationFrame || 41 | window.webkitRequestAnimationFrame || 42 | window.mozRequestAnimationFrame || 43 | function (callback) { 44 | window.setTimeout(callback, 1000 / 60); 45 | }; 46 | }()); 47 | 48 | function scrollReveal(options) { 49 | 50 | this.options = this.extend(this.defaults, options); 51 | this.docElem = this.options.elem; 52 | this.styleBank = {}; 53 | 54 | if (this.options.init == true) this.init(); 55 | } 56 | 57 | scrollReveal.prototype = { 58 | 59 | defaults: { 60 | after: '0s', 61 | enter: 'bottom', 62 | move: '24px', 63 | over: '0.66s', 64 | easing: 'ease-in-out', 65 | opacity: 0, 66 | complete: function() {}, 67 | 68 | // if 0, the element is considered in the viewport as soon as it enters 69 | // if 1, the element is considered in the viewport when it's fully visible 70 | viewportFactor: 0.33, 71 | 72 | // if false, animations occur only once 73 | // if true, animations occur each time an element enters the viewport 74 | reset: false, 75 | 76 | // if true, scrollReveal.init() is automaticaly called upon instantiation 77 | init: true, 78 | elem: window.document.documentElement 79 | }, 80 | 81 | /*=============================================================================*/ 82 | 83 | init: function () { 84 | 85 | this.scrolled = false; 86 | 87 | var self = this; 88 | 89 | // Check DOM for the data-scrollReveal attribute 90 | // and initialize all found elements. 91 | this.elems = Array.prototype.slice.call(this.docElem.querySelectorAll('[data-scroll-reveal]')); 92 | this.elems.forEach(function (el, i) { 93 | 94 | // Capture original style attribute 95 | var id = el.getAttribute("data-scroll-reveal-id"); 96 | if (!id) { 97 | id = nextId++; 98 | el.setAttribute("data-scroll-reveal-id", id); 99 | } 100 | if (!self.styleBank[id]) { 101 | self.styleBank[id] = el.getAttribute('style'); 102 | } 103 | 104 | self.update(el); 105 | }); 106 | 107 | var scrollHandler = function (e) { 108 | // No changing, exit 109 | if (!self.scrolled) { 110 | self.scrolled = true; 111 | requestAnimFrame(function () { 112 | self._scrollPage(); 113 | }); 114 | } 115 | }; 116 | 117 | var resizeHandler = function () { 118 | 119 | // If we’re still waiting for settimeout, reset the timer. 120 | if (self.resizeTimeout) { 121 | clearTimeout(self.resizeTimeout); 122 | } 123 | function delayed() { 124 | self._scrollPage(); 125 | self.resizeTimeout = null; 126 | } 127 | self.resizeTimeout = setTimeout(delayed, 200); 128 | }; 129 | 130 | // captureScroll 131 | if (this.docElem == window.document.documentElement) { 132 | window.addEventListener('scroll', scrollHandler, false); 133 | window.addEventListener('resize', resizeHandler, false); 134 | } 135 | else { 136 | this.docElem.addEventListener('scroll', scrollHandler, false); 137 | } 138 | }, 139 | 140 | /*=============================================================================*/ 141 | 142 | _scrollPage: function () { 143 | var self = this; 144 | 145 | this.elems.forEach(function (el, i) { 146 | self.update(el); 147 | }); 148 | this.scrolled = false; 149 | }, 150 | 151 | /*=============================================================================*/ 152 | 153 | parseLanguage: function (el) { 154 | 155 | // Splits on a sequence of one or more commas or spaces. 156 | var words = el.getAttribute('data-scroll-reveal').split(/[, ]+/), 157 | parsed = {}; 158 | 159 | function filter (words) { 160 | var ret = [], 161 | 162 | blacklist = [ 163 | "from", 164 | "the", 165 | "and", 166 | "then", 167 | "but", 168 | "with" 169 | ]; 170 | 171 | words.forEach(function (word, i) { 172 | if (blacklist.indexOf(word) > -1) { 173 | return; 174 | } 175 | ret.push(word); 176 | }); 177 | 178 | return ret; 179 | } 180 | 181 | words = filter(words); 182 | 183 | words.forEach(function (word, i) { 184 | 185 | switch (word) { 186 | case "enter": 187 | parsed.enter = words[i + 1]; 188 | return; 189 | 190 | case "after": 191 | parsed.after = words[i + 1]; 192 | return; 193 | 194 | case "wait": 195 | parsed.after = words[i + 1]; 196 | return; 197 | 198 | case "move": 199 | parsed.move = words[i + 1]; 200 | return; 201 | 202 | case "ease": 203 | parsed.move = words[i + 1]; 204 | parsed.ease = "ease"; 205 | return; 206 | 207 | case "ease-in": 208 | parsed.move = words[i + 1]; 209 | parsed.easing = "ease-in"; 210 | return; 211 | 212 | case "ease-in-out": 213 | parsed.move = words[i + 1]; 214 | parsed.easing = "ease-in-out"; 215 | return; 216 | 217 | case "ease-out": 218 | parsed.move = words[i + 1]; 219 | parsed.easing = "ease-out"; 220 | return; 221 | 222 | case "over": 223 | parsed.over = words[i + 1]; 224 | return; 225 | 226 | default: 227 | return; 228 | } 229 | }); 230 | 231 | return parsed; 232 | }, 233 | 234 | 235 | /*=============================================================================*/ 236 | 237 | update: function (el) { 238 | 239 | var that = this; 240 | var css = this.genCSS(el); 241 | var style = this.styleBank[el.getAttribute("data-scroll-reveal-id")]; 242 | 243 | if (style != null) style += ";"; else style = ""; 244 | 245 | if (!el.getAttribute('data-scroll-reveal-initialized')) { 246 | el.setAttribute('style', style + css.initial); 247 | el.setAttribute('data-scroll-reveal-initialized', true); 248 | } 249 | 250 | if (!this.isElementInViewport(el, this.options.viewportFactor)) { 251 | if (this.options.reset) { 252 | el.setAttribute('style', style + css.initial + css.reset); 253 | } 254 | return; 255 | } 256 | 257 | if (el.getAttribute('data-scroll-reveal-complete')) return; 258 | 259 | if (this.isElementInViewport(el, this.options.viewportFactor)) { 260 | el.setAttribute('style', style + css.target + css.transition); 261 | // Without reset enabled, we can safely remove the style tag 262 | // to prevent CSS specificy wars with authored CSS. 263 | if (!this.options.reset) { 264 | setTimeout(function () { 265 | if (style != "") { 266 | el.setAttribute('style', style); 267 | } else { 268 | el.removeAttribute('style'); 269 | } 270 | el.setAttribute('data-scroll-reveal-complete',true); 271 | that.options.complete(el); 272 | }, css.totalDuration); 273 | } 274 | return; 275 | } 276 | }, 277 | 278 | /*=============================================================================*/ 279 | 280 | genCSS: function (el) { 281 | var parsed = this.parseLanguage(el), 282 | enter, 283 | axis; 284 | 285 | if (parsed.enter) { 286 | 287 | if (parsed.enter == "top" || parsed.enter == "bottom") { 288 | enter = parsed.enter; 289 | axis = "y"; 290 | } 291 | 292 | if (parsed.enter == "left" || parsed.enter == "right") { 293 | enter = parsed.enter; 294 | axis = "x"; 295 | } 296 | 297 | } else { 298 | 299 | if (this.options.enter == "top" || this.options.enter == "bottom") { 300 | enter = this.options.enter 301 | axis = "y"; 302 | } 303 | 304 | if (this.options.enter == "left" || this.options.enter == "right") { 305 | enter = this.options.enter 306 | axis = "x"; 307 | } 308 | } 309 | 310 | // After all values are parsed, let’s make sure our our 311 | // pixel distance is negative for top and left entrances. 312 | // 313 | // ie. "move 25px from top" starts at 'top: -25px' in CSS. 314 | 315 | if (enter == "top" || enter == "left") { 316 | if (parsed.move) { 317 | parsed.move = "-" + parsed.move; 318 | } 319 | else { 320 | parsed.move = "-" + this.options.move; 321 | } 322 | } 323 | 324 | var dist = parsed.move || this.options.move, 325 | dur = parsed.over || this.options.over, 326 | delay = parsed.after || this.options.after, 327 | easing = parsed.easing || this.options.easing, 328 | opacity = parsed.opacity || this.options.opacity; 329 | 330 | var transition = "-webkit-transition: -webkit-transform " + dur + " " + easing + " " + delay + ", opacity " + dur + " " + easing + " " + delay + ";" + 331 | "transition: transform " + dur + " " + easing + " " + delay + ", opacity " + dur + " " + easing + " " + delay + ";" + 332 | "-webkit-perspective: 1000;" + 333 | "-webkit-backface-visibility: hidden;"; 334 | 335 | // The same as transition, but removing the delay for elements fading out. 336 | var reset = "-webkit-transition: -webkit-transform " + dur + " " + easing + " 0s, opacity " + dur + " " + easing + " " + delay + ";" + 337 | "transition: transform " + dur + " " + easing + " 0s, opacity " + dur + " " + easing + " " + delay + ";" + 338 | "-webkit-perspective: 1000;" + 339 | "-webkit-backface-visibility: hidden;"; 340 | 341 | var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" + 342 | "transform: translate" + axis + "(" + dist + ");" + 343 | "opacity: " + opacity + ";"; 344 | 345 | var target = "-webkit-transform: translate" + axis + "(0);" + 346 | "transform: translate" + axis + "(0);" + 347 | "opacity: 1;"; 348 | return { 349 | transition: transition, 350 | initial: initial, 351 | target: target, 352 | reset: reset, 353 | totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000) 354 | }; 355 | }, 356 | 357 | getViewportH : function () { 358 | var client = this.docElem['clientHeight'], 359 | inner = window['innerHeight']; 360 | 361 | if (this.docElem == window.document.documentElement) 362 | return (client < inner) ? inner : client; 363 | else 364 | return client; 365 | }, 366 | 367 | getOffset : function(el) { 368 | var offsetTop = 0, 369 | offsetLeft = 0; 370 | 371 | do { 372 | if (!isNaN(el.offsetTop)) { 373 | offsetTop += el.offsetTop; 374 | } 375 | if (!isNaN(el.offsetLeft)) { 376 | offsetLeft += el.offsetLeft; 377 | } 378 | } while (el = el.offsetParent) 379 | 380 | return { 381 | top: offsetTop, 382 | left: offsetLeft 383 | } 384 | }, 385 | 386 | isElementInViewport : function(el, h) { 387 | var scrolled = this.docElem.scrollTop + this.docElem.offsetTop; 388 | if (this.docElem == window.document.documentElement)scrolled = window.pageYOffset; 389 | var 390 | viewed = scrolled + this.getViewportH(), 391 | elH = el.offsetHeight, 392 | elTop = this.getOffset(el).top, 393 | elBottom = elTop + elH, 394 | h = h || 0; 395 | 396 | return (elTop + elH * h) <= viewed 397 | && (elBottom) >= scrolled 398 | || (el.currentStyle? el.currentStyle : window.getComputedStyle(el, null)).position == 'fixed'; 399 | }, 400 | 401 | extend: function (a, b){ 402 | for (var key in b) { 403 | if (b.hasOwnProperty(key)) { 404 | a[key] = b[key]; 405 | } 406 | } 407 | return a; 408 | } 409 | }; // end scrollReveal.prototype 410 | 411 | return scrollReveal; 412 | })(window); 413 | -------------------------------------------------------------------------------- /页面滑动/说明下载.url: -------------------------------------------------------------------------------- 1 | [DEFAULT] 2 | BASEURL=http://bbs.mumayi.net/index.php 3 | [InternetShortcut] 4 | URL=http://www.dowebok.com/134.html 5 | Modified=A0089165632FC701F8 6 | IconFile=C:\Windows\system32\SHELL32.dll 7 | IconIndex=130 8 | IDList= 9 | HotKey=0 10 | [InternetShortcut.A] 11 | [InternetShortcut.W] 12 | IconFile=E:+AFyPb072fxaPkQBc-favicon.ico 13 | [{000214A0-0000-0000-C000-000000000046}] 14 | Prop3=19,2 15 | --------------------------------------------------------------------------------