源界面 源界面 2天前

404 Not Found 效果图片

html/css

一个 显示 404 错误的精简界面
FH5UI4Pn

404演示效果界面

源码如下：

  1. <!--
  2. 禁止用于违法用途。
  3. -->
  4. <!DOCTYPE html>
  5. <html lang="zh">
  7. <head>
  8.     <!-- 设置字符编码 -->
  9.     <meta charset="UTF-8">
  10.     <!-- 设置页面在不同设备上的显示效果 -->
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.     <title>404 Not Found</title>
  13.     <!-- 引入 Font Awesome 图标库 -->
  14.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  15.     <style>
  16.         body {
  17.             /* 设置背景渐变 */
  18.             background: linear-gradient(135deg, #3498db, #9b59b6);
  19.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  20.             color: white;
  21.             margin: 0;
  22.             padding: 0;
  23.             /* 垂直和水平居中内容 */
  24.             display: flex;
  25.             flex-direction: column;
  26.             justify-content: center;
  27.             align-items: center;
  28.             min-height: 100vh;
  29.             overflow: hidden;
  30.             /* 背景动画 */
  31.             animation: backgroundShift 10s ease infinite alternate;
  32.         }
  34.         /* 背景渐变动画 */
  35.         @keyframes backgroundShift {
  36.             0% {
  37.                 background: linear-gradient(135deg, #3498db, #9b59b6);
  38.             }
  39.             100% {
  40.                 background: linear-gradient(135deg, #9b59b6, #3498db);
  41.             }
  42.         }
  44.         h1 {
  45.             font-size: 6em;
  46.             margin-bottom: 20px;
  47.             text-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 25px rgba(255, 255, 255, 0.3);
  48.             /* 应用霓虹灯闪烁和淡入动画 */
  49.             animation: neonGlow 1.5s ease-in-out infinite alternate, fadeInDown 1s ease-out, bounce 1s ease infinite alternate;
  50.         }
  52.         /* 霓虹灯闪烁动画 */
  53.         @keyframes neonGlow {
  54.             from {
  55.                 text-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 25px rgba(255, 255, 255, 0.3);
  56.             }
  57.             to {
  58.                 text-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 35px rgba(255, 255, 255, 0.6);
  59.             }
  60.         }
  62.         /* 从上方淡入动画 */
  63.         @keyframes fadeInDown {
  64.             from {
  65.                 opacity: 0;
  66.                 transform: translateY(-50px);
  67.             }
  68.             to {
  69.                 opacity: 1;
  70.                 transform: translateY(0);
  71.             }
  72.         }
  74.         /* 弹跳动画 */
  75.         @keyframes bounce {
  76.             from {
  77.                 transform: translateY(0);
  78.             }
  79.             to {
  80.                 transform: translateY(-10px);
  81.             }
  82.         }
  84.         hr {
  85.             width: 70%;
  86.             border: 1px solid rgba(255, 255, 255, 0.3);
  87.             margin-bottom: 30px;
  88.             /* 淡入动画 */
  89.             animation: fadeIn 1s ease-out, scaleIn 1s ease;
  90.         }
  92.         /* 淡入动画 */
  93.         @keyframes fadeIn {
  94.             from {
  95.                 opacity: 0;
  96.             }
  97.             to {
  98.                 opacity: 1;
  99.             }
  100.         }
  102.         /* 缩放入场动画 */
  103.         @keyframes scaleIn {
  104.             from {
  105.                 transform: scale(0);
  106.             }
  107.             to {
  108.                 transform: scale(1);
  109.             }
  110.         }
  112.         p.special-tip {
  113.             font-size: 1.8em;
  114.             color: #ecf0f1;
  115.             text-align: center;
  116.             margin-bottom: 30px;
  117.             max-width: 80%;
  118.             /* 从下方淡入动画 */
  119.             animation: fadeInUp 1s ease-out, slideInLeft 1s ease;
  120.         }
  122.         /* 从下方淡入动画 */
  123.         @keyframes fadeInUp {
  124.             from {
  125.                 opacity: 0;
  126.                 transform: translateY(50px);
  127.             }
  128.             to {
  129.                 opacity: 1;
  130.                 transform: translateY(0);
  131.             }
  132.         }
  134.         /* 从左侧滑入动画 */
  135.         @keyframes slideInLeft {
  136.             from {
  137.                 transform: translateX(-100%);
  138.             }
  139.             to {
  140.                 transform: translateX(0);
  141.             }
  142.         }
  144.         a {
  145.             color: #ecf0f1;
  146.             text-decoration: none;
  147.             border-bottom: 1px solid #ecf0f1;
  148.             transition: all 0.3s ease;
  149.         }
  151.         a:hover {
  152.             color: #bdc3c7;
  153.             border-bottom-color: #bdc3c7;
  154.             transform: scale(1.1);
  155.         }
  157.         .search-container {
  158.             margin-bottom: 30px;
  159.             display: flex;
  160.             justify-content: center;
  161.             align-items: center;
  162.             flex-wrap: wrap;
  163.             /* 淡入动画 */
  164.             animation: fadeIn 1s ease-out, rotateIn 1s ease;
  165.         }
  167.         /* 旋转入场动画 */
  168.         @keyframes rotateIn {
  169.             from {
  170.                 transform: rotate(-90deg);
  171.                 opacity: 0;
  172.             }
  173.             to {
  174.                 transform: rotate(0);
  175.                 opacity: 1;
  176.             }
  177.         }
  179.         .search-container input {
  180.             padding: 12px;
  181.             border: none;
  182.             border-radius: 4px;
  183.             margin: 5px;
  184.             flex: 1 1 auto;
  185.             background-color: rgba(255, 255, 255, 0.1);
  186.             color: white;
  187.             outline: none;
  188.             transition: all 0.3s ease;
  189.         }
  191.         .search-container input:focus {
  192.             background-color: rgba(255, 255, 255, 0.2);
  193.             transform: scale(1.05);
  194.         }
  196.         .search-container button {
  197.             padding: 8px 25px;
  198.             border: none;
  199.             border-radius: 4px;
  200.             background-color: rgba(255, 255, 255, 0.2);
  201.             color: white;
  202.             cursor: pointer;
  203.             transition: all 0.3s ease;
  204.             font-size: 16px;
  205.             font-weight: 500;
  206.             margin: 5px;
  207.         }
  209.         .search-container button:hover {
  210.             background-color: rgba(255, 255, 255, 0.3);
  211.             transform: translateY(-2px) scale(1.05);
  212.         }
  214.         .nav-links {
  215.             margin-bottom: 30px;
  216.             display: flex;
  217.             justify-content: center;
  218.             align-items: center;
  219.             flex-wrap: wrap;
  220.             /* 淡入动画 */
  221.             animation: fadeIn 1s ease-out, slideInRight 1s ease;
  222.         }
  224.         /* 从右侧滑入动画 */
  225.         @keyframes slideInRight {
  226.             from {
  227.                 transform: translateX(100%);
  228.             }
  229.             to {
  230.                 transform: translateX(0);
  231.             }
  232.         }
  234.         .nav-links a {
  235.             margin: 10px;
  236.             display: inline-flex;
  237.             align-items: center;
  238.             transition: transform 0.3s ease;
  239.         }
  241.         .nav-links a:hover {
  242.             transform: scale(1.1);
  243.         }
  245.         .nav-links a i {
  246.             margin-right: 5px;
  247.             transition: all 0.3s ease;
  248.         }
  250.         .nav-links a:hover i {
  251.             transform: scale(1.2);
  252.         }
  254.         /* 音乐播放按钮样式 */
  255.         .music-button {
  256.             position: fixed;
  257.             top: 20px;
  258.             right: 20px;
  259.             background-color: rgba(255, 255, 255, 0.2);
  260.             border: none;
  261.             border-radius: 50%;
  262.             width: 40px;
  263.             height: 40px;
  264.             color: white;
  265.             font-size: 18px;
  266.             cursor: pointer;
  267.             transition: all 0.3s ease;
  268.             display: flex;
  269.             justify-content: center;
  270.             align-items: center;
  271.             animation: pulse 2s ease infinite;
  272.         }
  274.         /* 脉冲动画 */
  275.         @keyframes pulse {
  276.             0% {
  277.                 transform: scale(1);
  278.             }
  279.             50% {
  280.                 transform: scale(1.1);
  281.             }
  282.             100% {
  283.                 transform: scale(1);
  284.             }
  285.         }
  287.         .music-button:hover {
  288.             background-color: rgba(255, 255, 255, 0.3);
  289.             transform: scale(1.1);
  290.         }
  292.         /* 模态框样式 */
  293.         .modal {
  294.             display: none;
  295.             position: fixed;
  296.             z-index: 1;
  297.             left: 0;
  298.             top: 0;
  299.             width: 100%;
  300.             height: 100%;
  301.             overflow: auto;
  302.             background-color: rgba(0, 0, 0, 0.4);
  303.             justify-content: center;
  304.             align-items: center;
  305.         }
  307.         .modal-content {
  308.             background-color: #fefefe;
  309.             padding: 20px;
  310.             border: 1px solid #888;
  311.             width: 300px;
  312.             text-align: center;
  313.             border-radius: 8px;
  314.             animation: fadeInModal 0.3s ease;
  315.         }
  317.         /* 模态框淡入动画 */
  318.         @keyframes fadeInModal {
  319.             from {
  320.                 opacity: 0;
  321.                 transform: scale(0.8);
  322.             }
  323.             to {
  324.                 opacity: 1;
  325.                 transform: scale(1);
  326.             }
  327.         }
  329.         .close {
  330.             color: #aaa;
  331.             float: right;
  332.             font-size: 28px;
  333.             font-weight: bold;
  334.         }
  336.         .close:hover,
  337.         .close:focus {
  338.             color: black;
  339.             text-decoration: none;
  340.             cursor: pointer;
  341.         }
  343.         /* 媒体查询，适配小屏幕 */
  344.         @media (max-width: 768px) {
  345.             h1 {
  346.                 font-size: 4em;
  347.             }
  349.             p.special-tip {
  350.                 font-size: 1.4em;
  351.             }
  353.             .search-container {
  354.                 flex-direction: column;
  355.             }
  357.             .search-container input,
  358.             .search-container button {
  359.                 width: 90%;
  360.             }
  361.         }
  362.     </style>
  363. </head>
  365. <body>
  367.     <!-- 显示 404 错误标题 -->
  368.     <h1>404 Not Found</h1>
  369.     <!-- 分割线 -->
  370.     <hr>
  371.     <!-- 提示信息 -->
  372.     <p class="special-tip">哎呀，你好像来到了一个不存在的地方。<br>点击 <a href="/">这里</a> 返回主页吧。</p>
  373.     <!-- 搜索框和按钮 -->
  374.     <div class="search-container">
  375.         <input type="text" id="search-input" placeholder="使用百度搜索">
  376.         <button onclick="searchOnBaidu()">百度搜索</button>
  377.     </div>
  379.     <!-- 模态框 -->
  380.     <div id="myModal" class="modal">
  382.     </div>
  383.     <center>道客天下个人主页</center>
  384.     <script>
  385.         // 百度搜索功能
  386.         function searchOnBaidu() {
  387.             const input = document.getElementById('search-input');
  388.             const keyword = input.value;
  389.             if (keyword) {
  390.                 const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`;
  391.                 window.open(searchUrl, '_blank');
  392.             }
  393.         }
  395.         const musicButton = document.getElementById('musicButton');
  396.         const music = document.getElementById('music');
  397.         // 打开模态框
  398.         function openModal() {
  399.             const modal = document.getElementById('myModal');
  400.             modal.style.display = "flex";
  401.         }
  403.         // 关闭模态框
  404.         function closeModal() {
  405.             const modal = document.getElementById('myModal');
  406.             modal.style.display = "none";
  407.         }
  409.         // 点击模态框外部关闭模态框
  410.         window.onclick = function (event) {
  411.             const modal = document.getElementById('myModal');
  412.             if (event.target == modal) {
  413.                 closeModal();
  414.             }
  415.         }
  417.         // 禁止 F12 打开开发者工具
  418.         document.addEventListener('keydown', function (e) {
  419.             if (e.key === 'F12') {
  420.                 e.preventDefault();
  421.             }
  422.         });
  424.         // 禁止右键菜单
  425.         document.addEventListener('contextmenu', function (e) {
  426.             e.preventDefault();
  427.         });
  428.     </script>
  429. </body>
  431. </html>