CSS 、JS实现浪漫流星雨动画CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

< body >< div class = “container” >< div id = “mask” >< div id = “sky” >< div id = “moon” >< div id = “stars” >< div class = “cloud cloud-1” >
< div class = “cloud cloud-3” >

 /* - - - - - - 重启 - - - - - - */ * { 保证金：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 ; }

 //流星动画 setInterval（function（） { const obj = addChild（“#sky”，“div”，2，“star”）; for（let i = 0 ; i  { obj.parent.removeChild（obj.children [I]）; } }） } }）; } }，1000）; //闪烁星星动画 setInterval（function（） { const obj = addChild（“#stars”，“div”，2，“blink”）; for（let i = 0 ; i 

 // -------------------------------------------动画---- ----------------------------------------------- //运动动画，调用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 [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 [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 

 #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）; }