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--1200164 165 this.x = Math.random() * window.innerWidth; //窗口高度166 //纵坐标小于600167 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 "Microsoft302 Yahei","SimSun",Arial,sans-serif; /*background:#CCC;*/303 } 304 .heartPic{305 width:749px;306 height:630px;307 margin:60px308 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>
赞 (0)