html5+css3实现字体飘落_html樱花代码可复制资源-CSDN文库

共7个文件

html：7个

html5+ccs3

字体飘落

雪花飘落

1星需积分: 41 101 浏览量 2018-11-15 15:54:23 上传评论收藏 13KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

飘落的字体.rar （7个子文件）

飘落的字体

飘落的字体雪花一样落在指定位置.html 4KB

飘落的字体雪花一样落在指定位置(带雪花纷飞).html 6KB

飘落的雪花.html 2KB

飘落的字体完成版.html 4KB

飘落的字体落字版本(带雪花纷飞).html 6KB

飘落的字体落字版本.html 4KB

飘落的字体(和雪花一样).html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #000; /*防止出现向下滚动条*/ overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="../jquery-1.11.1.js"></script> <script> var array=new Array("亲吻你的手", "还靠着你的头", "让你躺胸口", "那个人已不是我", "这些平常的举动现在叫做难过", "喔～难过", "日子开始过", "我没你照样过", "不会很难受", "我会默默的接受", "反正在一起时你我都有开心过", "就足够", "我的温暖你的冷漠让爱起雾了", "如果爱心画在起雾的窗是模糊", "还是更清楚", "你算什么男人", "算什么男人", "眼睁睁看她走却不闻不问", "是有多天真就别再硬撑", "期待你挽回你却拱手让人", "你算什么男人", "算什么男人", "还爱着她却不敢叫她再等", "没差你再继续认份", "她会遇到更好的男人"); var index = 0,j=0,k=0; var index2= 0,j2=0,k2=0; var num=0; var x=500;//x轴坐标 var y_start=200; var startLeft =0; var y_end=350;//y轴坐标 var hight=350;//高度 var durationTime = 350;//字体下落持续时间 var startOpacity = 0.7 + 0.3 * Math.random();//字体下落时的透明度 var endOpacity = 0.2 + 0.2 * Math.random();//字体下落结束时的透明度 //获取页面的宽度，利用这个数来算出，雪花开始时left的值 var documentWidth = $(document).width(); //获取页面的高度相当于雪花下落结束时Y轴的位置 var documentHieght = $(document).height(); var flake = $("<div>").css({"position": "absolute","color": "#fff"}).html("❤"); var flakeFlow = $("<div>").css({"position": "absolute","color": "#fff"}).html("❤"); var tId = null; var last=null; $(function(){ snow(); tId=setInterval("start()",500); }) function start(){ flake.html(array[k].charAt(index)); //console.log(array[k]+','+index); // console.log(array[k].charAt(index)); if(index<array[k].length){ console.log(flake.html()); index++; if(num==0){//定义三个定时器,定时落3批字(定时器多了会卡) console.log(1); setInterval("clone()",400); num++; }else if(num<=4){ setInterval("clone_del()",400); num++; } //clone(); x+=20; }else{ index=0; hight+=20; k++; if(k==(array.length)-1){ clearInterval(tId); alert('结束'); } x=500; } } //克隆一个雪花模板,定义雪花的初始样式(不删除元素) function clone(){ startLeft = Math.random() * documentWidth; y_start= Math.random() * documentHieght; if(last==flake.html()){ return; } last=flake.html(); flake.clone().appendTo($("body")).css({ "left": startLeft , "right":y_start, "opacity": startOpacity, "font-size":15, "top": "-25px", }).animate({ //执行动画 "left": x, "right":y_end, //"opacity": endOpacity, "top": hight, }, durationTime, function() { //4、当雪花落下后，删除雪花。 //$(this).remove(); }); } //克隆模版(并且删除元素) function clone_del(){ startLeft = Math.random() * documentWidth; y_start= Math.random() * documentHieght; flake.clone().appendTo($("body")).css({ "left":startLeft , "right":y_start, "opacity": startOpacity, "font-size":15, "top": "-25px", }).animate({ //执行动画 "left": x, "right":y_end, //"opacity": endOpacity, "top": hight, }, durationTime, function() { //4、当雪花落下后，删除雪花。 $(this).remove(); }); } function snow() { var arrayCopy=array.slice(0); //1、定义一片雪花模板 //获取页面的宽度，利用这个数来算出，雪花开始时left的值 var documentWidth = $(document).width(); //获取页面的高度相当于雪花下落结束时Y轴的位置 var documentHieght = $(document).height(); //定义生成一片雪花的毫秒数 var millisec = 100; //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花； setInterval(function() { if(index2<arrayCopy[k2].length){ flakeFlow.html(arrayCopy[k].charAt(index2)); index2++; console.log(flake.html()); }else if((k==arrayCopy.length-1) && (index==arrayCopy[k].length)){ index2 = 0,j2=0,k2=0; }else{ index2=0; k2++; } //随机生成雪花下落开始时left的值，相当于开始时X轴的位置 var startLeft = Math.random() * documentWidth; //随机生成雪花下落结束时left的值，相当于结束时X轴的位置 var endLeft = Math.random() * documentWidth; //随机生成雪花大小 var flakeSize = 5 + 20 * Math.random(); //随机生成雪花下落持续时间 var durationTime = 4000 + 7000 * Math.random(); //随机生成雪花下落开始时的透明度 var startOpacity = 0.7 + 0.3 * Math.random(); //随机生成雪花下落结束时的透明度 var endOpacity = 0.2 + 0.2 * Math.random(); //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中 flakeFlow.clone().appendTo($("body")).css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": "-25px", }).animate({ //执行动画 "left": endLeft, "opacity": endOpacity, "top": documentHieght }, durationTime, function() { //4、当雪花落下后，删除雪花。 $(this).remove(); }); }, millisec); }; </script> </body> </html>

评论收藏

内容反馈