写在前面

最近对于中国风的配色很感兴趣，看了几种方案之后，按捺不住自己想做点东西的想法，于是就做了几个简单的国风小页面，最让我满意的就是这个404页面了，简约但不失设计感，有种妙手偶得的感觉😌。

具体展示

上效果图：

本页面还使用了一个外部字体，下载链接如下：font.chinaz.com/23032726695…

仓库地址：gitee.com/piao-chen/g…

在线演示地址（有hover效果和动画的，但是字体文件大一点，加载会慢）：piao-chen.gitee.io/guofeng-404

具体实现

首先，搭建基本的html结构：

<div class="notfound-container">
  <span>众里寻他千百度</span>
  <span>蓦然回首</span>
  <span>那人却在灯火阑珊处</span>
  <button>
    <p class="notfound-btn-p">回首</p>
  </button>
</div>

然后CSS，先初始化一下：

*{
    margin: 0;
    padding: 0;
}

html, body{
    position: relative;
    width: 100%;
    height: 100%;
}

然后定义一下变量，注册一下字体：

:root{
  --font-color-dark: rgb(66, 65, 66);
  --true-red: #d23918;
  --milk-white: #f8f7f0;
}

@font-face {
  font-family: 'GuFengSongTi';
  src: url("./font/huaguangguyunsong.ttf");
}

然后就上具体的页面上去了：

@keyframes move-up-down {
  0%, 50%, 100%{
    transform: translateY(0);
  }
  25%{
    transform: translateY(-3px);
  }
  75%{
    transform: translateY(3px);
  }
}

.notfound-container{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--milk-white);
}

.notfound-container span{
  position: absolute;
  display: inline-block;
  width: 3vw;
  font-size: 3vw;
  color: var(--font-color-dark);
  font-weight: 700;
  font-family: 'GuFengSongTi';
  user-select: none;
}

.notfound-container span:nth-child(1){
  left: 35%;
  top: 5%;
  animation: move-up-down 6s linear 0s infinite;
}

.notfound-container span:nth-child(2){
  left: 45%;
  top: 15%;
  animation: move-up-down 6s linear .5s infinite;
}

.notfound-container span:nth-child(3){
  left: 55%;
  top: 10%;
  animation: move-up-down 6s linear 1s infinite;
}

.notfound-container button{
  position: absolute;
  left: 65%;
  top: 80%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  cursor: pointer;
  border: 3px double var(--true-red);
  outline: none;
  font-family: 'GuFengSongTi';
  font-size: 3vh;
  background-color: transparent;
  transition: all .3s;
}

.notfound-btn-p{
  display: inline-block;
  width: 3vh;
  color: var(--true-red);
}

.notfound-container button:hover{
  box-shadow: 0px 0px 5px 2px var(--true-red);
}

大小距离之类的大家可以根据自己的情况进行调整，大体上展示效果就是这样的，其实，最加分的其实是那个字体，免费用的。当然，我这个不是商用，是个人学习分享用的!