念念不忘
必有回响

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)

评论 抢沙发

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