<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS3背景模糊霓虹灯特效 - 网页模板</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
html {
background: radial-gradient(#222222, #000000);
background-attachment: fixed;
}
body {
margin: 0;
overflow: hidden;
text-align: center;
}
.container {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.light-1 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 3.15s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf63;
}
.light-2 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 3.825s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf9c40;
}
.light-3 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 1.71s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #7840bf;
}
.light-4 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 1.74s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf9c40;
}
.light-5 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 3.515s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #9640bf;
}
.light-6 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 1.675s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf4057;
}
.light-7 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 0.515s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #59bf40;
}
.light-8 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 4.855s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #407abf;
}
.light-9 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 2.435s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf54;
}
.light-10 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 1.735s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #8f40bf;
}
.light-11 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 3.695s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #87bf40;
}
.light-12 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 2.455s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #404dbf;
}
.light-13 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 4.955s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #6140bf;
}
.light-14 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 0.675s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #6140bf;
}
.light-15 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 2.955s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #4091bf;
}
.light-16 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 4.125s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40b8bf;
}
.light-17 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 2.765s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #4099bf;
}
.light-18 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 4.79s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #96bf40;
}
.light-19 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 3.195s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #61bf40;
}
.light-20 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 2.175s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #4082bf;
}
.light-21 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 4.9s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #8740bf;
}
.light-22 {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin: 30px;
background-color: rgba(255, 255, 255, 0);
opacity: 0;
animation: light 4s linear infinite;
animation-delay: 4.985s;
border-radius: 50%;
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf7d40;
}
.light-23 {
position: relative;
display: inli
