HTML5心形文字墙鼠标悬停放大图片变换背景颜色
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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 = 9 00; 13 14 var rains = new Array(); 15 var rai
nCount =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.hei ght=window.innerHeight; 24 //获取context 25 context = stars.getContext("2d"); 26 } 27 28 //创建一个星星对象 29 var Star = function (){ 30 this.x = window Width * 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.fillS tyle=this.color; 55 context.fillText(this.text,this.x,this. y); 56 } 57 58 } 59 60 //画月亮 61 function drawMoon(){ 62 var moon = ne w 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 va r 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 va r 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 t his.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.w idth = this.length*cos ; //流星所占宽度137 this.height = this.length*sin ;//流星所占高度138 this.offset_x = this.speed*cos ;139 this.o ffset_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() * windo w.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.ad dColorStop(0.3, this.color1);186 line.addColorStop(0.6, this.color2);187 context.strokeStyle = line;188 //起点189 context.moveT o(this.x, this.y);190 //终点191 context.lineT o(this.x + this.width, this.y - this.heig ht);192 context.closePath();193 context.strok e();194 context.restore();195 }196 this.m ove = 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] = ne w MeteorRain();222 rains[n].init();223 }224 }
225 setTimeout("playRains()",2);226 }227 2 28 229 /*流星雨结束*/230 </script>231 232 <style type="text/css">2 33 body{234 background-
color: black;235 }236 body,html{237 wi dth:100%;238 height:100%;239 /*overflow:hi dden;*/240 }241 242 #box {243 width: 300px;244 height: 300px;245 paddin g: 10px;246 /*border: 2px solid red;*/247 / *left: 370px;*/248 left: 30%;249 top: 10%;25 0 position: absolute;251 }252 253 a {
254 width: 70px;255 height: 70px;256 background: red;257 display: block;258 t ext-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 b ackground: #0099ff;269 transform: rotate(360deg) sca le(1.2);270 transition: all 1s ease-in-
out 0.1s; 271 /*animation: speed 4s linear infinite ;*/27 2 }273 274 /* @keyframes speed{275 0 %{276 width: 20px;277 transform: trans late(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:1 8px/20px "Microsoft302 Yahei","SimSun",Arial,sans-serif; /*background:#CCC;*/303 } 304 .heartPic{305 width:749px;306 height:630 px;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;3 18 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 bac kground:#666;330 } 331 .heartPic ul li .pTxt{ display:none;332 width:100px;333 heig ht:15px;334 text-
align:center;335 color:#fff;336 overflow:hidd en;337 }338 .heartPic .showDiv{display:block;}339 .in{340 border: 1px solid red;341 hei ght: 70px;342 }343 344 </style>345 </head>34 6 <body>347 <div>348 <canvas id="stars"></c anvas>349 350 <div class="heartPic" id="box">35 1 <ul>352 <li></li>353 <li> 354 <div class="in" >355 <a cla ss="a1" href="#"><span>你</span></a>356 </div>357 </li>35
8 <li>359 <div class="in">360
<a class="a1" href="#"><span>见</span></a>361 </div>362 </li>36 3 <li>364 </li>365 <li>36 6 <div class="in">367 <a class ="a1" href="#"><span>或</span></a>368 </div>369 </li>37
0 <li>371 <div class="in">372
<a class="a1" href="#"><span>者</span></a>373 </div>374 </li>37 5 <li>376 </li>377 </ul>378 <ul>379 <li>380 <div cla ss="in">381 <a class="a1" href="#"><span>
不
</span></a>382 </div>383 </li>38
4 <li>38
5 <div class="in">386
<a class="a1" href="#"><span>见</span></a>387 </div>388 </li>38 9 <li>390 <div class="in">391 <a cl ass="a1" href="#"><span>我</span></a>392 </div>393 </li>39
4 <li>39
5 <div class="in">396
<a class="a1" href="#"><span>就</span></a>397 </div>398 </li>39
9 <li>400 <div class="in">401
<a class="a1" href="#"><span>在</span></a>402 </div>403 </li>40
4 <li>40
5 <div class="in">406
<a class="a1" href="#"><span>那</span></a>407 </div>408 </li>40
9 <li>410 <div class="in">411
<a class="a1" href="#"><span>里</span></a>412 </div>413 </li>41 4 </ul>415 <ul>416 <li>417 <div class="in">418 <a class="a1" href="#"><span>不</span></a>419 </div>420 </li>42
1 <li>42
2 <div class="in">423
<a class="a1" href="#"><span>悲</span></a>424 </div>425 </li>42
6 <li>42
7 <div class="in">428
<a class="a1" href="#"><span>不</span></a>429 </div>430 </li>43
1 <li>43
2 <div class="in">433
<a class="a1" href="#"><span>喜</span></a>434 </div>435 </li>43
6 <li>43
7 <div class="in">438
<a class="a1" href="#"><span>你</span></a>439 </div>440 </li>44
1 <li>44
2 <div class="in">443
<a class="a1" href="#"><span>念</span></a>444 </div>445 </li>44
6 <li>44
7 <div class="in">448
<a class="a1" href="#"><span>或</span></a>449 </div>450 </li>45 1 </ul>452 <ul>453 <li>454 </li>455 <li>456 <div cla ss="in">457 <a class="a1" href="#"><span>者
</span></a>458 </div>459 </li>46
0 <li>461 <div class="in">462
<a class="a1" href="#"><span>不</span></a>463 </div>464 </li>46
5 <li>46
6 <div class="in">467
<a class="a1" href="#"><span>念</span></a>468 </div>469 </li>47
0 <li>471 <div class="in">472
<a class="a1" href="#"><span>情</span></a>473 </div>474 </li>47
5 <li>47
6 <div class="in">477
<a class="a1" href="#"><span>就</span></a>478 </div>479 </li>48 0 <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>49
3 <li>49
4 <div class="in">495
<a class="a1" href="#"><span>那</span></a>496 </div>497 </li>49
8 <li>499 <div class="in">500
<a class="a1" href="#"><span>里</span></a>501 </div>502 </li>50 3 <li>504 </li>505 <li>50 6 </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>52 0 <li>521 </li>522 <li>52 3 </li>524 <li>525 </li>5 26 </ul>527 528 </div>529 530 </div> 531 </body>532 </html>。