CSS100Day(20)-发送邮件惊艳动画无JS

1
<div class="frame">
2
    <input type="checkbox" id="cb" />
3
    <label for="cb" class="button">发送邮件</label>
4
    <label for="cb" class="button reset">重置</label>
5
    <div class="circle"></div>
6
    <div class="circle-outer"></div>
7
    <svg class="icon mail">
8
        <polyline points="119,1 119,69 1,69 1,1"></polyline>
9
        <polyline points="119,1 60,45 1,1 119,1"></polyline>
10
    </svg>
11
    <svg class="icon plane">
12
        <polyline points="119,1 1,59 106,80 119,1"></polyline>
13
        <polyline points="119,1 40,67 43,105 69,73"></polyline>
14
    </svg>
15
</div>

1
.frame {
2
    width: 400px;
3
    height: 400px;
4
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
5
    border-radius: 2px;
6
    background: #2c3e50;
7
    overflow: hidden;
8
    position: relative;
9
}
10
.circle {
11
    position: absolute;
12
    background: #354a5f;
13
    border-radius: 50%;
14
    width: 200px;
15
    height: 200px;
16
    top: 65px;
17
    left: 100px;
18
}
19
.circle-outer {
20
    position: absolute;
21
    box-sizing: border-box;
22
    background: none;
23
    border: 4px solid #354a5f;
24
    border-radius: 50%;
25
    width: 200px;
26
    height: 200px;
27
    top: 65px;
28
    left: 100px;
29
}
30
.icon {
31
    position: absolute;
32
    z-index: 2;
33
    top: 130px;
34
    left: 140px;
35
    transform: translate3d(0, 0, 0);
36
    fill: none;
37
    stroke-width: 2px;
38
    stroke: #ecf0f1;
39
    stroke-linecap: square;
40
    stroke-dasharray: 325 325;
41
    &.mail {
42
        width: 120px;
43
        height: 70px;
44
        stroke-dashoffset: 0;
45
    }
46
    &.plane {
47
        width: 120px;
48
        height: 110px;
49
        stroke-dashoffset: 325;
50
    }
51
}
52
#cb {
53
    display: none;
54
}
55
.button {
56
    position: absolute;
57
    z-index: 10;
58
    top: 290px;
59
    left: 100px;
60
    background: #ecf0f1;
61
    color: #2c3e50;
62
    width: 200px;
63
    height: 40px;
64
    border-radius: 20px;
65
    text-align: center;
66
    line-height: 40px;
67
    cursor: pointer;
68
    transition: all 0.3s ease;
69
    font-weight: 700;
70
    &.reset {
71
        opacity: 0;
72
        z-index: 5;
73
    }
74
    &:hover {
75
        background: #1abc9c;
76
        color: #fff;
77
    }
78
}
79
#cb:checked ~ .button {
80
    animation: button 1.5s ease-in-out 1.7s;
81
    animation-fill-mode: both;
82
}
83
#cb:checked ~ .reset {
84
    animation: reset 1s ease-in-out 3.7s;
85
    animation-fill-mode: both;
86
}
87
#cb:checked ~ .mail {
88
    transition: stroke-dashoffset 1s ease-in-out;
89
    stroke-dashoffset: 325;
90
}
91
#cb:checked ~ .plane {
92
    transition: stroke-dashoffset 1s ease-in-out 0.6s;
93
    stroke-dashoffset: 0;
94
    animation: fly 2.4s ease-in-out;
95
    animation-fill-mode: both;
96
}
97
#cb:checked ~ .circle {
98
    animation: circle 1s ease-in-out;
99
    animation-fill-mode: both;
100
}
101
#cb:checked ~ .circle-outer {
102
    animation: circle 0.8s ease-in-out 0.2s;
103
    animation-fill-mode: both;
104
}
105
@keyframes button {
106
    0% {
107
        transform: scale(1);
108
    }
109
    30% {
110
        background: #1abc9c;
111
        color: transparent;
112
        width: 200px;
113
        left: 100px;
114
    }
115
    50%,
116
    60% {
117
        width: 40px;
118
        left: 180px;
119
        transform: scale(1);
120
    }
121
    70% {
122
        transform: scale(1.1);
123
    }
124
    100% {
125
        width: 40px;
126
        left: 180px;
127
        background: #1abc9c;
128
        color: transparent;
129
        transform: scale(0);
130
    }
131
}
132
@keyframes reset {
133
    from {
134
        opacity: 0;
135
    }
136
    to {
137
        opacity: 1;
138
    }
139
}
140
@keyframes fly {
141
    0%,
142
    50% {
143
        transform: translate3d(0, 0, 0) scale(1);
144
    }
145
    60% {
146
        transform: translate3d(-10px, 5px, 0) scale(1.05);
147
    }
148
    70% {
149
        opacity: 1;
150
    }
151
    85% {
152
        opacity: 0;
153
    }
154
    100% {
155
        transform: translate3d(300px, -150px, 0) scale(0.5);
156
        opacity: 0;
157
    }
158
}
159
@keyframes circle {
160
    0% {
161
        transform: translate3d(0, 0, 0) scale(1);
162
    }
163
    20% {
164
        transform: scale(1.1);
165
    }
166
    100% {
167
        transform: scale(0);
168
    }
169
}