本篇文章给大家带来的内容是介绍CSS+JS如何实现浪漫流星雨动画效果?(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们来看看效果图:
下面我们来看看如何实现:
HTML代码:
< body > < p class = “container” > < p id = “mask” > </ p > < p id = “sky” > </ p > < p id = “moon” > </ p > < p id = “stars” > </ p > < p class = “cloud cloud-1” ></ p > <p class = “cloud cloud-2” > </ p > < p class = “cloud cloud-3” > </ p > </ p > </ body >
CSS代码:
/* - - - - - - 重启 - - - - - - */ * { 保证金:0 ; 填充:0 ; } html, body { width:100% ; 最小宽度:1000px ; 身高:100% ; 最小高度:400px ; 溢出:隐藏; } / * ------------画布------------ * / .container { position:relative; 身高:100% ; } / *遮罩层* / #mask { position:absolute; 宽度:100% ; 身高:100% ; background:rgba(0,0,0,.8); z-index:900 ; } / *天空背景* / #sky { width:100% ; 身高:100% ; background:线性渐变(rgba(0,150,255,1),rgba(0,150,255,.8),rgba(0,150,255,.5)); } / *月亮* / #moon { position:absolute; 上:50px ; 右:200px ; 宽度:120px ; 身高:120px ; 背景:rgba(251,255,25,0.938); border-radius:50% ; box-shadow:0 0 20px rgba(251,255,25,0.5); z-index:9999 ; } / *闪烁星星* / .blink { position:absolute; background:rgb(255,255,255); border-radius:50% ; box-shadow:0 0 5px rgb(255,255,255); 不透明度:0 ; z-index:10000 ; } / *流星* / .star { position:absolute; 不透明度:0 ; z-index:10000 ; } .star :: after { content:“” ; 显示:块; 边界:坚固; border-width:2px 0 2px 80px ; / *流星随长度逐渐缩小* / border-color:透明透明透明rgba(255,255,255,1); border-radius:2px 0 0 2px ; transform:rotate(-45deg); transform-origin:0 0 0 ; 盒子阴影:0 0 20px rgba(255,255,255,.3); } / *云* / .cloud { position:absolute; 宽度:100% ; 身高:100px ; } .cloud-1 { bottom: - 100px ; z-index:1000 ; 不透明度:1 ; 变换:规模(1.5); -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -ms-transform:scale(1.5); -o-transform:scale(1.5); } .cloud-2 { left: - 100px ; 底部: - 50px ; z-index:999 ; 不透明度:。5 ; 变换:旋转(7deg); -webkit-transform:rotate(7deg); -moz-transform:rotate(7deg); -ms-transform:rotate(7deg); -o-transform:rotate(7deg); } .cloud-3 { left:120px ; 底部: - 50px ; z-index:999 ; 不透明度:。1 ; transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -ms-transform:rotate(-10deg); -o-transform:rotate(-10deg); } .circle { position:absolute; border-radius:50% ; 背景:#fff ; } .circle-1 { width:100px ; 身高:100px ; 上: - 50px ; 左:10px ; } .circle-2 { width:150px ; 身高:150px ; 上: - 50px ; 左:30px ; } .circle-3 { width:300px ; 身高:300px ; 上: - 100px ; 左:80px ; } .circle-4 { width:200px ; 身高:200px ; 上: - 60px ; 左:300px ; } .circle-5 { width:80px ; 身高:80px ; 上: - 30px ; 左:450px ; } .circle-6 { width:200px ; 身高:200px ; 上: - 50px ; 左:500px ; } .circle-7 { width:100px ; 身高:100px ; 上: - 10px ; 左:650px ; } .circle-8 { width:50px ; 身高:50px ; 上:30px ; 左:730px ; } .circle-9 { width:100px ; 身高:100px ; 上:30px ; 左:750px ; } .circle-10 { width:150px ; 身高:150px ; 上:10px ; 左:800px ; } .circle-11 { width:150px ; 身高:150px ; 上: - 30px ; 左:850px ; } .circle-12 { width:250px ; 身高:250px ; 上: - 50px ; 左:900px ; } .circle-13 { width:200px ; 身高:200px ; 上: - 40px ; 左:1000px ; } .circle-14 { width:300px ; 身高:300px ; 上: - 70px ; 左:1100px ; }
JS代码:
//流星动画 setInterval(function() { const obj = addChild(“#sky”,“p”,2,“star”); for(let i = 0 ; i <obj.children.length; i ++){ const top = -50 + Math .random()* 200 + “px”, left = 200 + Math .random()* 1200 + “px”, scale = 0.3 + Math .random()* 0.5 ; const timer = 1000 + Math .random()* 1000 ; obj.children [i] .style.top = top; obj.children [i] .style.left = left; obj.children [i] .style.transform = `scale($ {scale})` ; requestAnimation({ ele:obj.children [i], attr:[ “top”,“left”,“opacity” ], 值:[ 150,-150,.8 ], time:timer, flag:false, fn:function() { requestAnimation({ ELE:obj.children [I], ATTR:“顶”,“左”,“不透明” ], 值:[ 150,-150,0 ], 时间:定时器, 标志:假, FN:() => { obj.parent.removeChild(obj.children [I]); } }) } }); } },1000); //闪烁星星动画 setInterval(function() { const obj = addChild(“#stars”,“p”,2,“blink”); for(let i = 0 ; i <obj.children.length; i ++){ const top = -50 + Math .random()* 500 + “px”, left = 200 + Math .random()* 1200 + “px”, round = 1 + Math .random()* 2 + “px” ; const timer = 1000 + Math .random()* 4000 ; obj.children [i] .style.top = top; obj.children [i] .style.left = left; obj.children [i] .style.width = round; obj.children [i] .style.height = round; requestAnimation({ ele:obj.children [i], attr:“opacity”, 值:.5, time:timer, flag:false, fn:function() { requestAnimation({ ele:obj.children [i], attr:“opacity”, value:0, time:timer, flag:false, fn:function() { obj.parent.removeChild(obj.children [I]); } }); } }); } },1000); //月亮移动 requestAnimation({ ele:“#moon”, attr:“right”, 值:1200, 时间:10000000, }); //添加云 const clouds = addChild(“。cloud”,“p”,14,“circle”,true); for(let i = 0 ; i <clouds.children.length; i ++){ for(let j = 0 ; j <clouds.children [i] .length;){ clouds.children [i] [j] .classList.add(`circle- $ {++ j} `); } } //云动画 let flag = 1 ; 的setInterval( 功能() { const clouds = document .querySelectorAll(“。cloud”); const left = Math .random()* 5 ; bottom = Math .random()* 5 ; let timer = 0 ; for(let i = 0 ; i <clouds.length; i ++){ requestAnimation({ ele:clouds [i], attr:[ “left”,“bottom” ], value:flag%2?[-left,-bottom]:[left,bottom], time:timer + = 500, flag:false, fn:function() { requestAnimation({ ele:clouds [i], attr:[ “left”,“bottom” ], value:flag%2?[left,bottom]:[ - left,-bottom], time:timer, flag:false }) } }); } 标志++; },2000)
封装方法:
// -------------------------------------------动画---- ----------------------------------------------- //运动动画,调用Tween.js // ele:dom | 班级| id | 标签节点| 类名| id名| 标签名,只支持选择一个节点,类类名以及标签名只能选择页面中第一个 // attr:属性属性名 //值:目标值目标值 //时间:持续时间持续时间 //补间:定时function函数方程 // flag:Boolean判断是按值移动还是按位置移动,默认按位置移动 // fn:callback回调函数 //增加返回值:将内部参数对象返回,可以通过设置返回对象的属性stop为true打断动画 函数 requestAnimation(obj) { // -------------------------------------参数设置--------------------------------------------- //默认属性 const参数= { ele:null, attr:null, value:null, time:1000, tween:“linear”, flag:true, stop:false, fn:“” } //合并传入属性 Object .assign(parameter,obj); //覆盖重名属性 // -------------------------------------动画设置--------- ------------------------------------ //创建运动方程初始参数,方便复用 let start = 0 ; //用于保存初始时间戳 let target =(typeof parameter.ele === “string”?document .querySelector(parameter.ele):parameter.ele),//目标节点 attr = parameter.attr,//目标属性 beginAttr = parseFloat(getComputedStyle(target)[attr]),// attr起始值 value = parameter.value,//运动目标值 count = value - beginAttr,//实际运动值 time = parameter.time,//运动持续时间, tween = parameter.tween,//运动函数 flag = parameter.flag, callback = parameter.fn,//回调函数 curVal = 0 ; //运动当前值 //判断传入函数是否为数组,多段运动 (function() { if(attr instanceof Array){ beginAttr = []; count = []; 对于(让我的 ATTR){ 常量 VAL = parseFloat(的getComputedStyle(目标)[I]); beginAttr.push(VAL); count.push(value - val); } } if(value instanceof Array){ for(let i in value){ count [i] = value [i] - beginAttr [i]; } } })(); //运动函数 功能 动画(时间戳) { 如果(parameter.stop)返回 ; //打断 //存储初始时间戳 if(!start)start = timestamp; //已运动时间 让 t =时间戳 - 开始; //判断多段运动 if(beginAttr instanceof Array){ // const len = beginAttr.length //存数组长度,复用 //多段运动第1类 - 多属性,同目标,同时间/不同时间 if(typeof count === “number”){ //同目标 //同时间 if(typeof time === “number”){ if(t> time)t = time; //判断是否超出目标值 //循环attr,分别赋值 为(let i in beginAttr){ if(flag)curVal = Tween [tween](t,beginAttr [i],count,time); //调用Tween,返回当前属性值,此时计算方法为移动到 写入位置else curVal = Tween [tween](t,beginAttr [i],count + beginAttr [i],time); //调用Tween,返回当前属性值,此时计算方法为移动了 写入距离if(attr [i] === “opacity”)target.style [attr [i]] = curVal; //给属性赋值 else target.style [attr [i]] = curVal + “px” ; //给属性赋值 if(t <time)requestAnimationFrame(animate); //判断是否运动完 其他回调&& callback(); //调用回调函数 } 回归 ; } //不同时间 if(time instanceof Array){ //循环时间,attr,分别赋值 为(让我在 beginAttr中){ //错误判断 if(!time [i] && time [i]!== 0){ throw new Error( “输入时间的长度不等于属性的长度”); } //判断是否已经完成动画,完成则跳过此次循环 if(parseFloat(getComputedStyle(target)[attr [i]])===(typeof value === “number”?value:value [i]) ) 继续 ; // t =时间戳 - 开始; //每次循环初始化t if(t> time [i])t = time [i]; //判断是否超出目标值 if(flag || attr [i] === “opacity”)curVal = Tween [tween](t,beginAttr [i],count,i); //调用Tween,返回当前属性值,此时计算方法为移动到 写入位置else curVal = Tween [tween](t,beginAttr [i],count + beginAttr [i],i); //调用Tween,返回当前属性值,此时计算方法为移动了 写入距离if(attr [i] === “opacity”)target.style [attr [i]] = curVal; //给属性赋值 else target.style [attr [i]] = curVal + “px” ; //给属性赋值 } if(t < Math .max(... time))requestAnimationFrame(animate); //判断函数是否运动完 其他回调&& callback(); //如果已经执行完时间最长的动画,则调查回调函数 return ; } } //多段运动第2类 - 多属性,不同目标,同时间/不同时间 if(count instanceof Array){ //同时间 if(typeof time === “number”){ if(t> time)t = time; //判断是否超出目标值 for(let i in beginAttr){ //循环attr,count,分别赋值 //错误判断 if(!count [i] && count [i]!== 0){ throw new Error( “输入值的长度不是等于属性的长度“); } if(flag || attr [i] === “opacity”)curVal = Tween [tween](t,beginAttr [i],count [i],time); //调用Tween,返回当前属性值,此时计算方法为移动到 写入位置else curVal = Tween [tween](t,beginAttr [i],count [i] + beginAttr [i],time); //调用Tween,返回当前属性值,此时计算方法为移动了 写入距离if(attr [i] === “opacity”)target.style [attr [i]] = curVal; //给属性赋值 else target.style [attr [i]] = curVal + “px” ; //给属性赋值 } if(t <time)requestAnimationFrame(animate); //判断函数是否运动完 其他回调&& callback(); //如果已经执行完时间最长的动画,则调查回调函数 return ; } //不同时间 if(time instanceof Array){ for(let i in beginAttr){ //错误判断 if(!time [i] && time [i]!== 0){ throw new Error( “输入时间的长度)不等于属性的长度“); } //判断是否已经完成动画,完成则跳过此次循环 if(parseFloat(getComputedStyle(target)[attr [i]])===(typeof value === “number”?value:value [i]) ) 继续 ; if(t> time [i])t = time [i]; //判断是否超出目标值 //错误判断 if(!count [i] && count [i]!== 0){ throw new Error( “输入值的长度不等于属性的长度”); } if(flag || attr [i] === “opacity”)curVal = Tween [tween](t,beginAttr [i],count [i],time [i]); //调用Tween,返回当前属性值,此时计算方法为移动到 写入位置其他 curVal = Tween [tween](t,beginAttr [i],count [i] + beginAttr [i],time [i]) ; //调用Tween,返回当前属性值,此时计算方法为移动了 写入距离if(attr [i] === “opacity”)target.style [attr [i]] = curVal; 否则 target.style [attr [i]] = curVal + “px” ; } if(t < Math .max(... time))requestAnimationFrame(animate); else callback && callback(); 回归 ; } } } //单运动模式 if(t> time)t = time; if(flag || attr === “opacity”)curVal = Tween [tween](t,beginAttr,count,time); //调用Tween,返回当前属性值,此时计算方法为移动到 写入位置else curVal = Tween [tween](t,beginAttr [i],count + beginAttr,time); //调用Tween,返回当前属性值,此时计算方法为移动了 写入距离if(attr === “opacity”)target.style [attr] = curVal; 否则 target.style [attr] = curVal + “px” ; if(t <time)requestAnimationFrame(animate); else callback && callback(); } requestAnimationFrame(动画); 返回参数; //返回对象,供打断或其他用途 } //Tween.js / * * t:时间已过时间 * b:开始起始值 * c:计算总的运动值 * d:持续时间持续时间 * *曲线方程 * * http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html * * / 让 Tween = { linear:function(t,b,c,d) { //匀速 返回 c * t / d + b; }, easeIn:function(t,b,c,d) { //加速曲线 return c *(t / = d)* t + b; }, easeOut:function(t,b,c,d) { //减速曲线 return -c *(t / = d)*(t - 2)+ b; }, easeBoth:function(t,b,c,d) { //加速减速曲线 if((t / = d / 2)< 1){ return c / 2 * t * t + b; } return -c / 2 *(( - t)*(t - 2) - 1)+ b; }, easeInStrong:function(t,b,c,d) { //加加速曲线 return c *(t / = d)* t * t * t + b; }, easeOutStrong:function(t,b,c,d) { //减减曲线 返回 -c *((t = t / d - 1)* t * t * t - 1)+ b; }, easeBothStrong:function(t,b,c,d) { //加速减减速线 如果((t / = d / 2)< 1){ return c / 2 * t * t * t * t + b; } return -c / 2 *((t - = 2)* t * t * t - 2)+ b; }, elasticIn:function(t,b,c,d,a,p) { //正弦衰减曲线(弹动渐入) if(t === 0){ return b; } if((t / = d)== 1){ return b + c; } if(!p){ p = d * 0.3 ; } if(!a || a < Math .abs(c)){ a = c; var s = p / 4 ; } else { var s = p /(2 * Math .PI)* Math .asin(c / a); } 返回 - (A * 数学 .pow(2,10 *(T - = 1))* 数学 .sin((T * d - S)*(2 * 数学 .PI)/ P))+ B; }, elasticOut:function(t,b,c,d,a,p) { //正弦增强曲线(弹动渐出) if(t === 0){ return b; } if((t / = d)== 1){ return b + c; } if(!p){ p = d * 0.3 ; } if(!a || a < Math .abs(c)){ a = c; var s = p / 4 ; } else { var s = p /(2 * Math .PI)* Math .asin(c / a); } 返回 a * Math .pow(2,-10 * t)* Math .sin((t * d - s)*(2 * Math .PI)/ p)+ c + b; }, elasticBoth:function(t,b,c,d,a,p) { if(t === 0){ return b; } if((t / = d / 2)== 2){ return b + c; } if(!p){ p = d *(0.3 * 1.5); } if(!a || a < Math .abs(c)){ a = c; var s = p / 4 ; } else { var s = p /(2 * Math .PI)* Math .asin(c / a); } 如果(T < 1){ 返回 -0.5 *(A * 数学 .pow(2,10 *(T - = 1))* 数学 .sin((T * d - S)*(2 * 数学 .PI)/ p))+ b; } 返回 a * Math .pow(2,-10 *(t - = 1))* Math .sin((t * d - s)*(2 * Math .PI)/ p)* 0.5 + c + b; }, backIn:function(t,b,c,d,s) { //回退加速(回退渐入) if(typeof s == 'undefined'){ s = 1.70158 ; } return c *(t / = d)* t *((s + 1)* t - s)+ b; }, backOut:function(t,b,c,d,s) { if(typeof s == 'undefined'){ s = 3.70158 ; //回缩的距离 } return c *((t = t / d - 1)* t *((s + 1)* t + s)+ 1)+ b; }, backBoth:function(t,b,c,d,s) { if(typeof s == 'undefined'){ s = 1.70158 ; } if((t / = d / 2)< 1){ return c / 2 *(t * t *(((s * =(1.525))+ 1)* t - s))+ b; } return c / 2 *((t - = 2)* t *(((s * =(1.525))+ 1)* t + s)+ 2)+ b; }, bounceIn:function(t,b,c,d) { //弹球渐出) 返回 c - Tween [ 'bounceOut' ](d - t,0,c,d)+ b; }, bounceOut:function(t,b,c,d) { if((t / = d)<(1 / 2.75)){ return c *(7.5625 * t * t)+ b; } else if(t <(2 / 2.75)){ return c *(7.5625 *(t - =(1.5 / 2.75))* t + 0.75)+ b; } else if(t <(2.5 / 2.75)){ return c *(7.5625 *(t - =(2.25 / 2.75))* t + 0.9375)+ b; } return c *(7.5625 *(t - =(2.625 / 2.75))* t + 0.984375)+ b; }, bounceBoth:函数(T,B,C,d) { 如果(T <d / 2){ 返回吐温[ 'bounceIn' ](T * 2,0,C,d)* 0.5 + B; } return Tween [ 'bounceOut' ](t * 2 - d,0,c,d)* 0.5 + c * 0.5 + b; } } // ------------------------------------------- DOM操作--- ------------------------------------------------ //添加节点 // ele:父节点,支持输入变量,id值,类值,标签值。除变量外,其余值必须为字符串 //节点:添加的标签名,值为字符串 // n:节点添加个数 // className:节点绑定的类名,值为字符串,多个类名用空格隔开 //布尔:是否选中所有目标父节点。可选参数,不输入则判定为false,则只匹配选中的第一个节点 函数 addChild(ele,node,n,className,boolean) { //获取节点 let parent = null ; if(typeof ele!== “string”)parent = ele; else if(ele [ 0 ] === “#”)parent = document .getElementById(ele.slice(1)); else if(ele [ 0 ] === “。”){ if(boolean === false)parent = document .getElementsByClassName(ele.slice(1))[ 0 ]; else parent = document .getElementsByClassName(ele.slice(1)); } else { if(boolean === false)parent = docuemnt.getElementsByTagName(ele)[ 0 ]; else parent = document .getElementsByTagNameNS(ele); } //声明用于存储父节点及子节点的对象 const obj = { “parent”:parent, “children”:[] }; //添加节点 if(boolean){ for(let i = 0 ; i <parent.length; i ++){ //创建容器碎片 const fragment = document .createDocumentFragment(); //保存子节点,用于返回值 obj.children [i] = []; for(let j = 0 ; j <n; j ++){ const target = document .createElement(node); target.className = className; fragment.appendChild(目标); //添加子节点到数组,用于返回值 obj.children [i] [j] =目标; } 父[I] .appendChild(片段) } } else { //创建碎片容器 const fragment = document .createDocumentFragment(); for(let i = 0 ; i <n; i ++){ const target = document .createElement(node); target.className = className; fragment.appendChild(目标); //添加子节点,用于返回值 obj.children [i] =目标; } //将碎片容器一次性添加到父节点 parent.appendChild(片段); } //返回参数,供动画函数调用 return obj; }
案例解析
HTML
由于节点很多,并且我想尽量做得逼真有趣有点,还给节点加了随机位置。所以节点的输出都是用JS控制的,HTML这边只写了几个父元素盒子,加上相应的ID名和类类名,结构相对简单。
CSS
CSS部分的难点就是流星的样式和用圈圈画云层,然后将云层堆叠出立体效果。
首先说一下流星的样式:
#sky .star { position:absolute; 不透明度:0 ; z-index:10000 ; } .star :: after { content:“” ; 显示:块; 边界:坚固; border-width:2px 0 2px 80px ; / *流星随长度逐渐缩小* / border-color:透明透明透明rgba(255,255,255,1); border-radius:2px 0 0 2px ; transform:rotate(-45deg); transform-origin:0 0 0 ; 盒子阴影:0 0 20px rgba(255,255,255,.3); }
先提取了公共样式,添加定位属性;
然后在星后通过后伪类添加流星,用边界特性画:
1)模型绘制:border-width的顺序为四边top,right,bottom,left,同理border-color的顺序也为四边top,right,bottom,left。这样将border-width与border-color一一对应后,就能看出2px的是流星的宽度,80px是流星的长度,而0像素流星就是尾巴的这样就形成了一个。头部2px的宽,尾部0像素,长度80px的流星模型 ;
2)稍微逼真:通过边界半径?给流星的头部增加个圆角,让它看起来更逼真最后通过roteta旋转一个角度,让它看起来像是往下掉;
3)增加闪光:通过箱阴影给流星增加一点光晕,让它看起来有闪光的效果;
通过以上3步,一个流星就画好了。
然后是画云:
因为云的代码比较长,这里就不贴出来了方法无非是通过一个一个的圆,相互叠加覆盖,完成一个云朵的形状。
完成一个云层之后,copy一个,然后多个云层通过rotate,opacity,left定位等,做出一个渐隐叠加的立体效果;
JS
JS部分以流星举例说明
setInterval(function() { const obj = addChild(“#sky”,“p”,2,“star”); //插入流星 for(let i = 0 ; i <obj.children.length; i ++){ //随机位置 const top = -50 + Math .random()* 200 + “px”, left = 200 + Math .random()* 1200 + “px”, scale = 0.3 + Math .random()* 0.5 ; const timer = 1000 + Math .random()* 1000 ; obj.children [i] .style.top = top; obj.children [i] .style.left = left; obj.children [i] .style.transform = `scale($ {scale})` ; //添加动画 requestAnimation({ ele:obj.children [i], attr:[ “top”,“left”,“opacity” ], 值:[ 150,-150,.8 ], time:timer, flag:false, fn:function() { requestAnimation({ ELE:obj.children [I], ATTR:“顶”,“左”,“不透明” ], 值:[ 150,-150,0 ], 时间:定时器, 标志:假, FN:() => { obj.parent.removeChild(obj.children [I]); //动画结束删除节点 } }) } }); } },1000);
这里边用到了我自己封装的两个方法,一个是基于requestAnimationFrame的requestAnimation,以及基于appendChild的addChild。
为了达成星星位置随机的效果,通过定时器的setInterval的不停插入与删除流星:
首先,每次添加2个流星到页面,但是定时器的间隔时间小于流星的动画时间,这样就能保证页面中的流星的数量不是一个固定值,但肯定是大于2的。不然一次2个流星略显冷清;
然后,通过对循环(也可以用为式,换的,都行。对于-的最简单)给每个新添加到页面中的流星一个随机的位置(顶部,左侧),随机的大小(规模),随机的动画执行时间(定时器);
最后,在用于循环中,给每个新添加到页面中的流星加上动画,并通过回调函数在执行完动画后删除节点。这里要注意的是,要动画分成两个阶段(出现与消失,主要是opacity控制)。另外我这里的处理,每个流星都移动相同的距离300px,这个距离我觉得也可以通过随机数控制,但我犯了个懒,就没有做。
小问题
目前我发现的问题有2个:
一是DOM操作本身的问题页面不停的添加与删除节点,造成不停地。回流与重绘,很耗性能;
二是requestAnimationFrame本身的问题因为定时器不断在添加节点,而requestAnimationFrame的特性- 当离开当前页面去浏览其他页面时,动画会暂停。这就造成了一个问题,节点一直在加,但动画全在停那没有执行那么下次再回到这个页面的时候,就吊杆!!!动画就炸了,你会看到画面一卡,很多小蝌蚪集体出动去找妈妈。
结语
这个小案例虽然从难度上来看很简单,但是它可拓展性很高, 比如表个白啊,寄个相思,耍个浪漫啊等等,用纯CSS也可以实现。
以上就是CSS+JS如何实现浪漫流星雨动画效果?(代码示例)的详细内容,更多请关注php中文网其它相关文章!