六边形动态特效404单页HTML源码

原创

已于 2025-03-17 21:16:01 修改 · 1.3k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2024-07-17 05:47:33 首次发布

源码介绍

六边形动态特效404单页HTML源码，旁边404文字以及跳转按钮，整体看着像科技二次元画风，页面简约美观，可以做网站错误页或者丢失页面

效果预览

在这里插入图片描述

完整源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Saransh Sinha 404</title>
		<style>body {
     
     
  background-color: #2F3242;
}
svg {
     
     
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -400px;
}
.message-box {
     
     
  height: 200px;
  width: 380px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: 50px;
  color: #FFF;
  font-family: Roboto;
  font-weight: 300;
}
.message-box h1 {
     
     
  font-size: 60px;
  line-height: 46px;
  margin-bottom: 40px;
}
.buttons-con .action-link-wrap {
     
     
  margin-top: 40px;
}
.buttons-con .action-link-wrap a {
     
     
  background: #68c950;
  padding: 8px 25px;
  border-radius