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

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

 

上一篇:CSS笔记——精灵图,字体图标,CSS三角


下一篇:CSS 实现优惠券的技巧