两个非常帅气的404页面模板,不带图片纯css效果

犇

第一个纯css效果，不带任何图片和JS

404页面模板


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>404 Not Found</title>
<style>
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  text-align: center;
  background: #03a9f4;
}
h1 {}
h2 { font-size: 1.2em; }
#page{
  background-color: #FFFFFF;
    width: 60%;
    margin: 24px auto;
    padding: 12px;
}
#header {
    padding: 6px ;
    text-align: center;
}
#content{color: #FFFFFF; }
.status3xx {color: #FFFFFF; }
.status4xx { color: #FFFFFF; }
.status5xx {color: #FFFFFF; }
.fb a {color: #FFFFFF; text-decoration: none;font-size: 18px;font-family:   "Helvetica Neue", Helvetica, Arial, STHeitiTC-light, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;}
.conatiner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 900px;
}

.circle {
  border-radius: 50%;
  padding: 0;
  display: inline-block;
  position: relative;
  height: 375px;
}
.circle:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 40px solid #fffbdf;
  z-index: 50;
  border-radius: 50%;
}

.holder {
  overflow: hidden;
  width: 366px;
  height: 345px;
  border-radius: 50%;
  position: relative;
}

.bob {
  position: absolute;
  display: inline-block;
  left: 50%;
  z-index: 10;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-animation: 2s updown ease-in infinite;
  animation: 2s updown ease-in infinite;
  top: 100%;
}
.bob .nose {
  position: relative;
  background: #fdd5b6;
  border: 3px solid #602f2d;
  margin: 0 auto;
  height: 35px;
  width: 35px;
  z-index: 15;
  border-radius: 50% 50% 0 0;
  top: 8px;
}
.bob .nose:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 12px;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #602f2d;
  box-shadow: 13px 0 #602f2d;
}
.bob .face {
  width: 200px;
  height: 200px;
  background: #fdd5b6;
  border: 3px solid #602f2d;
  border-radius: 50%;
  position: relative;
  z-index: 50;
  box-shadow: 15px 0 #f7c6a4 inset;
}
.bob .ear {
  position: absolute;
  background: #fdd5b6;
  border: 3px solid #602f2d;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 15;
  top: 115px;
  left: -5px;
}
.bob .ear:after, .bob .ear:before {
  content: '';
  position: absolute;
  background: #602f2d;
  border-radius: 15px;
  height: 3px;
  width: 20px;
  top: 12px;
  left: 5px;
}
.bob .ear:after {
  -webkit-transform: rotate(127deg);
  transform: rotate(127deg);
  width: 7px;
  top: 15px;
  left: 7px;
}
.bob .ear.rgt {
  left: auto;
  right: -5px;
}
.bob .ear.rgt:after {
  -webkit-transform: rotate(47deg);
  transform: rotate(47deg);
  top: 15px;
  left: 18px;
}
.bob .neck {
  position: relative;
  background: #fdd5b6;
  border: 3px solid #602f2d;
  margin: 0 auto 0;
  height: 50px;
  width: 70px;
  z-index: 15;
  border-radius: 0 0 50% 50%;
  top: -8px;
  box-shadow: 10px 0 #f7c6a4 inset;
}
.bob .mouth {
  position: absolute;
  border: 3px solid #602f2d;
  background: #ec7374;
  width: 80%;
  height: 80%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  -webkit-animation: 1s openclose ease-in infinite;
  animation: 1s openclose ease-in infinite;
}
.bob .mouth:after, .bob .mouth:before {
  content: '';
  position: absolute;
  background: #cc5e64;
  border: 5px solid #df6062;
  border-radius: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 120px;
  height: 120px;
  z-index: 2;
}
.bob .mouth:after {
  z-index: 10;
  bottom: auto;
  top: 25px;
  background: #ec7374;
  height: 40px;
  width: 40px;
  border-top-color: transparent;
}
.bob .tongue {
  position: absolute;
  background: #602f2d;
  width: 40px;
  height: 40px;
  left: 0;
  bottom: 5px;
  right: 0;
  margin: auto;
  border-radius: 50%;
  z-index: 5;
}
.bob .tongue:after, .bob .tongue:before {
  content: '';
  position: absolute;
  background: #f9adba;
  border: 3px solid #602f2d;
  border-radius: 50px;
  top: 22px;
  left: -4px;
  width: 30px;
  height: 40px;
  z-index: 2;
}
.bob .tongue:before {
  left: 16px;
}

.drops {
  background: #8ecbf9;
  border: 2px solid #602f2d;
  width: 20px;
  height: 20px;
  border-radius: 50px 50px 0 50px;
  position: absolute;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
  top: 150px;
  left: 70px;
  z-index: 100;
  -webkit-animation: 2s drop-l ease-in infinite;
  animation: 2s drop-l ease-in infinite;
}
.drops:nth-child(2) {
  left: auto;
  right: 70px;
  -webkit-transform: rotate(145deg);
  transform: rotate(145deg);
  -webkit-animation: 2s drop-r ease-in infinite;
  animation: 2s drop-r ease-in infinite;
}
.drops:after, .drops:before {
  content: '';
  background: #8ecbf9;
  border: 2px solid #602f2d;
  width: 20px;
  height: 20px;
  border-radius: 50px 50px 0 50px;
  position: absolute;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
  top: 20px;
  left: -25px;
}
.drops:before {
  top: -30px;
  left: 0px;
}

.hand {
  border: 3px solid #602f2d;
  position: absolute;
  z-index: 50;
  background: #fdd5b6;
  width: 25px;
  height: 15px;
  border-radius: 20px;
  bottom: 86px;
  z-index: 200;
  left: 64px;
  -webkit-transform: rotate(-36deg);
  transform: rotate(-36deg);
}
.hand:after, .hand:before {
  content: '';
  border: 3px solid #602f2d;
  position: absolute;
  z-index: 50;
  background: #fdd5b6;
  width: 25px;
  height: 15px;
  border-radius: 20px;
  z-index: 200;
  top: 100%;
  left: 0;
}
.hand:before {
  top: 200%;
}

.rgt {
  left: auto;
  right: 60px;
  bottom: 96px;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}

.numer {
  font-size: 400px;
  display: inline-block;
  color: #fffbdf;
}
@-webkit-keyframes updown {
  50% , 70% {
    top: 25%;
  }
}
@keyframes updown {
  50% , 70% {
    top: 25%;
  }
}
@-webkit-keyframes openclose {
  0% , 100% {
    -webkit-transform: scale(0.95, 0.95);
    transform: scale(0.95, 0.95);
  }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
}
@keyframes openclose {
  0% , 100% {
    -webkit-transform: scale(0.95, 0.95);
    transform: scale(0.95, 0.95);
  }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
}
@-webkit-keyframes drop-l {
  0% , 50% {
    opacity: 0;
    -webkit-transform: translate(50px, 0) rotate(-15deg);
    transform: translate(50px, 0) rotate(-15deg);
  }
  55% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(-15deg);
    transform: translate(0, 0) rotate(-15deg);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(-30px, 0) rotate(-25deg);
    transform: translate(-30px, 0) rotate(-25deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: translate(-50px, 100px) rotate(-90deg);
    transform: translate(-50px, 100px) rotate(-90deg);
    opacity: .5;
  }
  86% , 100% {
    opacity: 0;
  }
}
@keyframes drop-l {
  0% , 50% {
    opacity: 0;
    -webkit-transform: translate(50px, 0) rotate(-15deg);
    transform: translate(50px, 0) rotate(-15deg);
  }
  55% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(-15deg);
    transform: translate(0, 0) rotate(-15deg);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(-30px, 0) rotate(-25deg);
    transform: translate(-30px, 0) rotate(-25deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: translate(-50px, 100px) rotate(-90deg);
    transform: translate(-50px, 100px) rotate(-90deg);
    opacity: .5;
  }
  86% , 100% {
    opacity: 0;
  }
}
@-webkit-keyframes drop-r {
  0% , 50% {
    opacity: 0;
    -webkit-transform: translate(-50px, 0) rotate(145deg);
    transform: translate(-50px, 0) rotate(145deg);
  }
  55% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(145deg);
    transform: translate(0, 0) rotate(145deg);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(30px, 0) rotate(160deg);
    transform: translate(30px, 0) rotate(160deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: translate(50px, 100px) rotate(180deg);
    transform: translate(50px, 100px) rotate(180deg);
    opacity: .5;
  }
  86% , 100% {
    opacity: 0;
  }
}
@keyframes drop-r {
  0% , 50% {
    opacity: 0;
    -webkit-transform: translate(-50px, 0) rotate(145deg);
    transform: translate(-50px, 0) rotate(145deg);
  }
  55% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(145deg);
    transform: translate(0, 0) rotate(145deg);
  }
  70% {
    opacity: 1;
    -webkit-transform: translate(30px, 0) rotate(160deg);
    transform: translate(30px, 0) rotate(160deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: translate(50px, 100px) rotate(180deg);
    transform: translate(50px, 100px) rotate(180deg);
    opacity: .5;
  }
  86% , 100% {
    opacity: 0;
  }
}
</style>
</head>
<body>
<div class="conatiner">
<div id="header" class="status4xx"><h1>ERROR 404 - Not Found!</h1></div>
<div id="content">
    <p>你查找的页面不存在.</p>
</div>
<span class="numer">4</span>
  <div class="circle">
    <div class="drops"></div>
    <div class="drops"></div>
    <div class="hand"></div>
    <div class="hand rgt"></div>
    <div class="holder">
      <div class="bob">
        <div class="nose"></div>
        <div class="face">
          <div class="mouth">
            <div class="tongue"></div>
          </div>
        </div>
        <div class="ear"></div>
        <div class="ear rgt"></div>
        <div class="neck"></div>
      </div>
    </div>
  </div><span class="numer">4</span>
  <div class="fb"><a href="/">返回首页</a></div>
</div>
</body>
</html>

第二个雪花效果图,带了几行js代码,如果不想要动态效果,可以去掉就行了，也是纯css的设计

404页面模板2


<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport">
<title>404 Not Found</title>


 <style>
 html,body {
  height: 100%;
  min-height: 450px;
  font-size: 32px;
  font-weight: 500;
  color: #5d7399;
  margin:0;padding:0;border:0;
}

.content {
  height: 100%;
  position: relative;
  z-index: 1;
  background-color: #d2e1ec;
  background-image: -webkit-linear-gradient(top, #bbcfe1 0%, #e8f2f6 80%);
  background-image: linear-gradient(to bottom, #bbcfe1 0%, #e8f2f6 80%);
  overflow: hidden;
}

.snow {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 20;
}

.main-text {
  padding: 20vh 20px 0 20px;
  text-align: center;
  line-height: 2em;
  font-size: 5vh;
}
.main-text h1 {
  font-size:45px;
  line-height:48px;
  margin:0;
  padding:0;}
.main-text-a{
  height:32px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.main-text-a a {
   font-size:16px;
   text-decoration:none;
   color:#0066CC;
 }
.main-text-a a:hover{
   color:#000;
}
.home-link {
  font-size: 0.6em;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
  border-bottom: 1px dashed rgba(93, 115, 153, 0.5);
}
.home-link:hover {
  opacity: 1;
}

.ground {
  height: 160px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #f6f9fa;
  box-shadow: 0 0 10px 10px #f6f9fa;
}
.ground:before, .ground:after {
  content: '';
  display: block;
  width: 250px;
  height: 250px;
  position: absolute;
  top: -62.5px;
  z-index: -1;
  background: transparent;
  -webkit-transform: scaleX(0.2) rotate(45deg);
          transform: scaleX(0.2) rotate(45deg);
}
.ground:after {
  left: 50%;
  margin-left: -166.66667px;
  box-shadow: -340px 260px 15px #8193b2, -620px 580px 15px #8193b2, -900px 900px 15px #b0bccf, -1155px 1245px 15px #b4bed1, -1515px 1485px 15px #8193b2, -1755px 1845px 15px #8a9bb8, -2050px 2150px 15px #91a1bc, -2425px 2375px 15px #bac4d5, -2695px 2705px 15px #a1aec6, -3020px 2980px 15px #8193b2, -3315px 3285px 15px #94a3be, -3555px 3645px 15px #9aa9c2, -3910px 3890px 15px #b0bccf, -4180px 4220px 15px #bac4d5, -4535px 4465px 15px #a7b4c9, -4840px 4760px 15px #94a3be;
}
.ground:before {
  right: 50%;
  margin-right: -166.66667px;
  box-shadow: 325px -275px 15px #b4bed1, 620px -580px 15px #adb9cd, 925px -875px 15px #a1aec6, 1220px -1180px 15px #b7c1d3, 1545px -1455px 15px #7e90b0, 1795px -1805px 15px #b0bccf, 2080px -2120px 15px #b7c1d3, 2395px -2405px 15px #8e9eba, 2730px -2670px 15px #b7c1d3, 2995px -3005px 15px #9dabc4, 3285px -3315px 15px #a1aec6, 3620px -3580px 15px #8193b2, 3880px -3920px 15px #aab6cb, 4225px -4175px 15px #9dabc4, 4510px -4490px 15px #8e9eba, 4785px -4815px 15px #a7b4c9;
}

.mound {
  margin-top: -80px;
  font-weight: 800;
  font-size: 180px;
  text-align: center;
  color: #dd4040;
  pointer-events: none;
}
.mound:before {
  content: '';
  display: block;
  width: 600px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -300px;
  top: 50px;
  z-index: 1;
  border-radius: 100%;
  background-color: #e8f2f6;
  background-image: -webkit-linear-gradient(top, #dee8f1, #f6f9fa 60px);
  background-image: linear-gradient(to bottom, #dee8f1, #f6f9fa 60px);
}
.mound:after {
  content: '';
  display: block;
  width: 28px;
  height: 6px;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  top: 68px;
  z-index: 2;
  background: #dd4040;
  border-radius: 100%;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  box-shadow: -56px 12px 0 1px #dd4040, -126px 6px 0 2px #dd4040, -196px 24px 0 3px #dd4040;
}

.mound_text {
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
}

.mound_spade {
  display: block;
  width: 35px;
  height: 30px;
  position: absolute;
  right: 50%;
  top: 42%;
  margin-right: -250px;
  z-index: 0;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  background: #dd4040;
}
.mound_spade:before, .mound_spade:after {
  content: '';
  display: block;
  position: absolute;
}
.mound_spade:before {
  width: 40%;
  height: 30px;
  bottom: 98%;
  left: 50%;
  margin-left: -20%;
  background: #dd4040;
}
.mound_spade:after {
  width: 100%;
  height: 30px;
  top: -55px;
  left: 0%;
  box-sizing: border-box;
  border: 10px solid #dd4040;
  border-radius: 4px 4px 20px 20px;
}
 </style>

</head>

<body translate="no"> 
<div class="content">
  <canvas class="snow" id="snow" width="1920" height="917"></canvas>
  <div class="main-text">
    <h1>404 Not Found<br>你访问的页面不存在!</h1>
    <div class="main-text-a"><a href="/">< 返回首页</a></div>  
  </div>
  <div class="ground">
    <div class="mound"> 
      <div class="mound_text">404 </div>
      <div class="mound_spade"></div> 
    </div>
  </div>
</div>


    <script>
    (function() {
    function ready(fn) {
        if (document.readyState != 'loading'){
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }

    function makeSnow(el) {
        var ctx = el.getContext('2d');
        var width = 0;
        var height = 0;
        var particles = [];

        var Particle = function() {
            this.x = this.y = this.dx = this.dy = 0;
            this.reset();
        }

        Particle.prototype.reset = function() {
            this.y = Math.random() * height;
            this.x = Math.random() * width;
            this.dx = (Math.random() * 1) - 0.5;
            this.dy = (Math.random() * 0.5) + 0.5;
        }

        function createParticles(count) {
            if (count != particles.length) {
                particles = [];
                for (var i = 0; i < count; i++) {
                    particles.push(new Particle());
                }
            }
        }

        function onResize() {
            width = window.innerWidth;
            height = window.innerHeight;
            el.width = width;
            el.height = height;

            createParticles((width * height) / 10000);
        }

        function updateParticles() {
            ctx.clearRect(0, 0, width, height);
            ctx.fillStyle = '#f6f9fa';

            particles.forEach(function(particle) {
                particle.y += particle.dy;
                particle.x += particle.dx;

                if (particle.y > height) {
                    particle.y = 0;
                }

                if (particle.x > width) {
                    particle.reset();
                    particle.y = 0;
                }

                ctx.beginPath();
                ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
                ctx.fill();
            });

            window.requestAnimationFrame(updateParticles);
        }

        onResize();
        updateParticles();
    }

    ready(function() {
        var canvas = document.getElementById('snow');
        makeSnow(canvas);
    });
})();
  </script>


</body></html>