作者:无痕 | 来源:互联网 | 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
-
本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ...
[详细]
蜡笔小新 2023-12-14 14:25:33
-
本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ...
[详细]
蜡笔小新 2023-12-14 13:11:00
-
本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ...
[详细]
蜡笔小新 2023-12-13 13:24:33
-
本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ...
[详细]
蜡笔小新 2023-12-13 12:54:29
-
在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ...
[详细]
蜡笔小新 2023-12-13 12:08:09
-
猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ...
[详细]
蜡笔小新 2023-12-13 12:04:03
-
本文讲解了CSS中标签选择器、类名选择器和ID选择器的使用区别,主要包括加空格和不加空格的区别。通过示例代码,说明了加空格表示选择当前节点的后代节点,而不加空格表示一个元素的多个类名不能加空格的规则。 ...
[详细]
蜡笔小新 2023-12-13 09:13:35
-
本文介绍了CentOS 7部署KVM虚拟化环境的架构,详细解释了虚拟化技术的概念和原理,包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ...
[详细]
蜡笔小新 2023-12-12 21:38:57
-
本文介绍了一种解析GRE报文长度的方法,通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ...
[详细]
蜡笔小新 2023-12-12 20:55:05
-
Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ...
[详细]
蜡笔小新 2023-10-16 11:26:13
-