作者:无痕 | 来源:互联网 | 2020-08-18 23:51
本篇文章给大家带来的内容是关于CSS 、JS实现浪漫流星雨动画,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。效果如下:
HTML
由于节点很多,并且我想尽量做得逼真有趣有点,还给节点加了随机位置。所以节点的输出都是用JS控制的,HTML这边只写了几个父元素盒子,加上相应的ID名和类类名,结构相对简单。
CSS
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.parent.removeChild(obj.children [I]); //动画结束删除节点
}
})
}
});
}
},1000);
这里边用到了我自己封装的两个方法,一个是基于requestAnimationFrame的requestAnimation,以及基于appendChild的addChild。
为了达成星星位置随机的效果,通过定时器的setInterval的不停插入与删除流星:
首先,每次添加2个流星到页面,但是定时器的间隔时间小于流星的动画时间,这样就能保证页面中的流星的数量不是一个固定值,但肯定是大于2的。不然一次2个流星略显冷清;
然后,通过对循环(也可以用为式,换的,都行。对于-的最简单)给每个新添加到页面中的流星一个随机的位置(顶部,左侧),随机的大小(规模),随机的动画执行时间(定时器);
最后,在用于循环中,给每个新添加到页面中的流星加上动画,并通过回调函数在执行完动画后删除节点。这里要注意的是,要动画分成两个阶段(出现与消失,主要是opacity控制)。另外我这里的处理,每个流星都移动相同的距离300px,这个距离我觉得也可以通过随机数控制,但我犯了个懒,就没有做。
附上代码:
HTML:
div >
div >
div >
div >
div >
div >
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.parent.removeChild(obj.children [I]);
}
})
}
});
}
},1000);
//闪烁星星动画
setInterval(function() {
const obj = addChild(“#stars”,“div”,2,“blink”); for(let i = 0 ; i 以上就是对CSS 、JS实现浪漫流星雨动画的全部介绍,如果您想了解更多有关CSS教程,请关注PHP中文网。
以上就是CSS 、JS实现浪漫流星雨动画的详细内容,更多请关注 第一PHP社区 其它相关文章!
推荐阅读
-
本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ...
[详细]
蜡笔小新 2023-12-14 22:40:22
-
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
-
-
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
-
本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
[详细]
蜡笔小新 2023-12-14 15:43:50
-
本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ...
[详细]
蜡笔小新 2023-12-14 15:08:18
-
本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ...
[详细]
蜡笔小新 2023-12-14 12:09:13
-
本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ...
[详细]
蜡笔小新 2023-12-13 21:31:18
-
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
-
1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ...
[详细]
蜡笔小新 2023-12-13 19:12:25
-
1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ...
[详细]
蜡笔小新 2023-12-13 18:03:01
-
本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ...
[详细]
蜡笔小新 2023-12-13 16:16:05
-
本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ...
[详细]
蜡笔小新 2023-12-13 15:50:17
-
本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ...
[详细]
蜡笔小新 2023-12-13 15:38:19
-
本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ...
[详细]
蜡笔小新 2023-12-13 13:58:25
-
本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ...
[详细]
蜡笔小新 2023-12-13 13:24:33
-