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

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

screenshots

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

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

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

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

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

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

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

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

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

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

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

我在signup里面发现了：

.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的

<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差不多的效果：

<!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>