渐进淡出背景个人导航页源码（火影版）

本文主要是介绍渐进淡出背景个人导航页源码（火影版），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

渐进淡出背景个人导航页源码（火影版）

效果图
部分源码
领取源码
下期更新预报

效果图

在这里插入图片描述

部分源码

<!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>