念念不忘
必有回响

B站网页特效学习 — 荧光边框

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome -->
<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

荧光边框 演示:demo

<!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 {
				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的伪元素添加一个面积比box略大的矩形,并通过改变层叠次序,置于box的下层,达到给box设置边框的效果 */
			.box::before {
				content: '';
				position: absolute;
				top: -2px;
				left: -2px;
				right: -2px;
				bottom: -2px;
				background: #fff;
				z-index: -1;
			}
			/* 于上面类似,做一个面积比box略大的矩形,并通过改变层叠次序,置于box的下层,达到给box设置边框的效果 */
			.box::after {
				content: '';
				position: absolute;
				top: -2px;
				left: -2px;
				right: -2px;
				bottom: -2px;
				background: #fff;
				z-index: -2;
				/* 滤镜属性  给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起,所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。 */
				filter: blur(40px);
			}
			.box::before,
			.box::after {
				/* linear-gradient() 函数用于创建一个线性渐变的 "图像"。 参数1:用角度值指定渐变的方向(或角度)  12点钟方向为0deg*/
				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>Glowing Border</h1>
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis nihil eius laborum vero dolores
					perspiciatis adipisci laboriosam ipsum, quis, dolore aliquam quia, expedita repellendus! Dicta
					doloribus quibusdam veritatis fugit maiores?
				</p>
			</div>
		</div>
	</body>
</html>

效果图:

赞(1) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 荧光边框
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址