404 错误页代码 svg动画实现炫酷效果4️⃣0️⃣4️⃣

福州老杨

已于 2023-07-03 10:47:19 修改

阅读量213

点赞数

文章标签： html

于 2023-06-10 11:10:18 首次发布

本文链接：https://blog.csdn.net/fzlaoyang/article/details/131139676

版权

4️⃣0️⃣4️⃣
本404页面特点描述:
纯html
无图片
svg动画效果
文件小,渲染快

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>404 酷炫纯静态svg动画 错误页 - ooyang.cn</title>

		
		<style>@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');

html,
body{
     
  margin: 0px;
  overflow: hidden;
}

div{
     
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  margin: 0px;
  background: radial-gradient(circle, #240015 0%, #12000b 100%);
  overflow: hidden;
}

.wrap{
     
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

h2{
     
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 150px;
  font-size: 32px;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  display: block;
  color: #12000a;
  font-weight: 300;
  font-family: Audiowide;
  text-shadow: 0px 0px 4px #12000a;
  animation: fadeInText 3s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}

#svgWrap_1,
#svgWrap_2{
     
  position: absolute;
  height: auto;
  width: 600px;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#svgWrap_1,
#svgWrap_2,
div{
     
  animation: hueRotate 6s ease-in-out 3s infinite;
}

#id1_1,
#id2_1,
#id3_1{
     
  stroke: #ff005d;
  stroke-width: 3px;
  fill: transparent;
  filter: url(#glow);
}

#id1_2,
#id2_2,
#id3_2{
     
  stroke: #12000a;
  stroke-width: 3px;