下雪天404页面效果-html代码-BFW代码库

下雪天404页面效果

代码语言：html

代码描述：下雪天404页面效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Dosis:400,300,500,800'>
<style>
html,
body {
  height: 100%;
  min-height: 450px;
  font-family: 'Dosis', sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #5d7399;
}

.content {
  height: 100%;
  position: relative;
  z-index: 1;
  background-color: #d2e1ec;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#bbcfe1), color-stop(80%, #e8f2f6));
  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;
}

.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.6666666667px;
  box-shadow: -270px 330px 15px #8e9eba, -585px 615px 15px #b4bed1, -865px 935px 15px #a7b4c9, -1210px 1190px 15px #7e90b0, -1520px 1480px 15px #7e90b0, -1790px 1810px 15px #b7c1d3, -2105px 2095px 15px #94a3be, -2370px 2430px 15px #8496b4, -2710px 2690px 15px #9dabc4, -3005px 2995px 15px #7e90b0, -3280px 3320px 15px #b0bccf, -3560px 3640px 15px #94a3be, -3945px 3855px 15px #91a1bc, -4150px 4250px 15px #b4bed1, -4520px 4480px 15px #8e9eba, -4765px 4835px 15px #8193b2;
}
.ground:before {
  right: 50%;
  margin-right: -166.6666666667px;
  box-shadow: 345px -255px 15px #91a1bc, 610px -590px 15px #a7b4c9, 885px -915px 15px #94a3be, 1180px -1220px 15px #b4bed1, 1505px -1495px 15px #8798b6, 1795px -1805px 15px #b7c1d3, 2145px -2055px 15px #8a9bb8, 2370px -2430px 15px #8e9eba, 2740px -2660px 15px #8a9bb8, 3050px -2950px 15px #8798b6, 3350px -3250px 15px #adb9cd, 3565px -3635px 15px #b4bed1, 3880px -3920px 15px #8496b4, 4215px -4185px 15px #8193b2, 4475px -4525px 15px #8496b4, 4810px -4790px 15px #b0bccf;
}

.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: 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);
          .........完整代码请登录后点击上方下载按钮下载查看