头闻号

广州美当家化妆品有限公司

洗面奶|化妆水|面膜|睫毛膏|护肤膏霜|护肤乳液

首页 > 新闻中心 > 科技常识:CSS 、JS实现浪漫流星雨动画
科技常识:CSS 、JS实现浪漫流星雨动画
发布时间:2024-12-23 17:31:56        浏览次数:2        返回列表

今天小编跟大家讲解下有关CSS 、JS实现浪漫流星雨动画 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS 、JS实现浪漫流星雨动画 的相关资料,希望小伙伴们看了有所帮助。

1 效果图

2 源码

HTML

< body > < div class = “container” > < div id = “mask” > </ div > < div id = “sky” > </ div > < div id = “moon” > </ div > < div id = “stars” > </ div > < div class = “cloud cloud-1” ></ div > <div class = “cloud cloud-2” > </ div > < div class = “cloud cloud-3” > </ div > </ div > </ 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” “div” 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” “div” 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” “div” 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;}

3 案例解析

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” “div” 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 这个距离我觉得也可以通过随机数控制 但我犯了个懒 就没有做。

4 小问题

目前我发现的问题有2个:

一是DOM操作本身的问题页面不停的添加与删除节点 造成不停地。回流与重绘 很耗性能;

二是requestAnimationframe本身的问题因为定时器不断在添加节点 而requestAnimationframe的特性- 当离开当前页面去浏览其他页面时 动画会暂停。这就造成了一个问题 节点一直在加 但动画全在停那没有执行那么下次再回到这个页面的时候 就吊杆!!!动画就炸了 你会看到画面一卡 很多小蝌蚪集体出动去找妈妈。

5 结语

这个小案例虽然从难度上来看很简单 但是它可拓展性很高 - 比如表个白啊 寄个相思 耍个浪漫啊等等 用纯CSS也可以实现。

以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。

来源:爱蒂网