CSS动画发光按钮，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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

            
            $green: #58DD93;

:root {
  --size-default: 22px;
  --size-sm: 16px;
  --color-green: #{$green};
  --color-black: #000;
}

@property --angle {
  syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --glowColor {
  syntax: "<color>";
    initial-value: #58DD93;
}

@keyframes rotate {
  0% { --angle: 0deg; --glowColor: var(--color-green);}
  100% { --angle: 360deg; --glowColor: var(--color-green);}
}

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  background: 
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        var(--color-black) 100%
      ),
      radial-gradient(
        circle at 50% -50%,
        #335F4B 0%,
        var(--color-black) 100%
      );
  font-family: monospace;
  font-size: 20px;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: none;
  background: none;
  position: relative;
  padding: 1px;
  text-decoration: none;
  transition: all .18s ease-in-out;
  transform: translate3d(0,0,0);

  &:after, &:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(100px + 1.5px);
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: conic-gradient(
      from var(--angle) at 50% 50%, 
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 33%,
      var(--glowColor) 50%,
      rgba(0,0,0,0) 66%,
      rgba(0,0,0,0) 100%);
    animation: rotate 2s infinite linear;
  }
  
  &:before {
    animation: rotate 2s infinite linear;
    filter: blur(20px);
  }

  .btnInner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--size-sm) var(--size-default);
    border-radius: 100px;
    color: var(--color-green);
    font-weight: 500;
    font-size: 22px;
    z-index: 1;
    transition: all .18s ease;
    background: rgba(#000,.3);
    backdrop-filter: blur(40px);
    backface-visibility: hidden;
  }
  
  &:hover {
    .btnInner  {
      background: rgba($green,.1);
      color: lighten($green,20%);  
    }
  }
  &:active {
    transform: scale(0.95);
  }
}
编辑器加载中