荧光边效果

最新推荐文章于 2019-07-02 18:48:00 发布

xiaoxiao涛

最新推荐文章于 2019-07-02 18:48:00 发布

阅读量596

点赞数

分类专栏：前端文章标签：荧光边框特效

本文链接：https://blog.csdn.net/qq_40571533/article/details/92856896

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

荧光边效果感觉还是很不错的！实现起来也比较简单，效果如下：
在这里插入图片描述
代码：

<!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>Gradient Border Effects</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="box">
        <div class="content">
            <h1>活着</h1>
            <h3>（余华著长篇小说）</h3>
            <p>《活着》是作家余华的代表作之一，讲述了在大时代背景下，随着内战、三反五反，大跃进，文化大革命等社会变革，徐福贵的人生和家庭不断经受着苦难，到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。
            </p>
        </div>
    </div>
</body>

</html>

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, #b700ff);
    animation: transparency 4s infinite;
    -webkit-animation: transparency 4s infinite;
}

.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;
}

@keyframes transparency
{
    0%   {opacity: 0.9;}
    10%  {opacity: 0.7;}
    20%  {opacity: 0.5;}
    30%  {opacity: 0.3;}
    40%  {opacity: 0.5;}
    50%  {opacity: 0.4;}
    60%  {opacity: 0.6;}
    70%  {opacity: 0.9;}
    85%  {opacity: 0.4;}
    90%  {opacity: 0.6;}
    100% {opacity: 1.0;}
}
 
@-webkit-keyframes transparency
{
    0%   {opacity: 0.9;}
    10%  {opacity: 0.7;}
    20%  {opacity: 0.5;}
    30%  {opacity: 0.3;}
    40%  {opacity: 0.5;}
    50%  {opacity: 0.4;}
    60%  {opacity: 0.6;}
    70%  {opacity: 0.9;}
    85%  {opacity: 0.4;}
    90%  {opacity: 0.6;}
    100% {opacity: 1.0;}
}

稍微解析一下：
body和box中都使用css3的弹性盒子布局，before伪元素中并没有设置模糊，可以说用来显示边框的，after伪元素中使用高斯模糊，用来当作荧光。
这里top、left、right和bottom都设置为-2px，表示向外扩展了2px。（top、right、bottom、left的值设置为正值时，元素向内收缩，设置为负值时，向外扩张。）这也是为什么before伪元素可以用来当作边框的原因。