截图示例：
代码
index页面代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> -->
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>kouketsuの主页</title>
<link rel="icon" href="favicon.ico"/>
<meta name="keywords" content="kouketsuの主页" />
<meta name="description" content="kouketsuの主页" />
<link rel="apple-touch-icon" href="">
<link rel="stylesheet" type="text/css" href="./style/css/index.css" />
</head>
<body class=" index-body">
<div class="index-body-wrapper">
<div class="wrapper-main">
<div class="header-conatiner">
<img class="avatar" src="https://blog.tianlei.work/qqtx.php?qq=2313581921">
<h1 class="user-name">kouketsu的主页</h1>
<span class="personal-introduction text-muted text-xs block">
<div id="chakhsu"></div>
<script>
var chakhsu = function(r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]),
c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP],
c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP >
0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c
.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
} /*以下内容自定义修改*/
var l = "❤",
o = ["何须仰望别人，自己亦是风景"].map(function(r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
"rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)",
"rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)",
"rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
chakhsu(document.getElementById('chakhsu'));
</script>
</span>
<div class="banner">
<!--加载上一张背景-->
<!-- <li class="bg-pre" onclick="reloadBackgroundImage()"><img src="https://kouketsu.top/src/pages/Home/style/images/pre.png" /></li> -->
<!--QQ-->
<li class="qq">
<a href="tencent://message/?uin=2313581921" title="Initiate chat ?">
<img src="https://kouketsu.top/src/pages/Home/style/images/qq.png" />
</a>
</li>
<!--微信-->
<li class="wechat">
<a href="#">
<img src="https://kouketsu.top/src/pages/Home/style/images/wechat.png" />
</a>
</li>
<!--哔哩哔哩-->
<li>
<a href="https://space.bilibili.com/34113" target="_blank" class="social-bili" title="bilibili">
<img src="https://kouketsu.top/src/pages/Home/style/images/bilibili.png" />
</a>
</li>
<!--网易云音乐-->
<li>
<a href="https://music.163.com/#/user/home?id=418340767" target="_blank" class="social-wangyiyun" title="CloudMusic">
<img src="https://kouketsu.top/src/pages/Home/style/images/ncm.png" />
</a>
</li>
<!--电子邮件-->
<li>
<a href="#" target="_blank" class="social-wangyiyun" title="E-mail">
<img src="https://kouketsu.top/src/pages/Home/style/images/mail.png" />
</a>
</li>
<!--加载下一张背景-->
<!-- <li id="bg-next" onclick="reloadBackgroundImage()">
<img src="https://kouketsu.top/src/pages/Home/style/images/next.png" />
</li> -->
</div>
<!-- 站点链接导航 -->
<div class="link-wrapper">
<span class="link-container">
<a href="#">主页</a>
</span>
<span class="link-container">
<a href="https://kouketsu.top">博客</a>
</span>
<span class="link-container">
<a href="https://kouketsu.top">鱼塘</a>
</span>
<span class="link-container">
<a href="tencent://message/?uin=2313581921">交流</a>
</span>
</div>
<!-- 底部信息 -->
<div class="user-ip">
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<span style="color:#333333;">你的IP:<script>
document.write(returnCitySN["cip"])
</script></span>
</div>
<!--底部版权-->
<footer id="footer" class="home-footer">
<div class="wrapper bg-light" >
<!-- 左侧底部 -->
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站版权信息">
<a href="https://kouketsu.top/" target="_blank" title="kouketsuの小窝" style="pointer;">
<span class="badge-subject bg-orange">Copyright</span><span class="badge-value bg-purple">kouketsuの小窝</span>
</a>
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站萌ICP备案号">
<a href="https://icp.gov.moe" target="_blank" title="萌ICP备XXX号" style="pointer;">
<span class="badge-subject bg-orange">萌ICP备</span><span class="badge-value bg-purple">20224455号</span>
</a>
<!--<a href="https://icp.gov.moe/?keyword=20224455" target="_blank">萌ICP备20224455号</a>-->
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站ICP备案号">
<a href="https://beian.miit.gov.cn/" target="_blank" title="沪ICP备XXX号" style="pointer;">
<span class="badge-subject bg-orange">鲁ICP备</span><span class="badge-value bg-purple">2022001823号</span>
</a>
</div>
<!-- | -->
<!-- 右侧底部 -->
<span class="pull-right hidden-xs text-ellipsis">
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站程序">
<a href="http://typecho.org/" target="_blank" title="程序" style="pointer;">
<span class="badge-subject bg-orange">程序</span><span class="badge-value bg-purple">Typecho</span>
</a>
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站UI模板">
<a href="http://typecho.org/" target="_blank" title="Theme by Handsome" style="pointer;">
<span class="badge-subject bg-orange">UI</span><span class="badge-value bg-purple">Handsome</span>
</a>
</div>
</span>
</div>
</footer>
<!--底部版权END-->
</div>
</div>
</div>
<!-- 樱花效果 -->
<script src="https://kouketsu.top/src/assets/sakura.js" async=""></script>
<!-- 其他效果 -->
<script type="text/javascript">
// function reloadBackgroundImage() {
// location.reload();
// }
</script>
</body>
</html>
CSS部分
/* 全局变量及公共样式 */
* {
padding: 0;
margin: 0;
}
ul { list-style: none;}
li {list-style-type:none;}
a { text-decoration: none;}
/* body样式 */
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background-image: url(https://api.gmit.vip/Api/DmImgS?format=image);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.index-body-wrapper {
/* width: 100%;
height: 100; */
padding:12% 5% 5% 5%;
}
.wrapper-main {
text-align:center;
border-width:1px;
border-style:solid;
border-color:rgb(2, 204, 245);
background-color:#79918e6b;border-radius:20px;
}
.header-conatiner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.avatar {
border-radius: 50%;
max-width:100px;
max-height:100px;
margin: 10px 0;
}
.user-name {
/* font-size: 16px; */
color: #f6f7f8;
}
.personal-introduction {
color: #aaff7f;
}
.banner {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 100%;
}
.banner img {
width: 40px;
height: 40px;
margin: 10px 10px 10px 0;
}
.banner-wrapper {
display: flex;
flex-direction: row;
max-width: 100%;
overflow: auto;
}
/* link */
.link-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.link-container {
border-radius:20px;
padding:7px 30px;
margin: 5px 10px 10px 10px;
color:#f6f7f8;
border-style:solid;
text-decoration:none;
}
.link-container a {
color: #f6f7f8;
}
.link-container:hover {
color:#ff5500;
}
.link-container:hover>a {
color: #ff5500;
}
/* 版权 */
/*底部页脚*/
.home-footer {
text-align: left;
padding: 0 10px;
margin: 10px 0 5px 0;
}
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
background-color: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}
/* 其他 */
/*修改鼠标*/
body {
cursor:url('https://kouketsu.top/src/assets/cursor/default.cur'), auto;
}
select, input, textarea, a, button {
cursor:url('https://kouketsu.top/src/assets/cursor/pointer.cur'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
cursor:url('https://kouketsu.top/src/assets/cursor/default.cur'), auto;
}
/* 头像呼吸光环和鼠标悬停旋转放大 */
.avatar {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.avatar:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
示例
代码下载