原视频地址,原视频为演示视频没有讲解
思维启发:如何能给我们的盒子点添加一个方便操作的边框?把它放在一个更大的蒙板上面,蒙板漏出的部分不就可以作为边框吗,而且我们对这个边框的操作会更丰富更简单。
如何制作一个边框发光效果
首先我们制作一个盒子,并使用before和after创建两个蒙板,利用图层调整到页面下方,将盒子背景和body背景调暗,此时我们获得了一个白色边框
将第二块蒙板利用滤镜模糊化,将字体颜色改为白色,此时这个页面呈现中央发光效果
给两个蒙板添加三色颜色渐变,中间色与背景色相同,随着颜色渐变中间部分隐入背景,形成边缘发光效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body
{
margin: 0;
padding: 0;
display: flex;
justify-content:center;
align-items:center;
min-height:100vh;
background: #060c21;
font-family: 'Poppins', sans-serif;
}
.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: #FFFFFF;
z-index: -1;/*元素堆叠顺序*/
}
/*另一个溢出的盒子,模糊形成光晕效果*/
.box::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #FFFFFF;
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: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h1>黑洞</h1>
<p>
黑洞是现代广义相对论中,宇宙空间内存在的一种天体。黑洞的引力很大,使得视界内的逃逸速度大于光速。
“黑洞是时空曲率大到光都无法从其事件视界逃脱的天体”。
如果将大量物质集中于空间一点,其周围会产生奇异的现象,即在质点周围存在一个界面——“视界”一旦进入这个界面,
即使光也无法逃脱。这种“不可思议的天体”被美国物理学家约翰·阿奇博尔德·惠勒命名为“黑洞”。
</p>
</div>
</div>
</body>
</html>