CSS悬浮动画

<button class="btn">悬浮动画</button>
1

 .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px 20px;
            width: 200px;
            height: 50px;
            background-color: transparent;
            border-radius: 5px;
            border: 2px solid powderblue;
            color: powderblue;
            font-weight: bold;
            transition: all 1s;
            overflow: hidden;
            &::before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0;
                left: -30px;
                top: 0;
                background-color: powderblue;
                transform: skewX(45deg);
                transition: all 1s;
                z-index: -1;
            }
            &:hover {
                color: white;
                &::before {
                    width: 180%;
                }
            }
        }
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