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

流星雨源码特效

cjw1235个月前 (10-15)网站应用1620 
<!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实现批量生成18位身份证号码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title&g...

滚动文字消息代码

网上收集的滚动文字消息代码<!DOCTYPE html>     <html>     <head>     <meta&...

css3+html5特效制作闪烁的文字

<head><charset="utf-8" /> <style> @-webkit-keyframes flash {     0%{   &n...

霓虹灯文字代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title&g...

瞌睡小鸟按钮特效

<!DOCTYPE html> <html lang="en">   <head>     <title>瞌睡小鸟按钮特效</title&g...

发表评论

访客

看不清，换一张

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

Copyright © 2007 追求完美. Rights Reserved.
湘ICP备16005041号-3