大雾弥散动态特效404单页源码

原创

已于 2025-03-14 18:18:34 修改 · 1.1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #开发语言

于 2024-07-17 05:42:13 首次发布

源码介绍

大雾弥散动态特效404单页源码，跟随鼠标反向移动，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML里面，然后上传到服务器里面，设置好重定向即可

效果预览

在这里插入图片描述

完整源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>404 Fog Fissipates</title>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,700,900"/>
		<style>html,
body {
     
     
  height: 100%;
  background: linear-gradient(0, #202239, #8595AC);
}

::selection {
     
     
  background: #CDD4DE;
}

/*--------------------
Page
--------------------*/
.page {
     
     
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  z-index: 1;
  font-family: Roboto, sans-serif;
  background: #0D0C1E;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/*--------------------
Header
--------------------*/
header {
     
     
  padding: 30px;
}
header .logo {
     
     
  margin: 0 auto;
  text-align: center;
  margin-bottom: -17px;
}
header .logo svg {
     
     
  width: 61px;
  height: 14px;
}
header nav {
     
     
  cursor: pointer;
  width: 18px;
  height: 18px;
  position