如何使用 CSS 创建流星动画效果?
流星看起来像是这些小小的颤动在寒冷的夜空中留下的微光，散发出温暖的光芒。流星效果是暗色主题网站最独特的背景效果之一。流星动画是一个绝佳的加载画面示例，它能够在网站其他内容加载期间长时间吸引用户的注意力。此效果可用于页面加载器和用户界面。
在本文中，我们将讨论如何使用 CSS 创建流星动画效果。为此，我们将使用 CSS 的各种属性，例如动画、溢出、过滤、变换、第 n 个子属性、:before 和 :after 伪选择器。
步骤
以下是创建流星动画效果的步骤 -
步骤 1 - 使用 HTML 为星星创建基本设计。创建一个 section 元素表示天空，并创建 9 个 <p> 元素表示星星。
步骤 2 - 要使星星以 45 度方向落下，请使用 section 元素的 transform 属性。
步骤 3 - 根据您的要求对齐 p 元素。
步骤 4 - 使用诸如position和filler属性之类的属性制作旋转球。要使它们呈现圆形，请使用边框半径属性。
步骤 5 − 使用 :before 和 :after 伪选择器，为星星指定前后效果。
步骤 6 − 使用第 n 个子属性，为星星添加动画效果。指定第 n 个子属性的位置。
步骤 7 − 使用 @keyframes 指定星星头部和尾部的宽度。使用 @-webkit-keyframes 创建射击效果。
使用的属性
我们使用了以下 CSS 属性 -
:nth-child(n) 选择器
:nth-child(n) 是一个 CSS 伪类选择器，用于根据元素在一组兄弟元素中的位置来匹配元素。它匹配所有属于第 n 个子元素的元素。n 可以是数字、关键字或任何公式。
语法
element :nth-child(n){
Css declarations;
}
括号中的参数"n"表示选择或匹配元素的模式。它可以是偶数或奇数函数符号。
奇数值表示在序列中位置为奇数的项目，例如 1、3、5 等。同样，偶数值表示在序列中位置为偶数的项目，例如 2、4、6 等。
CSS 动画
CSS 的动画属性允许我们在特定时间间隔内更改元素的各种样式属性，从而赋予其动画效果。
@keyframes 用于精确指定在给定时间段内动画中发生的情况。这是通过声明动画期间特定"帧"的 CSS 属性来实现的，百分比从 0%(动画开始)到 100%(动画结束)。
滤镜属性
它使开发人员能够向 HTML 元素添加不透明度、模糊和饱和度等视觉效果。
语法
filter: none | blur()| drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | bright()| contrast();
背景 − 它使我们能够在 HTML 元素的背景中添加视觉效果。
Box-shadow − 它使我们能够向 HTML 元素添加阴影。
Transform − 此属性允许我们为元素添加 2D 或 3D 变换。它允许您对元素进行变换、旋转、缩放、移动、倾斜等操作。
示例
<!DOCTYPE html>
<html>
<head>
<title> Shooting Star Animation Effect </title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
}
div{
position: absolute;
top: 0;
left: 0;
background: #000;
background-position-x: center;
background-size: cover;
width: 100%;
height: 100vh;
animation: background 68s linear infinite;
}
@keyframes background {
0%{ transform:scale(1);}
55%{ transform:scale(1.3);}
100%{ transform: scale(1);}
}
span{
position: absolute;
left: 50%;
top: 45%;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 0 5px rgba(254, 254, 255, 0.2), 0 1px 0 7px rgba(245, 254, 255, 0.1), 0 1px 21px rgba(253, 253, 245, 1) ;
animation: anim 3s ease-in-out infinite;
}
span::before{
content: '';
width: 290px;
height: 2px;
position: absolute;
top: 53%;
transform: translateY(-45%);
background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
}
@keyframes anim {
0%{ transform: rotate(325deg) translateX(0); opacity: 1; }
40%{ opacity: 0.8; }
70%{ opacity: 1; }
100%{ transform: rotate(325deg) translateX(-1400px); opacity: 0; }
}
span:nth-child(1){
top: 0;
right: 0;
left: inherit;
animation-delay: 0 ;
animation-duration: 1s;
}
span:nth-child(2){
top: 0;
right: 70px;
left: inherit;
animation-delay: 0.3s;
animation-duration: 4s;
}
span:nth-child(3){
top: 70px;
right: 0px;
left: inherit;
animation-delay: 0.3s ;
animation-duration: 3s;
}
span:nth-child(4){
top: 0;
right: 170px;
left: initial;
animation-delay: 0.7s;
animation-duration: 3s;
}
</style>
</head>
<body>
<div>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</div>
</body>
</html>
结论
在本文中，我们了解了如何使用 CSS 创建流星效果。如今，网页设计已显著改进，在线动画已成为网站建设者吸引更多浏览者的重要工具。大多数人都试图更频繁地使用动画，不仅是为了填充页面，也是为了展示页面的阅读方式。动画可用于显示表单错误、点击位置、提高转化率等等。
动画通常能够吸引用户的注意力，这就是它们被广泛使用的原因。此外，动画还可以在内容加载时转移用户的注意力，给人一种加载速度更快的感觉，让他们能够立即观察到动作或进度。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
