带你实现一个github注册页面的星空顶
原创带你实现一个github注册页面的星空顶
原创
用户10143704
修改于 2024-04-20 15:23:48
修改于 2024-04-20 15:23:48
带你实现一个github注册页面的星空顶
github的注册页面可以说是非常的好看，如果没有看过的可以看下面的图片：
那么要如何实现下面的这个效果呢？
首先我们研究一下他的这个官网
首先我看到的后面的这个背景，是不是一个纯色的背景呢？
于是开始研究。发现他后面确实是一个纯黑色的背景
当我们关掉后就是这个样子的
之后我们来研究他的星空顶是如何实现的？
我们可以看到有很多的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>这里面的css都是引用的github的css
经过测试这几个就是最为精简的。我们来看我们的这个的效果：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录