CSS100Day(23)-动态字体动画设计

设计简介#

关键点如下

知识点1：transform-origin 可以使用animation动画，前面学习过使用margin auto实现，这里使用该方式更科学
知识点2：突然出现可以设计为一个隐藏元素先覆盖显示元素，然后隐藏元素 scale 变0

效果展示#

Collect

not things

moments

实现代码和步骤#

HTML部分#

1
<div class="frame">
2
    <div class="circle"></div>
3
    <div class="line left"></div>
4
    <div class="line right"></div>
5
    <div class="bracket left"></div>
6
    <div class="bracket right"></div>
7
    <div class="small top">Collect</div>
8
    <div class="small bottom">not things</div>
9
    <div class="big">moments</div>
10
    <div class="hide top"></div>
11
    <div class="hide bottom"></div>
12
</div>

CSS部分#

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

11
.circle {
12
    position: absolute;
13
    z-index: 10;
14
    top: 175px;
15
    left: 175px;
16
    background: #fff;
17
    border-radius: 50%;
18
    width: 50px;
19
    height: 50px;
20
    animation: circle 1s ease-in-out forwards;
21
}
22

23
.line {
24
    position: absolute;
25
    z-index: 10;
26
    width: 150px;
27
    height: 4px;
28
    top: 198px;
29
    background: #fff;
30
    transform: scaleX(0);
31

32
    &.left {
33
        left: 50px;
34
        transform-origin: 100% 50%;
35
        animation:
36
            lines 1s ease-in-out 0.8s,
37
            line-left 1s steps(1) 0.8s;
38
    }
39

40
    &.right {
41
        right: 50px;
42
        transform-origin: 0% 50%;
43
        animation:
44
            lines 1s ease-in-out 0.8s,
45
            line-right 1s steps(1) 0.8s;
46
    }
47
}
48

49
.big {
50
    position: absolute;
51
    z-index: 5;
52
    top: 173px;
53
    width: 400px;
54
    text-align: center;
55
    font-weight: 800;
56
    font-size: 50px;
57
    color: #fff;
58
    line-height: 50px;
59
    text-transform: uppercase;
60
}
61

62
.hide {
63
    position: absolute;
64
    z-index: 7;
65
    width: 400px;
66
    height: 50px;
67
    background: #e16d6c;
68
    left: 0;
69
    animation: reveal 0.4s ease-out 1.7s;
70
    animation-fill-mode: both;
71

72
    &.top {
73
        bottom: 49%;
74
        transform-origin: 50% 0%;
75
    }
76

77
    &.bottom {
78
        top: 49%;
79
        transform-origin: 50% 100%;
80
    }
81
}
82

83
.bracket {
84
    position: absolute;
85
    z-index: 10;
86
    height: 70px;
87
    width: 4px;
88
    top: 165px;
89
    background: #fff;
90
    animation: bracket 0.4s ease-out 1.7s both;
91

92
    &::before,
93
    &::after {
94
        position: absolute;
95
        display: block;
96
        content: "";
97
        width: 25px;
98
        height: 4px;
99
        background: #fff;
100
    }
101

102
    &.left {
103
        left: 50px;
104

105
        &::before {
106
            top: 0;
107
            left: 0;
108
            transform-origin: 0% 50%;
109
            animation: bracket-line 0.2s ease-out 2.1s;
110
            animation-fill-mode: both;
111
        }
112

113
        &::after {
114
            bottom: 0;
115
            left: 0;
116
            transform-origin: 0% 50%;
117
            animation: bracket-line 0.2s ease-out 2.1s;
118
            animation-fill-mode: both;
119
        }
120
    }
121

122
    &.right {
123
        right: 50px;
124

125
        &::before {
126
            top: 0;
127
            right: 0;
128
            transform-origin: 100% 50%;
129
            animation: bracket-line 0.2s ease-out 2.1s;
130
            animation-fill-mode: both;
131
        }
132

133
        &::after {
134
            bottom: 0;
135
            right: 0;
136
            transform-origin: 100% 50%;
137
            animation: bracket-line 0.2s ease-out 2.1s;
138
            animation-fill-mode: both;
139
        }
140
    }
141
}
142

143
.small {
144
    position: absolute;
145
    z-index: 10;
146
    width: 400px;
147
    text-align: center;
148
    left: 0;
149
    font-weight: 300;
150
    font-size: 30px;
151
    color: #fff;
152
    line-height: 30px;
153
    text-transform: uppercase;
154

155
    &.top {
156
        top: 140px;
157
        animation: small-top 0.5s ease-out 2.2s both;
158
    }
159

160
    &.bottom {
161
        bottom: 140px;
162
        animation: small-bottom 0.5s ease-out 2.2s both;
163
    }
164
}
165

166
@keyframes circle {
167
    0% {
168
        scale: 1;
169
    }
170
    50% {
171
        scale: 1.2;
172
    }
173
    90%,
174
    100% {
175
        scale: 0;
176
    }
177
}
178

179
@keyframes lines {
180
    0% {
181
        transform: scaleX(0);
182
    }
183
    50% {
184
        transform: scaleX(1);
185
    }
186
    100% {
187
        transform: scaleX(0);
188
    }
189
}
190

191
@keyframes line-left {
192
    0% {
193
        transform-origin: 100% 50%;
194
    }
195
    50% {
196
        transform-origin: 0% 50%;
197
    }
198
}
199

200
@keyframes line-right {
201
    0% {
202
        transform-origin: 0% 50%;
203
    }
204
    50% {
205
        transform-origin: 100% 50%;
206
    }
207
}
208

209
@keyframes bracket {
210
    from {
211
        transform: scaleY(0);
212
    }
213
    to {
214
        transform: scaleY(1);
215
    }
216
}
217

218
@keyframes bracket-line {
219
    from {
220
        transform: scaleX(0);
221
    }
222
    to {
223
        transform: scaleX(1);
224
    }
225
}
226

227
@keyframes reveal {
228
    0% {
229
        transform: scaleY(1);
230
    }
231
    100% {
232
        transform: scaleY(0);
233
    }
234
}
235

236
@keyframes small-top {
237
    0% {
238
        opacity: 0;
239
        transform: translateX(-50px);
240
    }
241
    100% {
242
        opacity: 1;
243
        transform: translateX(0);
244
    }
245
}
246

247
@keyframes small-bottom {
248
    0% {
249
        opacity: 0;
250
        transform: translateX(50px);
251
    }
252
    100% {
253
        opacity: 1;
254
        transform: translateX(0);
255
    }
256
}
257

258
@keyframes big {
259
    from {
260
        transform: scaleY(0);
261
    }
262
    to {
263
        transform: scaleY(1);
264
    }
265
}

设计简介#

效果展示#

实现代码和步骤#

HTML部分#

CSS部分#

评论区

目录