📅 最后修改于: 2023-12-03 15:37:44.604000 🧑 作者: Mango
如果你想要增加你的 GitHub 主页的吸引力，为了给自己的项目展示最好的一面，那么在滚动 GitHub 上制作动画是一个很好的方法。使用 HTML 和 CSS，你可以在你的 GitHub 主页上添加自己的动画。
首先，在你的 GitHub 帐户下创建一个新的 repository。你可以给它取一个任意的名字，比如 "Animated-Profile" 。
在你的新的 repository 中创建一个新的 HTML 文件。在此文件中，你可以添加你的动画和其他元素。此外，你也可以为此 HTML 文件添加一些常规信息，比如页面标题和元标记。
你的动画可以通过使用 CSS 的各种渐变来实现。在你的 HTML 文件中，你需要使用如下代码来添加样式。
body {
background: #000000; /* 设置背景颜色 */
color: #ffffff; /* 设置字体颜色 */
overflow: hidden; /* 隐藏页面超出的部分 */
font-family: Arial, sans-serif; /* 设置字体 */
}
#animation-container {
position: relative; /* 设置动画容器相对定位 */
width: 100%; /* 设置容器宽度 */
height: 100vh; /* 设置容器高度 */
overflow: hidden; /* 隐藏容器超出的部分 */
}
.box {
position: absolute; /* 设置盒子相对定位 */
width: 50%; /* 设置盒子宽度 */
height: 50%; /* 设置盒子高度 */
mix-blend-mode: difference; /* 混合模式设置为 "差值" */
}
.box1 {
top: 0; /* 设置盒子距离顶部的距离 */
left: 0; /* 设置盒子距离左侧的距离 */
transform: translate(10vw, 10vh) rotate(45deg); /* 设置盒子的旋转角度和位置 */
background: #ffffff; /* 设置盒子的背景颜色 */
animation: box1-animation 10s linear infinite; /* 设置盒子的动画 */
}
@keyframes box1-animation {
0% {
transform: translate(10vw, 10vh) rotate(45deg);
}
100% {
transform: translate(80vw, 80vh) rotate(405deg);
}
}
你的动画现在已准备好了。你需要将它添加到你的 HTML 文件中。具体方法如下：
<!DOCTYPE html>
<html>
<head>
<title>Animated Profile on GitHub</title>
<meta charset="utf-8">
</head>
<body>
<div id="animation-container">
<div class="box box1"></div>
</div>
</body>
</html>
最后，你需要将 HTML 文件推送到你的 repository 中。你可以使用 git 命令将你的文件推送到 GitHub。执行以下命令：
git add index.html
git commit -m "Added animated profile"
git push -u origin master
现在，你的动画已为 GitHub 设计好，你可以在网页上查看。在你的 GitHub 主页中，点击 "Settings" 按钮，然后将 "Source" 设置为 "master branch"。在 "Custom domain" 中添加自己的域名。点击 "Save" 按钮。
现在，在浏览器中输入你的网址，你的 GitHub 主页上就会出现你的动画。
注意：你需要确保你的动画和其他元素都符合 GitHub 的规定。这通常包括以下几点：
以上是在滚动 GitHub 上制作动画的步骤。希望能对你有所帮助！