HTML5+CSS3小实例：流星雨动画

发布时间：2023年12月20日

目录

?一、运行效果

图片效果

二、项目概述

三、开发环境

四、实现步骤及代码

1.创建空文件夹

2.完成页面内容

3.完成css样式? ??? ?

五、项目总结? ?

六、源码获取

?一、运行效果

图片效果

二、项目概述

???????该项目是一个使用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
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章