1
2
3
4
<div class="item" info="彩虹边框">
  <div></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

div.item div{ 
    --borderWidth: 12px;
    --bRadius: 5px;
    width: 60%;
    height: 60%;
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 2rem;
    z-index: 0;
    border-radius: --bRadius;

    &::after, &::before {
        box-sizing: border-box;
    }

    &::before {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        z-index: -2;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
        animation: rotate 4s linear infinite;
        @keyframes rotate {
            100% {
                transform: rotate(1turn);
            }
        }
    }
    &::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: calc(var(--borderWidth) / 2);
		top: calc(var(--borderWidth) / 2);
		width: calc(100% - var(--borderWidth));
		height: calc(100% - var(--borderWidth));
		background: white;
		border-radius: --bRadius;
        /*  这一行是为了方便查看原来的样子的 */
		animation: opacityChange 3s infinite alternate;
	}
    @keyframes opacityChange {
        50% {
            opacity:1;
        }
        100% {
            opacity: .5;
        }
    }
}

1
2
3
4
5
6
<div class="item" info="质感边框">
  <div></div>
</div>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

@keyframes opacityChange {
    50% {
        opacity:.5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}
div.item {
    background-color: #000;
    padding: 20px;
    div{ 
        --borderWidth: 12px;
        --bRadius: 10px;
        width: 60%;
        height: 60%;
        position: relative;
        z-index: 0;
        overflow: hidden;
        padding: 2rem;
        z-index: 0;
        border-radius: --bRadius;
        &::after, &::before {
            box-sizing: border-box;
        }
        &::before {
            content: '';
            position: absolute;
            z-index: -2;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            background-color: #1a232a;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
            animation: rotate 4s linear infinite;
        }
	
        &::after {
            content: '';
            position: absolute;
            z-index: -1;
            left: calc(var(--borderWidth) / 2);
            top: calc(var(--borderWidth) / 2);
            width: calc(100% - var(--borderWidth));
            height: calc(100% - var(--borderWidth));
            background: #000;
            border-radius: 5px;
            /* 这句效果打开有助于理解动画 */
            /*animation: opacityChange 5s infinite linear;*/
        }
        
    }
}

div.item:nth-child(9) div::after {
    animation: opacityChange 5s infinite linear;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


div.item {
    --bRadius: 10px;
    div{
        position: relative;
        text-align: center;
        font-size: 24px;
        border: 2px solid rgb(179, 191, 231);
        border-radius: var(--bRadius);
        transition: all .3s;
        background-color: #eee;
        &::before, &::after {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid rgb(17, 36, 100);
            transition: all .5s;
            border-radius: var(--bRadius);
            animation: clippath 3s infinite linear;
        }
        &::after {
            animation: clippath 3s infinite -1.5s linear;
        }
        @keyframes clippath {
            0%, 100% { clip-path: inset(0 0 98% 0); }
            25% { clip-path: inset(0 98% 0 0); }
            50% { clip-path: inset(98% 0 0 0); }
            75% { clip-path: inset(0 0 0 98%); }
        }

    }
}