当前位置:首页 > 技术博客 > HTML > 超好看的404动效提示页面

超好看的404动效提示页面

4年前 (2021-10-19)HTML3629

网页版404提示页面, 这款无论从设计到配色都是绝绝子,配合动态404文字,有不错的直觉感受

<html>
<head>
  <meta charset="UTF-8">
  <title>CodePen - Daily UI #008 - 404 Page</title> 
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700,800,900|Barlow:300,400,500,600,700,800,900&display=swap");
  h1,h2,h3,h4,h5,h6,p,ul,li,button,a,i,input,body {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color: inherit;
  }
   
  html, body, .wrapper{
    height: auto;
    font-family: "Barlow", sans-serif;
    background: #695681;
    overflow-x:hidden;
    overflow-y:hidden;
  }
  .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow-x: hidden;
  }
  .wrapper .container {
    margin: 0 auto;
    transition: all 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .wrapper .container .scene {
    position: absolute;
    width: 100vw;
    height: 100vh;
    vertical-align: middle;
  }
  .wrapper .container .one,
  .wrapper .container .two,
  .wrapper .container .three,
  .wrapper .container .circle,
  .wrapper .container .p404 {
    width: 60%;
    height: 60%;
    top: 20% !important;
    left: 20% !important;
    min-width: 400px;
    min-height: 400px;
  }
  .wrapper .container .one .content,
  .wrapper .container .two .content,
  .wrapper .container .three .content,
  .wrapper .container .circle .content,
  .wrapper .container .p404 .content {
    width: 600px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: content 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
  }
  @keyframes content {
    0% {
      width: 0;
    }
  }
  .wrapper .container .one .content .piece,
  .wrapper .container .two .content .piece,
  .wrapper .container .three .content .piece,
  .wrapper .container .circle .content .piece,
  .wrapper .container .p404 .content .piece {
    width: 200px;
    height: 80px;
    display: flex;
    position: absolute;
    border-radius: 80px;
    z-index: 1;
    animation: pieceLeft 8s cubic-bezier(1, 0.06, 0.25, 1) infinite both;
  }
  @keyframes pieceLeft {
    50% {
      left: 80%;
      width: 10%;
    }
  }
  @keyframes pieceRight {
    50% {
      right: 80%;
      width: 10%;
    }
  }
  @media screen and (max-width: 799px) {
    .wrapper .container .one,
  .wrapper .container .two,
  .wrapper .container .three,
  .wrapper .container .circle,
  .wrapper .container .p404 {
      width: 90%;
      height: 90%;
      top: 5% !important;
      left: 5% !important;
      min-width: 280px;
      min-height: 280px;
    }
  }
  @media screen and (max-height: 660px) {
    .wrapper .container .one,
  .wrapper .container .two,
  .wrapper .container .three,
  .wrapper .container .circle,
  .wrapper .container .p404 {
      min-width: 280px;
      min-height: 280px;
      width: 60%;
      height: 60%;
      top: 20% !important;
      left: 20% !important;
    }
  }
  .wrapper .container .text {
    width: 60%;
    height: 40%;
    min-width: 400px;
    min-height: 500px;
    position: absolute;
    margin: 40px 0;
    animation: text 0.6s 1.8s ease backwards;
  }
  @keyframes text {
    0% {
      opacity: 0;
      transform: translateY(40px);
    }
  }
  @media screen and (max-width: 799px) {
    .wrapper .container .text {
      min-height: 400px;
      height: 80%;
    }
  }
  .wrapper .container .text article {
    width: 400px;
    position: absolute;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  @media screen and (max-width: 799px) {
    .wrapper .container .text article {
      width: 100%;
    }
  }
  .wrapper .container .text article p {
    color: white;
    font-size: 18px;
    letter-spacing: 0.6px;
    margin-bottom: 40px;
    text-shadow: 6px 6px 10px #32243E;
  }
  .wrapper .container .text article button {
    height: 40px;
    padding: 0 30px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 15px 20px rgba(54, 24, 79, 0.5);
    z-index: 3;
    color: #695681;
    background-color: white;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
  }
  .wrapper .container .text article button:hover {
    box-shadow: 0px 10px 10px -10px rgba(54, 24, 79, 0.5);
    transform: translateY(5px);
    background: #FB8A8A;
    color: white;
  }
  .wrapper .container .p404 {
    font-size: 200px;
    font-weight: 700;
    letter-spacing: 4px;
    color: white;
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 2;
    animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both;
    animation-delay: 1.2s;
  }
  @media screen and (max-width: 799px) {
    .wrapper .container .p404 {
      font-size: 100px;
    }
  }
  @keyframes anime404 {
    0% {
      opacity: 0;
      transform: scale(10) skew(20deg, 20deg);
    }
  }
  .wrapper .container .p404:nth-of-type(2) {
    color: #36184F;
    z-index: 1;
    animation-delay: 1s;
    filter: blur(10px);
    opacity: 0.8;
  }
  .wrapper .container .circle {
    position: absolute;
  }
  .wrapper .container .circle:before {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    background-color: rgba(54, 24, 79, 0.2);
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);
    animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
  }
  @keyframes circle {
    0% {
      width: 0;
      height: 0;
    }
  }
  @media screen and (max-width: 799px) {
    .wrapper .container .circle:before {
      width: 400px;
      height: 400px;
    }
  }
  .wrapper .container .one .content:before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background-color: rgba(54, 24, 79, 0.3);
    border-radius: 100%;
    box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);
    animation: circle 0.8s 0.4s cubic-bezier(1, 0.06, 0.25, 1) backwards;
  }
  @media screen and (max-width: 799px) {
    .wrapper .container .one .content:before {
      width: 300px;
      height: 300px;
    }
  }
  .wrapper .container .one .content .piece {
    background: linear-gradient(90deg, #8077EA 13.7%, #EB73FF 94.65%);
  }
  .wrapper .container .one .content .piece:nth-child(1) {
    right: 15%;
    top: 18%;
    height: 30px;
    width: 120px;
    animation-delay: 0.5s;
    animation-name: pieceRight;
  }
  .wrapper .container .one .content .piece:nth-child(2) {
    left: 15%;
    top: 45%;
    width: 150px;
    height: 50px;
    animation-delay: 1s;
    animation-name: pieceLeft;
  }
  .wrapper .container .one .content .piece:nth-child(3) {
    left: 10%;
    top: 75%;
    height: 20px;
    width: 70px;
    animation-delay: 1.5s;
    animation-name: pieceLeft;
  }
  .wrapper .container .two .content .piece {
    background: linear-gradient(90deg, #FFEDC0 0%, #FF9D87 100%);
  }
  .wrapper .container .two .content .piece:nth-child(1) {
    left: 0%;
    top: 25%;
    height: 40px;
    width: 120px;
    animation-delay: 2s;
    animation-name: pieceLeft;
  }
  .wrapper .container .two .content .piece:nth-child(2) {
    right: 15%;
    top: 35%;
    width: 180px;
    height: 50px;
    animation-delay: 2.5s;
    animation-name: pieceRight;
  }
  .wrapper .container .two .content .piece:nth-child(3) {
    right: 10%;
    top: 80%;
    height: 20px;
    width: 160px;
    animation-delay: 3s;
    animation-name: pieceRight;
  }
  .wrapper .container .three .content .piece {
    background: #FB8A8A;
  }
  .wrapper .container .three .content .piece:nth-child(1) {
    left: 25%;
    top: 35%;
    height: 20px;
    width: 80px;
    animation-name: pieceLeft;
    animation-delay: 3.5s;
  }
  .wrapper .container .three .content .piece:nth-child(2) {
    right: 10%;
    top: 55%;
    width: 140px;
    height: 40px;
    animation-name: pieceRight;
    animation-delay: 4s;
  }
  .wrapper .container .three .content .piece:nth-child(3) {
    left: 40%;
    top: 68%;
    height: 20px;
    width: 80px;
    animation-name: pieceLeft;
    animation-delay: 4.5s;
  }
  </style>

</head>
<body> 
    <section class="wrapper">

        <div class="container">

            <div id="scene" class="scene" data-hover-only="false">


                <div class="circle" data-depth="1.2"></div>

                <div class="one" data-depth="0.9">
                    <div class="content">
                        <span class="piece"></span>
                        <span class="piece"></span>
                        <span class="piece"></span>
                    </div>
                </div>

                <div class="two" data-depth="0.60">
                    <div class="content">
                        <span class="piece"></span>
                        <span class="piece"></span>
                        <span class="piece"></span>
                    </div>
                </div>

                <div class="three" data-depth="0.40">
                    <div class="content">
                        <span class="piece"></span>
                        <span class="piece"></span>
                        <span class="piece"></span>
                    </div>
                </div>

                <p class="p404" data-depth="0.50">404</p>
                <p class="p404" data-depth="0.10">404</p>

            </div>

            <div class="text">
                <article>
                    <p>Uh oh! Looks like you got lost. <br>Go back to the homepage if you dare!</p>
                    <a href="https://www.liuzhixi.cn"><button>i dare!</button></a>
                </article>
            </div>

        </div>
    </section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js'></script>

<script> 
    var scene = document.getElementById('scene');
    var parallax = new Parallax(scene);
</script>

</body>
</html>


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/197.html

相关文章

黑色的分类下拉菜单选择ui特效

黑色的分类下拉菜单选择ui特效

html5基于svg制作制作黑色简洁的带图标分类的下拉菜单,点击选中下拉菜单效果。可用于各大网站分类菜单选择特效。css代码html { &...

React垂直手风琴收缩展示特效

React垂直手风琴收缩展示特效

基于React dom制作简洁黑色的垂直手风琴菜单收缩内容展示,支持滑动和多个菜单收缩展开效果,通过js获取标题和内容,直接修改文本即可使用。下载链接: htt...

庆祝建党100周年给网站加个喜庆的横幅

庆祝建党100周年给网站加个喜庆的横幅

<style> /*当屏幕分辨率小于1063是就隐藏*/     @media only&nb...

蓝色系的个人简历HTML5模板

蓝色系的个人简历HTML5模板

一个简单、现代、富有创意和响应式的个人简历介绍HTML5单页模板。这个模板可用于创意设计师,摄影师,开发人员,或任何职业。它是完全定制的,你可以很容易地改变背景...

简洁的个人图文博客HTML模板

简洁的个人图文博客HTML模板

一款轻量级简洁响应式的图文生活记录个人博客模板。它是理想的旅游,生活方式,食品,时尚,最小,或摄影博客和更多的相关网站。包含了所有必需的ui布局元素。下载链接:...

多功能的个人简历主页html模板

多功能的个人简历主页html模板

一款多功能和多样性可供使用,个人简历/个人作品展示HTML模板 。它建立在bootstrap 5x的基础上,响应式布局,高度可定制修改使用。...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。