最近发现几个不错的背景特效，分享一下
荧光边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #060c21;
}
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background: #060c21;
}
.box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
z-index: -1;
}
.box:after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
z-index: -2;
filter: blur(40px);
}
.box:before,
.box:after {
background: linear-gradient(235deg, #89ff00, #060c21, #00bcd4);
}
.content {
padding: 20px;
box-sizing: border-box;
color: #ffffff;
}
h1 {
margin: 0px;
padding: 0px;
}
h3 {
margin: 15px auto 0px;
padding: 0px;
}
p {
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h1>活着</h1>
<h3>（余华著长篇小说）</h3>
<p>《活着》是作家余华的代表作之一，讲述了在大时代背景下，随着内战、三反五反，大跃进，文化大革命等社会变革，徐福贵的人生和家庭不断经受着苦难，到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。
</p>
</div>
</div>
</body>
</html>3D文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Crimson+Text);
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
body,
html {
width: 100%;
height: 100%;
display: flex;
background: #000;
overflow: hidden;
}
#loading {
position: relative;
margin: auto;
perspective: 2000px;
transform-style: preserve-3d;
letter-spacing: -10px;
font: 18vw Righteous;
animation: fade 14s infinite;
-webkit-box-reflect: below -8vw linear-gradient(transparent 20%, rgba(255, 255, 255, 0.6));
}
#loading::before {
position: absolute;
content: "";
inset: 0;
backdrop-filter: blur(5px);
z-index: 1;
transform: translate(0, -100%);
}
span {
position: relative;
display: inline-block;
min-width: 0.6em;
text-align: center;
transform-style: preserve-3d;
letter-spacing: 0;
transform: rotateY(25deg);
animation: rotate 14s infinite ease-in-out;
color: transparent;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180815%2Ff26de16c9dfa40c1ba0bfe9ae81be3ee.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673678016&t=47dde8d78f9d5064f9a9c4764422facf);
background-clip: text;
-webkit-background-clip: text;
}
span:after,
span:before {
display: block;
position: absolute;
top: 0;
left: 0;
content: attr(class);
color: transparent;
filter: brightness(3) contrast(0.8);
z-index: -1;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180815%2Ff26de16c9dfa40c1ba0bfe9ae81be3ee.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673678016&t=47dde8d78f9d5064f9a9c4764422facf);
background-clip: text;
-webkit-background-clip: text;
background-position: 20px 20px;
}
span:before {
transform: translateZ(-20px);
}
span:after {
transform: translateZ(-10px);
background-position: 30px 30px;
}
@keyframes fade {
from {
transform: scale(1.5);
}
to {
transform: scale(1);
}
}
@keyframes rotate {
from {
transform: rotateY(50deg);
}
to {
transform: rotateY(-35deg);
}
}
</style>
</head>
<body>
<div id="loading">
<span class='2'>2</span>
<span class='0'>0</span>
<span class='2'>2</span>
<span class='3'>3</span>
</div>
</body>
</html>
