CSS 如何创建流星动画效果

流星似乎是这些小的颤动在寒冷的夜空中一闪而过时产生的温暖的闪亮迹象。流星效果是黑暗主题网站最独特的背景效果之一。流星动画是一个奇妙的例子，当网站上的其他材料加载时，加载屏幕能让你的注意力保持很长时间。这种效果可以在页面加载器和用户界面中加以利用。

在这篇文章中，我们将讨论使用CSS创建流星动画效果的方法。为此，我们将使用CSS的各种属性，如动画、溢出、过滤、变换、第n个子属性、:before和:after伪选择器。

需要遵循的步骤

以下是创建流星动画效果所要遵循的步骤

第1步 - 使用HTML为星星创建一个基本设计。为天空创建一个部分元素，为星星创建九个

元素。

第2步 - 为了使星星以45度角的方向落下，使用section元素的transform属性。

第3步–根据你的要求对准p元素。

第4步 - 使用属性如位置和填充物属性制作圆形球。为了使它们呈圆形，使用边界半径属性。

第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() | brightness()| 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>