HTML5+CSS3小实例：流星雨动画
发布时间：2023年12月20日
目录
?一、运行效果
图片效果
二、项目概述
???????该项目是一个使用HTML和CSS实现的流星雨动画效果。通过添加多个具有动画效果的元素，模拟了夜空中流星闪烁的效果。具体实现包括背景渐变、流星的运动轨迹、流星尾部的动画效果等。
三、开发环境
开发环境：VsCode
编程语言：HTML5+CSS3
操作系统：Windows
四、实现步骤及代码
1.创建空文件夹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号《编程乐学》- 流星雨动画</title>
</head>
<body>
</body>
</html>
2.完成页面内容
<div class="night">
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
</div>3.完成css样式? ??? ?
????????这段代码实现了一个动态的流星雨效果。通过使用HTML和CSS，我们创建了一个包含多个流星的动画效果。背景采用了径向渐变的方式，给人一种夜空的感觉。主要的动画效果是通过对流星元素应用不同的延迟和持续时间来实现的。每个流星由一个主要的元素和两个伪元素构成，通过对伪元素的动画效果进行控制，实现了流星尾部的闪烁效果。通过调整不同流星的位置、延迟和持续时间，可以实现多个流星在不同时间点出现和消失的效果。整体效果非常逼真，给人一种夜空中有流星划过的感觉。
<style>
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
font-family: 'Anton', sans-serif;
justify-content: center;
align-items: center;
}
.night {
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-animation: sky 200000ms linear infinite;
animation: sky 200000ms linear infinite;
}
.shooting_star {
position: absolute;
left: 50%;
top: 50%;
height: 2px;
background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
border-radius: 999px;
-webkit-filter: drop-shadow(0 0 6px #699bff);
filter: drop-shadow(0 0 6px #699bff);
}
.shooting_star::before,
.shooting_star::after {
content: '';
position: absolute;
top: calc(50% - 1px);
right: 0;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
-webkit-transform: translateX(50%) rotateZ(45deg);
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
-webkit-animation: shining 3000ms ease-in-out infinite;
animation: shining 3000ms ease-in-out infinite;
}
.shooting_star::after {
-webkit-transform: translateX(50%) rotateZ(-45deg);
transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
top: calc(50% - 185px);
left: calc(50% - 150px);
-webkit-animation-delay: 8971ms;
animation-delay: 8971ms;
}
.shooting_star:nth-child(1)::before,
.shooting_star:nth-child(1)::after,
.shooting_star:nth-child(1)::after {
-webkit-animation-delay: 8971ms;
animation-delay: 8971ms;
}
.shooting_star:nth-child(2) {
top: calc(50% - 50px);
left: calc(50% - 179px);
-webkit-animation-delay: 9256ms;
animation-delay: 9256ms;
}
.shooting_star:nth-child(2)::before,
.shooting_star:nth-child(2)::after,
.shooting_star:nth-child(2)::after {
-webkit-animation-delay: 9256ms;
animation-delay: 9256ms;
}
.shooting_star:nth-child(3) {
top: calc(50% - -146px);
left: calc(50% - 135px);
-webkit-animation-delay: 8700ms;
animation-delay: 8700ms;
}
.shooting_star:nth-child(3)::before,
.shooting_star:nth-child(3)::after,
.shooting_star:nth-child(3)::after {
-webkit-animation-delay: 8700ms;
animation-delay: 8700ms;
}
.shooting_star:nth-child(4) {
top: calc(50% - -77px);
left: calc(50% - 157px);
-webkit-animation-delay: 3147ms;
animation-delay: 3147ms;
}
.shooting_star:nth-child(4)::before,
.shooting_star:nth-child(4)::after,
.shooting_star:nth-child(4)::after {
-webkit-animation-delay: 3147ms;
animation-delay: 3147ms;
}
.shooting_star:nth-child(5) {
top: calc(50% - -183px);
left: calc(50% - 8px);
-webkit-animation-delay: 6588ms;
animation-delay: 6588ms;
}
.shooting_star:nth-child(5)::before,
.shooting_star:nth-child(5)::after,
.shooting_star:nth-child(5)::after {
-webkit-animation-delay: 6588ms;
animation-delay: 6588ms;
}
.shooting_star:nth-child(6) {
top: calc(50% - -29px);
left: calc(50% - 195px);
-webkit-animation-delay: 8009ms;
animation-delay: 8009ms;
}
.shooting_star:nth-child(6)::before,
.shooting_star:nth-child(6)::after,
.shooting_star:nth-child(6)::after {
-webkit-animation-delay: 8009ms;
animation-delay: 8009ms;
}
.shooting_star:nth-child(7) {
top: calc(50% - 95px);
left: calc(50% - 69px);
-webkit-animation-delay: 5420ms;
animation-delay: 5420ms;
}
.shooting_star:nth-child(7)::before,
.shooting_star:nth-child(7)::after,
.shooting_star:nth-child(7)::after {
-webkit-animation-delay: 5420ms;
animation-delay: 5420ms;
}
.shooting_star:nth-child(8) {
top: calc(50% - -59px);
left: calc(50% - 70px);
-webkit-animation-delay: 9378ms;
animation-delay: 9378ms;
}
.shooting_star:nth-child(8)::before,
.shooting_star:nth-child(8)::after,
.shooting_star:nth-child(8)::after {
-webkit-animation-delay: 9378ms;
animation-delay: 9378ms;
}
.shooting_star:nth-child(9) {
top: calc(50% - 76px);
left: calc(50% - 238px);
-webkit-animation-delay: 2845ms;
animation-delay: 2845ms;
}
.shooting_star:nth-child(9)::before,
.shooting_star:nth-child(9)::after,
.shooting_star:nth-child(9)::after {
-webkit-animation-delay: 2845ms;
animation-delay: 2845ms;
}
.shooting_star:nth-child(10) {
top: calc(50% - 83px);
left: calc(50% - 6px);
-webkit-animation-delay: 5205ms;
animation-delay: 5205ms;
}
.shooting_star:nth-child(10)::before,
.shooting_star:nth-child(10)::after,
.shooting_star:nth-child(10)::after {
-webkit-animation-delay: 5205ms;
animation-delay: 5205ms;
}
.shooting_star:nth-child(11) {
top: calc(50% - -137px);
left: calc(50% - 267px);
-webkit-animation-delay: 808ms;
animation-delay: 808ms;
}
.shooting_star:nth-child(11)::before,
.shooting_star:nth-child(11)::after,
.shooting_star:nth-child(11)::after {
-webkit-animation-delay: 808ms;
animation-delay: 808ms;
}
.shooting_star:nth-child(12) {
top: calc(50% - 12px);
left: calc(50% - 8px);
-webkit-animation-delay: 2406ms;
animation-delay: 2406ms;
}
.shooting_star:nth-child(12)::before,
.shooting_star:nth-child(12)::after,
.shooting_star:nth-child(12)::after {
-webkit-animation-delay: 2406ms;
animation-delay: 2406ms;
}
.shooting_star:nth-child(13) {
top: calc(50% - 148px);
left: calc(50% - 47px);
-webkit-animation-delay: 7566ms;
animation-delay: 7566ms;
}
.shooting_star:nth-child(13)::before,
.shooting_star:nth-child(13)::after,
.shooting_star:nth-child(13)::after {
-webkit-animation-delay: 7566ms;
animation-delay: 7566ms;
}
.shooting_star:nth-child(14) {
top: calc(50% - -28px);
left: calc(50% - 75px);
-webkit-animation-delay: 7634ms;
animation-delay: 7634ms;
}
.shooting_star:nth-child(14)::before,
.shooting_star:nth-child(14)::after,
.shooting_star:nth-child(14)::after {
-webkit-animation-delay: 7634ms;
animation-delay: 7634ms;
}
.shooting_star:nth-child(15) {
top: calc(50% - -37px);
left: calc(50% - 203px);
-webkit-animation-delay: 7743ms;
animation-delay: 7743ms;
}
.shooting_star:nth-child(15)::before,
.shooting_star:nth-child(15)::after,
.shooting_star:nth-child(15)::after {
-webkit-animation-delay: 7743ms;
animation-delay: 7743ms;
}
.shooting_star:nth-child(16) {
top: calc(50% - 41px);
left: calc(50% - 256px);
-webkit-animation-delay: 2888ms;
animation-delay: 2888ms;
}
.shooting_star:nth-child(18)::after {
-webkit-animation-delay: 7883ms;
animation-delay: 7883ms;
}
.shooting_star:nth-child(19) {
top: calc(50% - -69px);
left: calc(50% - 47px);
-webkit-animation-delay: 3339ms;
animation-delay: 3339ms;
}
.shooting_star:nth-child(19)::before,
.shooting_star:nth-child(19)::after,
.shooting_star:nth-child(19)::after {
-webkit-animation-delay: 3339ms;
animation-delay: 3339ms;
}
.shooting_star:nth-child(20)::before,
.shooting_star:nth-child(20)::after,
.shooting_star:nth-child(20)::after {
-webkit-animation-delay: 7963ms;
animation-delay: 7963ms;
}
@-webkit-keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
@-webkit-keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
@-webkit-keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
@keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
</style>五、项目总结? ?
? ?? ?该项目是一个简单的动画效果展示，通过使用HTML和CSS实现了流星雨的动态效果。整个页面背景使用了径向渐变，创造了夜空的效果。通过添加多个具有动画效果的元素，模拟了流星在夜空中划过的效果。其中，流星的运动轨迹使用了旋转和位移的动画，流星尾部的动态效果使用了尺寸和透明度的动画。通过调整动画的延迟和持续时间，实现了多个流星在不同时间点出现和消失的效果。
六、源码获取
?????????还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。
文章来源:https://blog.csdn.net/qq_29823791/article/details/135091717
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- MySQL进阶篇：索引（概述，结构，分类，语法，SQL性能分析，索引使用，设计原则）
- 设置模式：适配器模式
- java-jdbc快速生成无序数据并插入MySQL
- LN和BN
- 202312 青少年软件编程（C/C++）等级考试试卷（四级）电子学会真题
- 2024.1.2 安装JDK和Eclipse，并配置java编译环境
- 379、仿真-基于51单片机的声控灯人体感应灯光照检测设计(程序+Proteus仿真+原理图+程序流程图+元器件清单+配套资料等)
- TS 快速入门，正确姿势
- 抖音小程序游戏上架需求和资质
- linux安装anaconda