CSS100Day(24)-一个按钮动画

1
.frame {
2
    width: 400px;
3
    height: 400px;
4
    color: #fff;
5
    background: #57d895;
6
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
7
    position: relative;
8
}
9

10
.hidden {
11
    display: none;
12
}
13

14
.button {
15
    position: absolute;
16
    box-sizing: border-box;
17
    display: block;
18
    width: 260px;
19
    height: 60px;
20
    top: 170px;
21
    left: 70px;
22
    border-radius: 30px;
23
    border: 2px solid #fff;
24
    text-align: center;
25
    line-height: 56px;
26
    font-size: 20px;
27
    font-weight: 700;
28
    letter-spacing: 2px;
29
    cursor: pointer;
30
    text-transform: uppercase;
31
    transition: all 0.3s ease-in-out;
32

33
    &:hover {
34
        background: #37be77;
35
    }
36

37
    img {
38
        position: absolute;
39
        top: 16px;
40
        left: 15px;
41
        opacity: 0;
42
        z-index: 2;
43
    }
44
}
45

46
.circle {
47
    position: absolute;
48
    width: 60px;
49
    height: 60px;
50
    z-index: 2;
51
    top: 170px;
52
    left: 170px;
53
    fill: none;
54
    stroke: #fff;
55
    stroke-width: 2px;
56
    stroke-linecap: round;
57
    stroke-dasharray: 183 183;
58
    stroke-dashoffset: 183;
59
    pointer-events: none;
60
    transform: rotate(-90deg);
61
}
62

63
input:checked {
64
    & ~ .button {
65
        animation:
66
            button 0.5s ease both,
67
            fill 0.5s ease-out 1.5s forwards;
68

69
        img {
70
            animation: check 0.5s ease-out 1.5s both;
71
        }
72
    }
73

74
    & ~ .circle {
75
        animation: circle 2s ease-out 0.5s both;
76
    }
77
}
78

79
@keyframes button {
80
    0% {
81
        width: 260px;
82
        left: 70px;
83
        border-color: #fff;
84
        color: #fff;
85
    }
86
    50% {
87
        color: transparent;
88
    }
89
    100% {
90
        width: 60px;
91
        left: 170px;
92
        border-color: #45b078;
93
        background: transparent;
94
        color: transparent;
95
    }
96
}
97

98
@keyframes fill {
99
    0% {
100
        background: transparent;
101
        border-color: #fff;
102
    }
103
    100% {
104
        background: #fff;
105
    }
106
}
107

108
@keyframes check {
109
    0% {
110
        opacity: 0;
111
    }
112
    100% {
113
        opacity: 1;
114
    }
115
}
116

117
@keyframes circle {
118
    0% {
119
        stroke-dashoffset: 183;
120
    }
121
    50% {
122
        stroke-dashoffset: 0;
123
        stroke-dasharray: 183;
124
        opacity: 1;
125
        transform: rotate(-90deg) scale(1);
126
    }
127
    100% {
128
        opacity: 0;
129
        transform: rotate(-90deg) scale(2);
130
        stroke-dashoffset: 0;
131
    }
132
}