前言
大家好，我是yma16，本文分享使用github制作个人主页
操作步骤
前提条件拥有github账号
用户名.github.io
使用github新建一个仓库“用户名.github.io”
注册登录github进去登录，这些英文基本能看懂问题不大
注意：
用户名.github.io
创建成功后
为什么可以访问到这里面的html文件看设置setting
因为使用了GitHub Pages的功能
进下来就是上传自己的网页文件这里我上传一个案例背景渐变的
拖拽上传即可
上传成功等待5、6分钟访问“https://用户名.github.io”即可直接进入上传的html文件
ok完全正确！
示例index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> body { margin: 0; padding: 0; background: #536976; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #292E49, #536976); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #292E49, #536976); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ overflow: hidden; } .bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bubbles li { position: absolute; list-style: none; display: block; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.2); animation: animate 25s linear infinite; bottom: -150px; } @keyframes animate{ 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0%; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } .bubbles li:nth-child(1){ left:25%; width:80px; height:80px; animation-delay:0; } .bubbles li:nth-child(2){ left:10%; width:20px; height:20px; animation-delay:2s; } .bubbles li:nth-child(3){ left:70%; width:20px; height:20px; animation-delay:4s; } .bubbles li:nth-child(4){ left:40%; width:60px; height:60px; animation-delay:18s; animation-duration: 18s; } .bubbles li:nth-child(5){ left:65%; width:50px; height:50px; animation-delay:18s; } .bubbles li:nth-child(6){ left:65%; width:110px; height:110px; animation-delay:3s; } .bubbles li:nth-child(7){ left:35%; width:150px; height:150px; animation-delay:7s; } .bubbles li:nth-child(8){ left:50%; width:25px; height:25px; animation-delay:15s; } .bubbles li:nth-child(9){ left:70%; width:35px; height:35px; animation-delay:4s; animation-duration: 45s; } .bubbles li:nth-child(10){ left:70%; width:65px; height:65px; animation-delay:0s; animation-duration: 15s; } </style> <body> <br> <ul class="bubbles"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
结束
本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！
