当前位置:首页 > 网站应用 > 正文内容

流星雨源码特效

cjw1235个月前 (10-15)网站应用1610
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>流星雨源码特效</title>
  </head>
  <style>
    body {
      background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
      height: 100vh;
      overflow: hidden;
      display: flex;
      font-family: "Anton", sans-serif;
      justify-content: center;
      align-items: center;
    }

    .night {
      position: relative;
      width: 100%;
      height: 100%;
      transform: rotateZ(45deg);
    }

    .shooting_star {
      position: absolute;
      left: 50%;
      top: 50%;
      height: 2px;
      background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
      border-radius: 999px;
      filter: drop-shadow(0 0 6px #699bff);
      animation: tail 3000ms ease-in-out infinite,
        shooting 3000ms ease-in-out infinite;
    }
    .shooting_star::before {
      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)
      );
      transform: translateX(50%) rotateZ(45deg);
      border-radius: 100%;
      animation: shining 3000ms ease-in-out infinite;
    }
    .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)
      );
      transform: translateX(50%) rotateZ(45deg);
      border-radius: 100%;
      animation: shining 3000ms ease-in-out infinite;
      transform: translateX(50%) rotateZ(-45deg);
    }
    .shooting_star:nth-child(1) {
      top: calc(50% - 81px);
      left: calc(50% - 37px);
      animation-delay: 1023ms;
    }
    .shooting_star:nth-child(1)::before,
    .shooting_star:nth-child(1)::after {
      animation-delay: 1023ms;
    }
    .shooting_star:nth-child(2) {
      top: calc(50% - 22px);
      left: calc(50% - 154px);
      animation-delay: 4673ms;
    }
    .shooting_star:nth-child(2)::before,
    .shooting_star:nth-child(2)::after {
      animation-delay: 4673ms;
    }
    .shooting_star:nth-child(3) {
      top: calc(50% - 128px);
      left: calc(50% - 1px);
      animation-delay: 5495ms;
    }
    .shooting_star:nth-child(3)::before,
    .shooting_star:nth-child(3)::after {
      animation-delay: 5495ms;
    }
    .shooting_star:nth-child(4) {
      top: calc(50% - 86px);
      left: calc(50% - 147px);
      animation-delay: 1132ms;
    }
    .shooting_star:nth-child(4)::before,
    .shooting_star:nth-child(4)::after {
      animation-delay: 1132ms;
    }
    .shooting_star:nth-child(5) {
      top: calc(50% - -1px);
      left: calc(50% - 52px);
      animation-delay: 1517ms;
    }
    .shooting_star:nth-child(5)::before,
    .shooting_star:nth-child(5)::after {
      animation-delay: 1517ms;
    }
    .shooting_star:nth-child(6) {
      top: calc(50% - 55px);
      left: calc(50% - 209px);
      animation-delay: 9108ms;
    }
    .shooting_star:nth-child(6)::before,
    .shooting_star:nth-child(6)::after {
      animation-delay: 9108ms;
    }
    .shooting_star:nth-child(7) {
      top: calc(50% - 47px);
      left: calc(50% - 154px);
      animation-delay: 2702ms;
    }
    .shooting_star:nth-child(7)::before,
    .shooting_star:nth-child(7)::after {
      animation-delay: 2702ms;
    }
    .shooting_star:nth-child(8) {
      top: calc(50% - 186px);
      left: calc(50% - 273px);
      animation-delay: 8824ms;
    }
    .shooting_star:nth-child(8)::before,
    .shooting_star:nth-child(8)::after {
      animation-delay: 8824ms;
    }
    .shooting_star:nth-child(9) {
      top: calc(50% - 53px);
      left: calc(50% - 245px);
      animation-delay: 9125ms;
    }
    .shooting_star:nth-child(9)::before,
    .shooting_star:nth-child(9)::after {
      animation-delay: 9125ms;
    }
    .shooting_star:nth-child(10) {
      top: calc(50% - 57px);
      left: calc(50% - 283px);
      animation-delay: 2233ms;
    }
    .shooting_star:nth-child(10)::before,
    .shooting_star:nth-child(10)::after {
      animation-delay: 2233ms;
    }
    .shooting_star:nth-child(11) {
      top: calc(50% - -126px);
      left: calc(50% - 144px);
      animation-delay: 6880ms;
    }
    .shooting_star:nth-child(11)::before,
    .shooting_star:nth-child(11)::after {
      animation-delay: 6880ms;
    }
    .shooting_star:nth-child(12) {
      top: calc(50% - -197px);
      left: calc(50% - 131px);
      animation-delay: 8614ms;
    }
    .shooting_star:nth-child(12)::before,
    .shooting_star:nth-child(12)::after {
      animation-delay: 8614ms;
    }
    .shooting_star:nth-child(13) {
      top: calc(50% - -57px);
      left: calc(50% - 146px);
      animation-delay: 8211ms;
    }
    .shooting_star:nth-child(13)::before,
    .shooting_star:nth-child(13)::after {
      animation-delay: 8211ms;
    }
    .shooting_star:nth-child(14) {
      top: calc(50% - 191px);
      left: calc(50% - 80px);
      animation-delay: 1686ms;
    }
    .shooting_star:nth-child(14)::before,
    .shooting_star:nth-child(14)::after {
      animation-delay: 1686ms;
    }
    .shooting_star:nth-child(15) {
      top: calc(50% - -143px);
      left: calc(50% - 279px);
      animation-delay: 6485ms;
    }
    .shooting_star:nth-child(15)::before,
    .shooting_star:nth-child(15)::after {
      animation-delay: 6485ms;
    }
    .shooting_star:nth-child(16) {
      top: calc(50% - 97px);
      left: calc(50% - 11px);
      animation-delay: 260ms;
    }
    .shooting_star:nth-child(16)::before,
    .shooting_star:nth-child(16)::after {
      animation-delay: 260ms;
    }
    .shooting_star:nth-child(17) {
      top: calc(50% - -145px);
      left: calc(50% - 43px);
      animation-delay: 9745ms;
    }
    .shooting_star:nth-child(17)::before,
    .shooting_star:nth-child(17)::after {
      animation-delay: 9745ms;
    }
    .shooting_star:nth-child(18) {
      top: calc(50% - 105px);
      left: calc(50% - 79px);
      animation-delay: 4761ms;
    }
    .shooting_star:nth-child(18)::before,
    .shooting_star:nth-child(18)::after {
      animation-delay: 4761ms;
    }
    .shooting_star:nth-child(19) {
      top: calc(50% - -71px);
      left: calc(50% - 48px);
      animation-delay: 5821ms;
    }
    .shooting_star:nth-child(19)::before,
    .shooting_star:nth-child(19)::after {
      animation-delay: 5821ms;
    }
    .shooting_star:nth-child(20) {
      top: calc(50% - -149px);
      left: calc(50% - 39px);
      animation-delay: 1116ms;
    }
    .shooting_star:nth-child(20)::before,
    .shooting_star:nth-child(20)::after {
      animation-delay: 1116ms;
    }

    @keyframes tail {
      0% {
        width: 0;
      }
      30% {
        width: 100px;
      }
      100% {
        width: 0;
      }
    }
    @keyframes shining {
      0% {
        width: 0;
      }
      50% {
        width: 30px;
      }
      100% {
        width: 0;
      }
    }
    @keyframes shooting {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(300px);
      }
    }
    @keyframes sky {
      0% {
        transform: rotate(45deg);
      }
      100% {
        transform: rotate(405deg);
      }
    }
  </style>
  <body>
    <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>
  </body>
</html>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=93

标签: htmlcss
分享给朋友:

相关文章

网站调整公告

        网站开通了也有三年多了,网站也进行了多次的改版,昨天是我生日嫌着没事在家里把网站再进行了一次改版,当大家再次访问网站时,网站已经换上了全新的衣裳,这次的改版也将意味着我自己也会以一个全新的面貌展现,在我过去的一岁里...

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

js实现公告文字标题无缝向上滚动特效

<HTML> <HEAD> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <TITLE>无间隙文字向上滚动特效...

js文字定时向上滚动特效代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...

zblogphp二级目录建站,伪静态规则怎么写

如果你的 Z-BlogPHP 站点安装在二级目录中,需要使用伪静态技术来优化站点的 URL,并提升搜索引擎蜘蛛的抓取效率。下面是一个 nginx 的伪静态规则示例:# 子目录规则要排在前边; location /sub/ {    &n...

漂亮弹窗公告代码

<html xmlns="http://www.w3.org/1999/xhtml"> <head>   <meta http-equiv="Content-Type" con...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。