渐变边框+边框旋转动画，HTML/Vue代码在线实时编辑、预览

            
                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

            
            body {
    height: 100vh;
    background: #223;
    display: grid;
    place-items: center;
}
.box {
    --border-size: 3px;
    --border-angle: 0turn;
    width: 60vmin;
    height: 50vmin;
    background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
    background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: bg-spin 3s linear infinite;
}
@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}
.box:hover {
    animation-play-state: paused;
}
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}