Home>Article>Web Front-end> How to achieve romantic meteor shower animation effect with CSS+JS? (code example)

How to achieve romantic meteor shower animation effect with CSS+JS? (code example)

青灯夜游
青灯夜游 forward
2018-11-10 17:16:58 2873browse

The content of this article is to introduce how to realize the romantic meteor shower animation effect with CSS JS? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First let’s take a look at the renderings:

How to achieve romantic meteor shower animation effect with CSS+JS? (code example)

Let’s do it next See how to do it:

HTML code:

p > p > p > p > p > 

p > p > p > body >

CSS code:

/* - - - - - - 重启 - - - - - - */ * { 保证金: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 code:

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

Encapsulation method:

// -------------------------------------------动画---- ----------------------------------------------- //运动动画,调用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 
Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete