带你实现一个github注册页面的星空顶

github的注册页面可以说是非常的好看，如果没有看过的可以看下面的图片：

那么要如何实现下面的这个效果呢？

首先我们研究一下他的这个官网

首先我看到的后面的这个背景，是不是一个纯色的背景呢？

于是开始研究。发现他后面确实是一个纯黑色的背景

当我们关掉后就是这个样子的

之后我们来研究他的星空顶是如何实现的？

我们可以看到有很多的signup-stars的div

并且我发现他的尺寸是时刻在动的。

所以说，他应该实现的方法就是在5个div中去随机放大几个小图片。

为了验证上面的猜想。我去看了看css请求

发现他一共请求了这几个css

我在signup里面发现了：

css 复制代码

.signup-stars:nth-child(1) {
   background-position: 10% 90%;
   animation-delay: 0s
}

.signup-stars:nth-child(2) {
   background-position: 20% 50%;
   background-size: 270px 500px;
   animation-delay: .3s
}

.signup-stars:nth-child(3) {
   background-position: 40% -80%;
   animation-delay: 1.2s
}

.signup-stars:nth-child(4) {
   background-position: -20% -30%;
   transform: rotate(60deg);
   animation-delay: 2.5s
}

.signup-stars:nth-child(5) {
   background-image: radial-gradient(2px 2px at 10px 100px, #eee, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 20px 10px, #fff, rgba(0, 0, 0, 0)), radial-gradient(3px 4px at 150px 40px, #ddd, rgba(0, 0, 0, 0));
   background-position: 80% 30%;
   animation-delay: 4s
}

.signup-stars:nth-child(6) {
   background-position: 50% 20%;
   animation-delay: 6s
}

这样的代码

这里的 animation-delay属性。

指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。

感兴趣的可以看这个

animation-delay - CSS：层叠样式表 | MDN (mozilla.org)

除此之外，我还看到了他发送了一个svg的图片请求

同时我们找到了他是怎么插入这个svg的

css 复制代码

<img src="./hero-glow.svg" alt="Glowing universe"
  class="js-warp-hide position-absolute overflow-hidden events-none"
  style="top: 50%; left: 50%; width: 200%; transform: translate(-50%, -50%);">

我们也照猫画虎。就完成了一个这样的页面

经过不断的调试。

我写出了一个和github差不多的效果：

xml 复制代码

<!DOCTYPE html>
<html lang="en" class="height-full" data-a11y-animated-images="system" data-a11y-link-underlines="true">
<head>
  <meta charset="utf-8">
  <link media="all" rel="stylesheet"
    href="https://github.githubassets.com/assets/primer-44fa1513ddd0.css" />
  <link media="all" rel="stylesheet"
    href="https://github.githubassets.com/assets/site-3711aefdcd99.css" />
    <link media="all" rel="stylesheet"
    href="https://github.githubassets.com/assets/signup-489cd45d1285.css" />
    <style>
      *{
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body class="height-full d-flex"
  style="word-wrap: break-word;">
  <div class="js-warp-hide bg-gray-dark-mktg d-flex flex-auto flex-column overflow-hidden position-relative">
    <div class="signup-space">
      <div class="signup-stars"></div>
      <div class="signup-stars"></div>
      <div class="signup-stars"></div>
      <div class="signup-stars"></div>
      <div class="signup-stars"></div>
      <div class="signup-stars"></div>
    </div>

    <img src="./hero-glow.svg" alt="Glowing universe"
      class="js-warp-hide position-absolute overflow-hidden events-none"
      style="top: 50%; left: 50%; width: 200%; transform: translate(-50%, -50%);">
  </div>
</body>
</html>

这里面的css都是引用的github的css

经过测试这几个就是最为精简的。我们来看我们的这个的效果：