/*=============== GOOGLE FONTS ===============*/@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");/*=============== VARIABLES CSS ===============*/:root {  --header-height: 3.5rem;  /*========== Colors ==========*/  /*Color mode HSL(hue, saturation, lightness)*/  --first-color: hsl(38, 69%, 59%);  --text-color: hsl(38, 8%, 8%);  /*========== Font and typography ==========*/  /*.5rem = 8px | 1rem = 16px ...*/  --body-font: 'Space Grotesk', sans-serif;  --biggest-font-size: 2.375rem;  --normal-font-size: .938rem;  --smaller-font-size: .75rem;}/* Responsive typography */@media screen and (min-width: 1024px) {  :root {    --biggest-font-size: 5rem;    --normal-font-size: 1rem;    --smaller-font-size: .813rem;  }}/*=============== BASE ===============*/* {  box-sizing: border-box;  padding: 0;  margin: 0;}body {  font-family: var(--body-font);  font-size: var(--normal-font-size);  font-weight: 500;  color: var(--text-color);}ul {  list-style: none;}a {  text-decoration: none;}img {  max-width: 100%;  height: auto;}/*=============== REUSABLE CSS CLASSES ===============*/.container {  max-width: 1024px;  margin-left: 1.5rem;  margin-right: 1.5rem;}.main {  overflow: hidden; /* For the animations ScrollReveal */}/*=============== HEADER & NAV ===============*/.header {  position: fixed;  width: 100%;  background-color: transparent;  top: 0;  left: 0;  z-index: 100;}.nav {  height: var(--header-height);  display: flex;  justify-content: space-between;  align-items: center;}.nav__logo, .nav__toggle {  color: var(--text-color);  display: inline-flex;}.nav__logo {  font-weight: 700;}.nav__toggle {  font-size: 1.25rem;  cursor: pointer;}@media screen and (max-width: 767px) {  .nav__menu {    position: fixed;    background-color: var(--first-color);    left: 0;    top: -100%;    width: 100%;    padding: 5rem 0 4rem;    border-radius: 0 0 1.5rem 1.5rem;    box-shadow: 0 2px 4px hsla(38, 4%, 15%, .15);    transition: .4s;  }}.nav__list {  text-align: center;  display: flex;  flex-direction: column;  row-gap: 2rem;}.nav__link {  color: var(--text-color);}.nav__close {  position: absolute;  top: 1rem;  right: 1.5rem;  font-size: 1.5rem;  color: var(--text-color);  cursor: pointer;}/* Show menu */.show-menu {  top: 0;}/*=============== HOME ===============*/.home {  background-color: var(--first-color);  padding: 9rem 0 2rem;  height: 100vh;  display: grid;}.home__container {  display: grid;  align-content: center;  row-gap: 2.5rem;}.home__data {  text-align: center;}.home__title {  font-size: var(--biggest-font-size);  margin: .75rem 0;}.home__button {  margin-top: 2rem;  display: inline-block;  background-color: var(--text-color);  color: #fff;  padding: .80rem 1.5rem;  border-radius: 3rem;  transition: .4s;}.home__button:hover {  box-shadow: 0 4px 12px hsla(38, 69%, 8%, .2);}.home__img img {  width: 230px;  animation: floaty 1.8s infinite alternate;}.home__img {  justify-self: center;}.home__shadow {  width: 130px;  height: 24px;  background-color: hsla(38, 21%, 19%, .16);  margin: 0 auto;  border-radius: 50%;  filter: blur(7px);  animation: shadow 1.8s infinite alternate;}.home__footer {  display: flex;  justify-content: center;  column-gap: .5rem;  font-size: var(--smaller-font-size);  align-self: flex-end;}/* Animate ghost */@keyframes floaty {  0% {    transform: translateY(0);  }  100% {    transform: translateY(15px);  }}@keyframes shadow {  0% {    transform: scale(1, 1);  }  100% {    transform: scale(.85, .85);  }}/*=============== BREAKPOINTS ===============*//* For small devices */@media screen and (max-width: 320px) {  .home {    padding-top: 7rem;  }}/* For medium devices */@media screen and (min-width: 767px) {  .nav {    height: calc(var(--header-height) + 1.5rem);  }  .nav__toggle,   .nav__close {    display: none;  }  .nav__list {    flex-direction: row;    column-gap: 3.5rem;  }}/* For large devices */@media screen and (min-width: 1024px) {  .home__container {    grid-template-columns: repeat(2, 1fr);    align-items: center;    column-gap: 2rem;  }  .home__data {    text-align: initial;  }  .home__img img {    width: 400px;  }  .home__shadow {    width: 250px;    height: 40px;  }}@media screen and (min-width: 1048px) {  .container {    margin-left: auto;    margin-right: auto;  }}/* For 2K resolutions (2048 x 1152, 2048 x 1536) */@media screen and (min-width: 2048px) {  body {    zoom: 1.7;  }  .home {    height: initial;    row-gap: 4rem;  }}/* For 4K resolutions (3840 x 2160, 4096 x 2160) */@media screen and (min-width: 3840px) {  body {    zoom: 3.1;  }}

3、html页面

<!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <!--=============== BOXICONS ===============-->        <link href='css/boxicons.min.css' rel='stylesheet'>        <!--=============== CSS ===============-->        <link rel="stylesheet" href="css/styles.css">        <title>Responsive 404 website - Bedimcode</title>    </head>    <body>        <!--==================== HEADER ====================-->        <header class="header">            <nav class="nav container">                <a href="#" class="nav__logo">                    XCOMPANY                </a>                <div class="nav__menu" id="nav-menu">                    <ul class="nav__list">                        <li class="nav__item">                            <a href="/" class="nav__link">Home</a>                        </li>                        <li class="nav__item">                            <a href="#" class="nav__link">About</a>                        </li>                        <li class="nav__item">                            <a href="#" class="nav__link">Contact</a>                        </li>                    </ul>                    <div class="nav__close" id="nav-close">                        <i class='bx bx-x'></i>                    </div>                </div>                <!-- Toggle button -->                <div class="nav__toggle" id="nav-toggle">                    <i class='bx bx-grid-alt'></i>                </div>            </nav>        </header>        <!--==================== MAIN ====================-->        <main class="main">            <!--==================== HOME ====================-->            <section class="home">                <div class="home__container container">                    <div class="home__data">                        <span class="home__subtitle">Error 404</span>                        <h1 class="home__title">Hey Buddy</h1>                        <p class="home__description">                            We can't seem to find the page <br> you are looking for.                        </p>                        <a href="/" class="home__button">                            Go Home                        </a>                    </div>                    <div class="home__img">                        <img src="img/ghost-img.png" alt="">                        <div class="home__shadow"></div>                    </div>                </div>                <footer class="home__footer">                    <span>(554) 987-654</span>                    <span>|</span>                    <span>info@company.com</span>                </footer>            </section>        </main>        <!--=============== SCROLLREVEAL ===============-->        <script src="js/scrollreveal.min.js"></script>        <!--=============== MAIN JS ===============-->        <script src="js/main.js"></script>    </body></html>

2、JavaScript代码

/*=============== SHOW MENU ===============*/const navMenu = document.getElementById('nav-menu'),      navToggle = document.getElementById('nav-toggle'),      navClose = document.getElementById('nav-close')/*===== MENU SHOW =====*//* Validate if constant exists */if(navToggle){    navToggle.addEventListener('click', () =>{        navMenu.classList.add('show-menu')    })}/*===== MENU HIDDEN =====*//* Validate if constant exists */if(navClose){    navClose.addEventListener('click', () =>{        navMenu.classList.remove('show-menu')    })}/*=============== REMOVE MENU MOBILE ===============*/const navLink = document.querySelectorAll('.nav__link')function linkAction(){    const navMenu = document.getElementById('nav-menu')    // When we click on each nav__link, we remove the show-menu class    navMenu.classList.remove('show-menu')}navLink.forEach(n => n.addEventListener('click', linkAction))/*=============== SCROLL REVEAL ANIMATION ===============*/const sr = ScrollReveal({    distance: '90px',    duration: 3000,})sr.reveal(`.home__data`, {origin: 'top', delay: 400})sr.reveal(`.home__img`, {origin: 'bottom', delay: 600})sr.reveal(`.home__footer`, {origin: 'bottom', delay: 800})

来源https://github.com/bedimcode/responsive-404-page分享

使用HTML+CSS动画和JavaScript创建响应式404页面，演示Responsive 404 website - Bedimcode (bokequ.com)

1、自适应决胜巅峰国际服官网下巅峰国际pg下载入口官网载桌面端并兼容移动设备， 顶: 573踩: 429