HTML5 心形文字墙 鼠标悬停放大图片 变换背景颜色

  • A+
所属分类:Web前端
摘要

   由jquery和HTML5技术共同实现的文字墙效果,并且背景是夜空中的流星雨O(∩_∩)O~,鼠标悬停文字上面可以进行旋转放大的效果,且文字会变色,带动画效果。在支持HTML5的Chrome或火狐浏览器中,运行效果极佳。

   由jquery和HTML5技术共同实现的文字墙效果,并且背景是夜空中的流星雨O(∩_∩)O~,鼠标悬停文字上面可以进行旋转放大的效果,且文字会变色,带动画效果。在支持HTML5的Chrome或火狐浏览器中,运行效果极佳。

HTML5 心形文字墙 鼠标悬停放大图片 变换背景颜色

HTML5 心形文字墙 鼠标悬停放大图片 变换背景颜色

  注意:文字可以自己进行书写,中英文都可以

  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开发的可以加+qun:609565759,有详细视频、资料、教程,文档,值得拥有!!!希望可以一起努力,加油ヾ(◍°∇°◍)ノ゙!!!