简介
该404页面基于Tailwind CSS构建，含浮动图标、搜索框（支持回车搜索）、60秒自动返回首页功能，主色蓝色系，响应式设计，交互简洁，帮助用户快速导航回首页或搜索内容。![图片[1] - 唯美的404页面分享 - 个人学习笔记](https://www.runro.cn/imagehost/uploads/6843054bac1a9.png "图片[1] - 唯美的404页面分享 - 个人学习笔记")
源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面不存在 | 404错误</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#8B5CF6',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
</style>
<!-- 引入Inter字体 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen font-inter text-dark flex flex-col">
<!-- 页面顶部导航 -->
<header class="w-full p-4 md:p-6 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-cube text-primary text-2xl md:text-3xl"></i>
<span class="text-xl md:text-2xl font-bold text-dark">runro<span class="text-primary">.cn</span></span>
</div>
<button class="md:hidden text-dark text-xl">
<i class="fa fa-bars"></i>
</button>
</header>
<!-- 主内容区域 -->
<main class="flex-grow flex flex-col items-center justify-center px-4 py-12 md:py-20">
<div class="max-w-4xl w-full mx-auto text-center">
<!-- 404图形元素 -->
<div class="relative mb-12">
<div class="flex justify-center items-center">
<div class="text-[clamp(120px,25vw,200px)] font-bold text-primary/10 -z-10">404</div>
<div class="absolute animate-float">
<div class="w-40 h-40 md:w-56 md:h-56 rounded-full bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center shadow-2xl">
<div class="w-28 h-28 md:w-40 md:h-40 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg">
<i class="fa fa-exclamation-triangle text-white text-6xl md:text-8xl"></i>
</div>
</div>
</div>
</div>
</div>
<!-- 错误信息 -->
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-4 text-shadow">页面走丢了！</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-dark/70 mb-8 max-w-2xl mx-auto leading-relaxed">
我们找不到您请求的页面。可能是链接损坏，或者您访问的页面已被移除。
</p>
<!-- 搜索框 -->
<div class="max-w-xl mx-auto mb-10">
<form id="searchForm" class="relative">
<input type="text" id="searchInput" placeholder="搜索我们的网站..."
class="w-full py-4 px-6 pr-12 rounded-full border border-gray-200 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all duration-300 text-dark placeholder-gray-400"
onkeydown="if(event.key==='Enter'){submitSearch();}">
<button type="button" onclick="submitSearch()" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-primary hover:bg-primary/90 text-white p-2 rounded-full transition-colors duration-300">
<i class="fa fa-search"></i>
</button>
</form>
</div>
<!-- 行动按钮 -->
<div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
<a href="https://www.runro.cn/" class="px-8 py-4 bg-primary hover:bg-primary/90 text-white font-medium rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center">
<i class="fa fa-home mr-2"></i> 返回首页
</a>
</div>
<!-- 装饰元素 -->
<div class="flex justify-center space-x-2 animate-pulse-slow">
<div class="w-2 h-2 rounded-full bg-primary"></div>
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<div class="w-2 h-2 rounded-full bg-accent"></div>
</div>
</div>
</main>
<!-- JavaScript交互 -->
<script>
// 页面加载动画
document.addEventListener('DOMContentLoaded', () => {
// 为按钮添加悬停效果
const buttons = document.querySelectorAll('button, a');
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
button.classList.add('scale-105');
});
button.addEventListener('mouseleave', () => {
button.classList.remove('scale-105');
});
});
// 搜索框交互
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('focus', () => {
searchInput.parentElement.classList.add('scale-105');
});
searchInput.addEventListener('blur', () => {
searchInput.parentElement.classList.remove('scale-105');
});
// 移动端菜单切换
const menuButton = document.querySelector('.fa-bars').parentElement;
const mobileMenu = document.querySelector('nav');
menuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
mobileMenu.classList.toggle('fixed');
mobileMenu.classList.toggle('inset-0');
mobileMenu.classList.toggle('bg-white');
mobileMenu.classList.toggle('z-50');
mobileMenu.classList.toggle('flex-col');
mobileMenu.classList.toggle('items-center');
mobileMenu.classList.toggle('justify-center');
mobileMenu.classList.toggle('space-y-8');
mobileMenu.classList.toggle('text-xl');
// 切换菜单图标
const icon = menuButton.querySelector('i');
if (icon.classList.contains('fa-bars')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
} else {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
});
// 搜索功能
function submitSearch() {
const searchTerm = document.getElementById('searchInput').value.trim();
if (searchTerm) {
// 编码搜索词以处理特殊字符
const encodedSearchTerm = encodeURIComponent(searchTerm);
// 构建完整搜索URL
const searchUrl = `https://www.runro.cn/index.php/search/${encodedSearchTerm}/`;
// 在新标签页打开搜索结果
window.open(searchUrl, '_blank');
}
}
</script>
</body>
</html>