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

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

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

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

部分源码

<!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博客
  • 📢停下休息的时候不要忘了别人还在奔跑,希望大家抓紧时间学习,全力奔赴更好的生活💻

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/833982.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日一博 - 闲聊架构设计中的多级缓存设计

文章目录 方法论概述客户端缓存应用层缓存服务层缓存缓存设计的注意事项总结 思维导图戳这里 方法论概述 从客户端到服务层&#xff0c;缓存的应用广泛而重要。通过合理的缓存设计&#xff0c;能够有效地提高系统的性能并降低延迟。 客户端缓存 在客户端层面&#xff0c;浏览…

多模态融合技术现实世界中的挑战与研究进展

在人工智能的诸多领域中&#xff0c;多模态融合技术正逐渐成为连接不同信息源的桥梁。这种技术通过整合来自视觉、听觉、文本等多种模态的数据&#xff0c;旨在提供更为丰富和精确的预测结果。然而&#xff0c;现实世界的数据往往是不完美和不完整的&#xff0c;这给多模态融合…

[微信小程序] 入门笔记1-滚动视图组件

[微信小程序] 入门笔记1-滚动视图组件 1.页面&组件&渲染 在小程序是由一个个页面page组成, 而页面又是由一个个组件component组成.和网页类似,这里的组件指的就是输入框<input>,按钮<button>,文本<text>,图片<image>等元素.如果你学过网页一…

Linux基础之git与调试工具gdb

目录 一、git的简单介绍和使用方法 1.1 git的介绍 1.2 git的使用方法 1.2.1 三板斧之git add 1.2.2 三板斧之git commit 1.2.3 三板斧之git push 二、gdb的介绍和一些基本使用方法 2.1 背景介绍 2.2 基本的使用方法 一、git的简单介绍和使用方法 1.1 git的介绍 Git是一…

Shell 编程规范与变量

目录 一.Shell 1.shell 的概念 2.Linux 中有哪些 Shell &#xff1f; 二.Shell 脚本概述 1.Shell 脚本的概念 2.shell 脚本应用场景 3.shell 脚本的作用 三.Shell脚本的构成与执行 1.Shell脚本的构成 2.Shell脚本的执行 四.重定向与管道操作 1.交互式硬件设备 2.重…

论文分享[cvpr2018]Non-local Neural Networks非局部神经网络

论文 https://arxiv.org/abs/1711.07971 代码https://github.com/facebookresearch/video-nonlocal-net 非局部神经网络 motivation:受计算机视觉中经典的非局部均值方法[4]的启发&#xff0c;非局部操作将位置的响应计算为所有位置的特征的加权和。 非局部均值方法 NLM&#…

男士内裤什么牌子的好?男士内裤五大排名品牌推荐

夏天快到了&#xff0c;你是不是在为内裤不够舒适透气、质量不好而困扰呢&#xff1f;现在市面上的男士内裤品牌众多&#xff0c;而且还有各种材质的分类&#xff0c;让大家一时也不知道该选什么好。 那么最近我也是特别购置了近期热门的几个男士内裤品牌进行测评&#xff0c;今…

(十六)Servlet教程——Servlet文件下载

Servlet文件下载 文件下载是将服务器上的资源下载到本地&#xff0c;可以通过两种方式来下载服务器上的资源。第一种是使用超链接来下载&#xff0c;第二种是通过代码来下载。 超链接下载 在HTML或者JSP页面中使用超链接时&#xff0c;可以实现页面之间的跳转&#xff0c;但是…

RK3568 学习笔记 : Linux emmc 内核启动 rootfs 根文件系统无法正常挂载问题的分析

问题描述 平台 &#xff1a; NanoPi-R5C 开发板 RK3568 平台。 手动编译的 Linux 内核&#xff0c;结果发现大概率 emmc 无法正常初始化&#xff0c;导致 rootfs 根文件系统无法正常挂载 Linux 内核版本&#xff1a; 6.1 Linux 内核代码位置&#xff1a; https://github.com…

第2章 WebServer进阶

2.1 使用多线程处理多用户请求 2.1.1 多线程Socket通信 在上一章的案例中&#xff0c;服务端显然只能处理一次浏览器请求&#xff0c;请求一次浏览器端就结束程序。如何解决这个问题呢&#xff1f;可以采用多线程Socket通信技术&#xff0c;解决多用户并发请求。 在多线程Sock…

从谚语:“一手交钱,一手交货来”谈谈什么是数据库事务

事务与交易 一手交钱&#xff0c;一手交货 一手交钱&#xff0c;一手交货&#xff0c;谚语&#xff0c;意思是指钱和货当场相交&#xff0c;互不拖欠。出自明朝施耐庵《水浒传》第二一回。 Transaction 意思 我们先来看一下来自于剑桥英-英词典的解释&#xff1a; transac…

Flask-HTTP请求、响应、上下文、进阶实验

本节主要目录如下&#xff1a; 一、请求响应循环 二、HTTP请求 2.1、请求报文 2.2、Request对象 2.3、在Flask中处理请求 2.4、请求钩子 三、HTTP响应 3.1、响应报文 3.2、在Flask中生成响应 3.3、响应格式 3.4、Cookie 3.5、session&#xff1a;安全的Cookie 四、…

企业车辆管理系统参考论文(论文 + 源码)

【免费】关于企业车辆管理系统.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89282550 企业车辆管理系统 摘 要 随着经济的日益增长,车辆作为最重要的交通工具,在企事业单位中得以普及,单位的车辆数目已经远远不止简单的几辆,与此同时就产生了车辆资源的合理…

汽车灯罩一般都是用什么材质做的?汽车车灯的灯罩如果破损破裂破洞了要怎么修复?

汽车灯罩一般都是用什么材质做的&#xff1f; 汽车灯罩一般使用的主要材质是聚碳酸酯&#xff08;PC&#xff09;和丙烯酸酯&#xff08;PMMA&#xff09;这两种塑料。这两种材料具有良好的透明性、耐候性和耐冲击性&#xff0c;因此非常适合用于汽车灯罩的制造。 聚碳酸酯&am…

小程序支付的款项流转与到账时间

商家做小程序&#xff0c;最关心的是客户通过小程序下单支付的钱&#xff0c;是怎么样的流转状态以及最终到哪里。因此&#xff0c;本文将详细解析款项最终流向何处以及多久能够到账。 一、小程序支付的款项流向 当用户在小程序内完成支付后&#xff0c;款项并不会直接到达商…

5月8日学习记录

_[FBCTF2019]RCEService&#xff08;preg_match函数的绕过&#xff09; 涉及知识点&#xff1a;preg_match函数绕过&#xff0c;json的格式&#xff0c;正则回溯 打开环境&#xff0c;要求用json的格式输入 搜索学习一下json的语法规则 数组&#xff08;Array&#xff09;用方括…

制造版图大变革!逾10座晶圆厂蓄势待发 | 百能云芯

在全球半导体产业的激烈竞争和市场需求的复杂波动中&#xff0c;晶圆厂建设热潮正在美国兴起&#xff0c;这一波建设浪潮的核心动力之一&#xff0c;便是美国政府推出的《芯片与科学法案》所承诺的巨额补贴&#xff0c;旨在提升美国在全球半导体行业的竞争力。 当地时间4月25日…

JSP技术讲解

目录 1、JSP简介 2、JSP体验 3、JSP运行原理 4、JSP基本语法 5、JSP指令 6、JSP内置九大对象 7、JSP标签 8、JSP配置 9、JSP排错 10、总结 在前面的Servlet学习中发现Servlet本质是一个java程序&#xff0c;因此Servlet更加擅长编写程序的业务逻辑&#xff0c;而如果要…

shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)

目录 一、GeoJSON是什么 二、GeoJSON的结构组成 2.1、点&#xff08;Point&#xff09;数据示例 2.2、线&#xff08;LineString&#xff09;数据示例 2.3、面&#xff08;Polygon&#xff09;数据示例 2.4、特征&#xff08;Feature&#xff09;数据示例 2.5、特征集合&…

Hass哈斯数控数据采集网络IP配置设置

机床数据采集&#xff08;MDC&#xff09;允许你使用Q和E命令通过网络接口或选项无线网络从控制系统提取数据。设置143支持该功能&#xff0c;并且指定控制器使用这个数据端口。MDC是一个需要一台附加计算机发送请求&#xff0c;解释说明和存储机床数据的软件功能。这个远程计算…