分享一款纯css3+JS实现的漂亮的404页面

最新推荐文章于 2022-06-08 16:09:50 发布

@Ma

最新推荐文章于 2022-06-08 16:09:50 发布

阅读量1.3k

点赞数 1

分类专栏：源码文章标签： html

本文链接：https://blog.csdn.net/youeyeb/article/details/105130479

版权

本文介绍了一款使用纯css3和JS实现的404页面，该页面通过代码生成雪花效果，不依赖任何图片资源。感兴趣的读者可以查看详细代码进行学习。

摘要由CSDN通过智能技术生成

摘要：分享一款纯css3+JS实现的漂亮的404页面，无需加载任何图片，纯代码实现雪花渲染，有详细的代码提供大家学习，感兴趣的朋友可以参考下…
分享一款纯css3+JS实现的漂亮的404页面，无需加载任何图片，纯代码实现雪花渲染，一起看下最终效果图：在这里插入图片描述

<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>404页面</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 10p