效果图
部分源码
<!DOCTYPE html>
<html>
<head>
<!--小K网 www.xkwo.com -->
<meta charset="UTF-8">
<title>火影版个人主页</title>
<link href="static/32.png" rel="icon" sizes="32x32"/>
<link href="static/192.png" rel="icon" sizes="192x192"/>
<link href="static/paul.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
body {
background-image: url('static/background-1.jpg');
background-size: cover;
transition: background-image 1s ease-in-out;
}
</style>
<script>
window.onload = function() {
var images = ['static/background-1.jpg', 'static/background-2.jpg', 'static/background-3.jpg', 'static/background-4.jpg', 'static/background-5.jpg', 'static/background-6.jpg', 'static/background-7.jpg'];
var currentIndex = 0;
function changeBackground() {
document.body.style.backgroundImage = 'url(' + images[currentIndex] + ')';
currentIndex = (currentIndex + 1) % images.length;
}
setInterval(changeBackground, 5000);
}
</script>
</head>
<!--你看到我那一面，你就配那一面！ -->
<body>
<div id="loader">
<figure>
<img src="static/avatar.jpg"/>
</figure>
</div>
<main>
<div class="content">
<figure class="me">
<img class="avatar" src="static/avatar.jpg"/>
<h2 class="name">孤独</h2>
</figure>
<section id="main" class="active">
<a href="https://www.vip616.cn" title="深入浅出，日常折腾记录"><i class="fa fa-home"></i><span class="title">我的小窝</span></a>
<a href="https://tool.wkjs.top" title="分享技术与生活"><i class="fa fa-book"></i><span class="title">在线工具箱</span></a>
<a href="http://ym.aliyun.com" target="_blank" title="来听歌吧"><i class="fa fa-music"></i><span class="title">孤独</span></a>
<a href="https://www.baidu.com/t/33210x2a49c4" target="_blank" title="找我"><i class="fa fa-steam"></i><span class="title">域名抢注</span></a>
<a href="https://gulang.love" target="_blank"><i class="fa fa-github"></i><span class="title">精品资源</span></a>
<a href="https://gulang.love" target="_blank"><i class="fa fa-flag"></i><span class="title">美写真图</span></a>
</section>
领取源码
领取地址：https://www.123pan.com/s/ji8kjv-fPPU3.html
下期更新预报
- 📢博客主页：孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
- 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻