当青训营遇上码上掘金

青训营-我的名片|[青训营-码上掘金]

先上一个效果预览图：

可以看到主题部分是一个方框，然后我们做了圆角处理，并且在边框上面有一个流水灯的效果，然后在方框正中间，我们写上自己的一些信息。

1. 代码实现

首先我们来实现一个方框，这里我们设置方框的宽高的方式是利用padding来实现的，我们先给整个body设置宽高为100vh,和100vw,然后我们给这个盒子设置一个padding，这样我们就可以的到一个盒子。

body{
    /* 居中 */
    display:flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* min-height: 100vh; */
    width: 100vw;
    height: 100vh;
    background-color: #000;

    
}
.main{
    overflow: hidden;
    padding: 30vmin 20vmin;
    background-color: rgb(10, 3, 16);
    /* 文字居中 */
    text-align: center;
    /* 文字字体 */
    font-size: 2vmin;
    color:#0FF;
    /* 圆角边框 */
    border-radius:5vmin;
    z-index: 0;
    position: relative;
}

在上面的代码中，我们通过flex布局，将盒子垂直居中，并且在背景设置了一个颜色，我们顺便设置了一下文字的位置，大小等等。并且通过border-radius设置了圆角，这样使得方框看起来更加圆润。

边框厚度的实现

这个时候我们并不能看到边框，这是为什么呢，因为我们没有设置边框的宽度，通常我们通过border来设置边框的一些参数，但是我们这里不使用这个方法，因为我们需要的是一个流水灯的效果，所以我们需要一个动态的边框，这个时候我们就需要用到伪元素了。

首先就是before伪元素，我们通过这个一个伪元素，制造出一个很大的盒子，然后将这个盒子的颜色改为一种射灯状的状态，我们可以通过background-image: conic-gradient(transparent,#0FF,transparent 40%);来实现这个射灯状的效果，然后我们再设置一个动画，让这个盒子在中心旋转起来，这样就可以实现一个流水灯的效果了。

.main::before{
    content: "";
    width: 200%;
    height: 200%;
    background-color: rgb(48, 48, 48);
    z-index: -2;
    position: absolute;
    left: -50%;
    top: -50%;
    background-image: conic-gradient(transparent,#0FF,transparent 40%);
    animation: rotate 5s linear infinite;
}
@keyframes rotate {
    100%{transform:rotate(360deg);}
}

遮住大盒子多与的部分

在现在我们的效果中，前面伪元素的盒子太大了，此时我们需要将多余的部分遮住，这个时候我们就需要用到after伪元素了，我们通过这个伪元素，将多余的部分遮住。

.main::after{
    content: "";
    /* width: 18vmin;
    height: 28vmin; */
    inset: 1vmin;
    background-color: #000;
    border-radius: 4vmin;
    position: absolute;
    z-index:-1;
}

可以看到我们在我们给这两个伪元素设置了一个z-index,这是为了防止层级错误，导致效果不能实现。

2.总结

通过这个小案例，我们可以学习到一些css的新知识，比如伪元素，伪类，以及一些新的css属性，比如conic-gradient，以及一些新的css单位，比如vmin，vmax等等。