闪烁的霓虹灯设计404页面代码

浏览：606次- 评论：1次- 发布时间：2020-11-14

Html

Css







很抱歉，您访问的页面找不到了

返回首页

html,body {
	margin:0px;
	overflow:hidden;
}
.dwo {
	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:50px;
	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;
}
.dwo-home {
	position:absolute;
	top:60%;
	left:50%;
	margin-top:100px;
	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:40%;
	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;
	fill:transparent;
	filter:url(#glow);
}
#id3_1 {
	stroke-dasharray:940px;
	stroke-dashoffset:-940px;
	animation:drawLine3 2.5s ease-in-out 0s forwards,flicker3 4s linear 4s infinite;
}
#id2_1 {
	stroke-dasharray:735px;
	stroke-dashoffset:-735px;
	animation:drawLine2 2.5s ease-in-out 0.5s forwards,flicker2 4s linear 4.5s infinite;
}
#id1_1 {
	stroke-dasharray:940px;
	stroke-dashoffset:-940px;
	animation:drawLine1 2.5s ease-in-out 1s forwards,flicker1 4s linear 5s infinite;
}
@keyframes drawLine1 {
	0% {
	stroke-dashoffset:-940px;
}
100% {
	stroke-dashoffset:0px;
}
}@keyframes drawLine2 {
	0% {
	stroke-dashoffset:-735px;
}
100% {
	stroke-dashoffset:0px;
}
}@keyframes drawLine3 {
	0% {
	stroke-dashoffset:-940px;
}
100% {
	stroke-dashoffset:0px;
}
}@keyframes flicker1 {
	0% {
	stroke:#ff005d;
}
1% {
	stroke:transparent;
}
3% {
	stroke:transparent;
}
4% {
	stroke:#ff005d;
}
6% {
	stroke:#ff005d;
}
7% {
	stroke:transparent;
}
13% {
	stroke:transparent;
}
14% {
	stroke:#ff005d;
}
100% {
	stroke:#ff005d;
}
}@keyframes flicker2 {
	0% {
	stroke:#ff005d;
}
50% {
	stroke:#ff005d;
}
51% {
	stroke:transparent;
}
61% {
	stroke:transparent;
}
62% {
	stroke:#ff005d;
}
100% {
	stroke:#ff005d;
}
}@keyframes flicker3 {
	0% {
	stroke:#ff005d;
}
1% {
	stroke:transparent;
}
10% {
	stroke:transparent;
}
11% {
	stroke:#ff005d;
}
40% {
	stroke:#ff005d;
}
41% {
	stroke:transparent;
}
45% {
	stroke:transparent;
}
46% {
	stroke:#ff005d;
}
100% {
	stroke:#ff005d;
}
}@keyframes flicker4 {
	0% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
30% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
31% {
	color:#12000a;
	text-shadow:0px 0px 4px #12000a;
}
32% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
36% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
37% {
	color:#12000a;
	text-shadow:0px 0px 4px #12000a;
}
41% {
	color:#12000a;
	text-shadow:0px 0px 4px #12000a;
}
42% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
85% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
86% {
	color:#12000a;
	text-shadow:0px 0px 4px #12000a;
}
95% {
	color:#12000a;
	text-shadow:0px 0px 4px #12000a;
}
96% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
100% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
}@keyframes fadeInText {
	1% {
	color:#12000a;
	text-shadow:0px 0px 4px #12000a;
}
70% {
	color:#ff005d;
	text-shadow:0px 0px 14px #ff005d;
}
100% {
	color:#ff005d;
	text-shadow:0px 0px 4px #ff005d;
}
}@keyframes hueRotate {
	0% {
	filter:hue-rotate(0deg);
}
50% {
	filter:hue-rotate(-120deg);
}
100% {
	filter:hue-rotate(0deg);
}
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：纯css制作404页面代码

讨论这个常用代码（1）回答他人问题或分享心得会奖励牛币

Lv3 码奴

sc***ui

2022年05月06日

这个感觉还不错啊

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取