HTML5 心形文字墙 鼠标悬停放大图片 变换背景颜色
由jquery和HTML5技术共同实现的文字墙效果，并且背景是夜空中的流星雨O(∩_∩)O~，鼠标悬停文字上面可以进行旋转放大的效果，且文字会变色，带动画效果。在支持HTML5的Chrome或火狐浏览器中，运行效果极佳。
注意：文字可以自己进行书写，中英文都可以
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>canvas流星雨星星动画</title> 6 7 <script> 8 9 var context; 10 11 var arr = new Array(); 12 var starCount = 900; 13 14 var rains = new Array(); 15 var rainCount =20; 16 17 //初始化画布及context 18 function init(){ 19 //获取canvas 20 var stars = document.getElementById("stars"); 21 windowWidth = window.innerWidth; //当前的窗口的高度 22 stars.width=windowWidth; 23 stars.height=window.innerHeight; 24 //获取context 25 context = stars.getContext("2d"); 26 } 27 28 //创建一个星星对象 29 var Star = function (){ 30 this.x = windowWidth * Math.random();//横坐标 31 this.y = 5000 * Math.random();//纵坐标 32 this.text=".";//文本 33 this.color = "white";//颜色 34 35 //产生随机颜色 36 this.getColor=function(){ 37 38 var _r = Math.random(); 39 40 if(_r<0.5){ 41 this.color = "#333"; 42 }else{ 43 this.color = "white"; 44 } 45 46 } 47 48 //初始化 49 this.init=function(){ 50 this.getColor(); 51 } 52 //绘制 53 this.draw=function(){ 54 context.fillStyle=this.color; 55 context.fillText(this.text,this.x,this.y); 56 } 57 58 } 59 60 //画月亮 61 function drawMoon(){ 62 var moon = new Image(); 63 moon.src = "images/moon.jpg" 64 context.drawImage(moon,-5,-10); 65 } 66 67 68 69 //页面加载的时候 70 window.onload = function() { 71 72 init(); 73 //画星星 74 for (var i=0;i<starCount;i++) { 75 var star = new Star(); 76 star.init(); 77 star.draw(); 78 arr.push(star); 79 } 80 81 //画流星 82 for (var i=0;i<rainCount;i++) { 83 var rain = new MeteorRain(); 84 rain.init(); 85 rain.draw(); 86 rains.push(rain); 87 } 88 89 drawMoon();//绘制月亮 90 playStars();//绘制闪动的星星 91 playRains();//绘制流星 92 93 } 94 95 //星星闪起来 96 function playStars(){ 97 for (var n = 0; n < starCount; n++){ 98 arr[n].getColor(); 99 arr[n].draw(); 100 } 101 102 setTimeout("playStars()",100); 103 } 104 105 106 /*流星雨开始*/ 107 108 var MeteorRain = function(){ 109 this.x = -1; 110 this.y = -1; 111 this.length = -1;//长度 112 this.angle = 30; //倾斜角度 113 this.width = -1;//宽度 114 this.height = -1;//高度 115 this.speed = 1;//速度 116 this.offset_x = -1;//横轴移动偏移量 117 this.offset_y = -1;//纵轴移动偏移量 118 this.alpha = 1; //透明度 119 this.color1 = "";//流星的色彩 120 this.color2 = ""; //流星的色彩 121 /****************初始化函数********************/ 122 this.init = function () //初始化 123 { 124 this.getPos(); 125 this.alpha = 1;//透明度 126 this.getRandomColor(); 127 //最小长度，最大长度 128 var x = Math.random() * 80 + 150; 129 this.length = Math.ceil(x); 130 // x = Math.random()*10+30; 131 this.angle = 30; //流星倾斜角 132 x = Math.random()+0.5; 133 this.speed = Math.ceil(x); //流星的速度 134 var cos = Math.cos(this.angle*3.14/180); 135 var sin = Math.sin(this.angle*3.14/180) ; 136 this.width = this.length*cos ; //流星所占宽度 137 this.height = this.length*sin ;//流星所占高度 138 this.offset_x = this.speed*cos ; 139 this.offset_y = this.speed*sin; 140 } 141 142 /**************获取随机颜色函数*****************/ 143 this.getRandomColor = function (){ 144 var a = Math.ceil(255-240* Math.random()); 145 //中段颜色 146 this.color1 = "rgba("+a+","+a+","+a+",1)"; 147 //结束颜色 148 this.color2 = "black"; 149 } 150 151 152 /***************重新计算流星坐标的函数******************/ 153 this.countPos = function ()// 154 { 155 //往左下移动,x减少，y增加 156 this.x = this.x - this.offset_x; 157 this.y = this.y + this.offset_y; 158 } 159 160 /*****************获取随机坐标的函数*****************/ 161 this.getPos = function () // 162 { 163 //横坐标200--1200 164 165 this.x = Math.random() * window.innerWidth; //窗口高度 166 //纵坐标小于600 167 this.y = Math.random() * window.innerHeight; //窗口宽度 168 } 169 /****绘制流星***************************/ 170 this.draw = function () //绘制一个流星的函数 171 { 172 context.save(); 173 context.beginPath(); 174 context.lineWidth = 1; //宽度 175 context.globalAlpha = this.alpha; //设置透明度 176 //创建横向渐变颜色,起点坐标至终点坐标 177 var line = context.createLinearGradient(this.x, this.y, 178 this.x + this.width, 179 this.y - this.height); 180 181 182 183 //分段设置颜色 184 line.addColorStop(0, "white"); 185 line.addColorStop(0.3, this.color1); 186 line.addColorStop(0.6, this.color2); 187 context.strokeStyle = line; 188 //起点 189 context.moveTo(this.x, this.y); 190 //终点 191 context.lineTo(this.x + this.width, this.y - this.height); 192 context.closePath(); 193 context.stroke(); 194 context.restore(); 195 } 196 this.move = function(){ 197 //清空流星像素 198 var x = this.x+this.width-this.offset_x; 199 var y = this.y-this.height; 200 context.clearRect(x-3,y-3,this.offset_x+5,this.offset_y+5); 201 // context.strokeStyle="red"; 202 // context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1); 203 //重新计算位置，往左下移动 204 this.countPos(); 205 //透明度增加 206 this.alpha -= 0.002; 207 //重绘 208 this.draw(); 209 } 210 211 } 212 213 //绘制流星 214 function playRains(){ 215 216 for (var n = 0; n < rainCount; n++){ 217 var rain = rains[n]; 218 rain.move();//移动 219 if(rain.y>window.innerHeight){//超出界限后重来 220 context.clearRect(rain.x,rain.y-rain.height,rain.width,rain.height); 221 rains[n] = new MeteorRain(); 222 rains[n].init(); 223 } 224 } 225 setTimeout("playRains()",2); 226 } 227 228 229 /*流星雨结束*/ 230 </script> 231 232 <style type="text/css"> 233 body{ 234 background-color: black; 235 } 236 body,html{ 237 width:100%; 238 height:100%; 239 /*overflow:hidden;*/ 240 } 241 242 #box { 243 width: 300px; 244 height: 300px; 245 padding: 10px; 246 /*border: 2px solid red;*/ 247 /*left: 370px;*/ 248 left: 30%; 249 top: 10%; 250 position: absolute; 251 } 252 253 a { 254 width: 70px; 255 height: 70px; 256 background: red; 257 display: block; 258 text-decoration: none; 259 text-align: center; 260 line-height: 70px; 261 color: #FFFFFF; 262 } 263 a span{ 264 font-size:40px ; 265 font-weight: bolder; 266 } 267 a:hover { 268 background: #0099ff; 269 transform: rotate(360deg) scale(1.2); 270 transition: all 1s ease-in-out 0.1s; 271 /*animation: speed 4s linear infinite ;*/ 272 } 273 274 /* @keyframes speed{ 275 0%{ 276 width: 20px; 277 transform: translate(100px,0); 278 } 279 25%{ 280 width: 20px; 281 transform: translate(200px,0); 282 } 283 50%{ 284 width: 20px; 285 transform: translate(300px,0); 286 } 287 75%{ 288 width: 20px; 289 transform: translate(400px,0); 290 } 291 100%{ 292 width: 20px; 293 transform: translate(500px,0); 294 } 295 } 296 */ 297 ul,li{ 298 list-style:none; 299 } 300 body{ 301 font:18px/20px "Microsoft 302 Yahei","SimSun",Arial,sans-serif; /*background:#CCC;*/ 303 } 304 .heartPic{ 305 width:749px; 306 height:630px; 307 margin:60px 308 auto 0 auto; 309 } 310 .heartPic ul{ 311 float:left; 312 width:749px; 313 } 314 .heartPic ul li{ 315 float:left; 316 width:70px; 317 height:70px; 318 padding:2px; 319 cursor:pointer; 320 } 321 .heartPic ul li.on{ 322 z-index:99; 323 } 324 .heartPic ul li.on .in{ 325 position:relative; 326 left:-50px; 327 top:-50px; 328 padding:5px 5px 20px 5px; 329 background:#666; 330 } 331 .heartPic ul li .pTxt{ display:none; 332 width:100px; 333 height:15px; 334 text-align:center; 335 color:#fff; 336 overflow:hidden; 337 } 338 .heartPic .showDiv{display:block;} 339 .in{ 340 border: 1px solid red; 341 height: 70px; 342 } 343 344 </style> 345 </head> 346 <body> 347 <div> 348 <canvas id="stars"></canvas> 349 350 <div class="heartPic" id="box"> 351 <ul> 352 <li></li> 353 <li> 354 <div class="in" > 355 <a class="a1" href="#"><span>你</span></a> 356 </div> 357 </li> 358 <li> 359 <div class="in"> 360 <a class="a1" href="#"><span>见</span></a> 361 </div> 362 </li> 363 <li> 364 </li> 365 <li> 366 <div class="in"> 367 <a class="a1" href="#"><span>或</span></a> 368 </div> 369 </li> 370 <li> 371 <div class="in"> 372 <a class="a1" href="#"><span>者</span></a> 373 </div> 374 </li> 375 <li> 376 </li> 377 </ul> 378 <ul> 379 <li> 380 <div class="in"> 381 <a class="a1" href="#"><span>不</span></a> 382 </div> 383 </li> 384 <li> 385 <div class="in"> 386 <a class="a1" href="#"><span>见</span></a> 387 </div> 388 </li> 389 <li> 390 <div class="in"> 391 <a class="a1" href="#"><span>我</span></a> 392 </div> 393 </li> 394 <li> 395 <div class="in"> 396 <a class="a1" href="#"><span>就</span></a> 397 </div> 398 </li> 399 <li> 400 <div class="in"> 401 <a class="a1" href="#"><span>在</span></a> 402 </div> 403 </li> 404 <li> 405 <div class="in"> 406 <a class="a1" href="#"><span>那</span></a> 407 </div> 408 </li> 409 <li> 410 <div class="in"> 411 <a class="a1" href="#"><span>里</span></a> 412 </div> 413 </li> 414 </ul> 415 <ul> 416 <li> 417 <div class="in"> 418 <a class="a1" href="#"><span>不</span></a> 419 </div> 420 </li> 421 <li> 422 <div class="in"> 423 <a class="a1" href="#"><span>悲</span></a> 424 </div> 425 </li> 426 <li> 427 <div class="in"> 428 <a class="a1" href="#"><span>不</span></a> 429 </div> 430 </li> 431 <li> 432 <div class="in"> 433 <a class="a1" href="#"><span>喜</span></a> 434 </div> 435 </li> 436 <li> 437 <div class="in"> 438 <a class="a1" href="#"><span>你</span></a> 439 </div> 440 </li> 441 <li> 442 <div class="in"> 443 <a class="a1" href="#"><span>念</span></a> 444 </div> 445 </li> 446 <li> 447 <div class="in"> 448 <a class="a1" href="#"><span>或</span></a> 449 </div> 450 </li> 451 </ul> 452 <ul> 453 <li> 454 </li> 455 <li> 456 <div class="in"> 457 <a class="a1" href="#"><span>者</span></a> 458 </div> 459 </li> 460 <li> 461 <div class="in"> 462 <a class="a1" href="#"><span>不</span></a> 463 </div> 464 </li> 465 <li> 466 <div class="in"> 467 <a class="a1" href="#"><span>念</span></a> 468 </div> 469 </li> 470 <li> 471 <div class="in"> 472 <a class="a1" href="#"><span>情</span></a> 473 </div> 474 </li> 475 <li> 476 <div class="in"> 477 <a class="a1" href="#"><span>就</span></a> 478 </div> 479 </li> 480 <li> 481 </li> 482 </ul> 483 <ul> 484 <li> 485 </li> 486 <li> 487 </li> 488 <li> 489 <div class="in"> 490 <a class="a1" href="#"><span>在</span></a> 491 </div> 492 </li> 493 <li> 494 <div class="in"> 495 <a class="a1" href="#"><span>那</span></a> 496 </div> 497 </li> 498 <li> 499 <div class="in"> 500 <a class="a1" href="#"><span>里</span></a> 501 </div> 502 </li> 503 <li> 504 </li> 505 <li> 506 </li> 507 </ul> 508 <ul> 509 <li> 510 </li> 511 <li> 512 </li> 513 <li> 514 </li> 515 <li> 516 <div class="in"> 517 <a class="a1" href="#"><span>爱</span></a> 518 </div> 519 </li> 520 <li> 521 </li> 522 <li> 523 </li> 524 <li> 525 </li> 526 </ul> 527 528 </div> 529 530 </div> 531 </body> 532 </html>
喜欢前端、后端java开发的 可以到我的知乎主页(更多详细内容等你关注呦)：https://www.zhihu.com/people/xing-chen-you-guang-pie-pie-pie，有详细视频、资料、教程，文档，值得拥有！！！希望可以一起努力，加油ヾ(◍°∇°◍)ﾉﾞ！！！
