質問編集履歴

1

テンプレートを使用して再度投稿いたします。

2019/06/20 02:24

投稿

nre
nre

スコア35

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,431 @@
1
+ ### 前提・実現したいこと
2
+
1
- cssのアニメーションをフレームワークFlaskで開発したwebアプリケーションの下部に配置したいですが、
3
+ フレームワークFlaskで開発したwebアプリケーションの中央下部(スマホ、PC共)にcssアニメーションを
4
+
2
-
5
+ 表示したいです。
6
+
7
+
8
+
9
+ ### 発生している問題・エラーメッセージ
10
+
11
+
12
+
13
+ ```
14
+
3
- スマホ、pc共に画面中央に表示されてしまいます。
15
+ スマホ表示PC表示共に画面中央に配置されてしまいます。
16
+
4
-
17
+ ```
18
+
19
+
20
+
21
+ ### 該当のソースコード
22
+
23
+
24
+
25
+ ```html
26
+
27
+ <!DOCTYPE html>
28
+
29
+ <html lang="ja">
30
+
31
+ <head>
32
+
33
+ <meta charset="utf-8">
34
+
35
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
36
+
37
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
38
+
39
+ <script src="{{url_for('static', filename='index.js')}}"></script>
40
+
41
+ <title>商品を入力して下さい</title>
42
+
43
+ <meta name="viewport" content="width=device-width,initial-scale=1">
44
+
45
+ </head>
46
+
47
+ <body>
48
+
49
+
50
+
51
+
52
+
53
+
54
+
55
+ <form method="get" action="/output">
56
+
57
+ <input type="text" name="name" style="width:350px;"
58
+
59
+ class='sample' placeholder="商品を入力して下さい">
60
+
61
+ </form>
62
+
63
+ <div id="loader">
64
+
65
+ <div class="dot"></div>
66
+
67
+ <div class="dot"></div>
68
+
69
+ <div class="dot"></div>
70
+
71
+ Searching…Now
72
+
73
+ </div>
74
+
75
+
76
+
77
+ <script>
78
+
79
+ $(function(){
80
+
81
+ $('#loader').hide();
82
+
83
+ $('form').on('submit',function(){
84
+
85
+ $('#loader').fadeIn();
86
+
87
+
88
+
89
+ });
90
+
91
+ });
92
+
93
+ </script>
94
+
95
+
96
+
97
+ <style>
98
+
99
+ @import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
100
+
101
+ body {
102
+
103
+ background-color: white;
104
+
105
+ font-family: 'Righteous', cursive;
106
+
107
+ text-align: center
108
+
109
+ }
110
+
111
+ </style>
112
+
113
+
114
+
115
+
116
+
117
+ </body>
118
+
119
+ </html>
120
+
121
+
122
+
123
+ #コードは省略しました。
124
+
125
+ ```
126
+
127
+ ### 該当のソースコード
128
+
129
+
130
+
131
+ ```css
132
+
133
+ body {
134
+
135
+ text-align: center;
136
+
137
+ background-color: #eee;
138
+
139
+
140
+
141
+ overflow: hidden;
142
+
143
+ }
144
+
145
+
146
+
147
+ * {
148
+
149
+ -webkit-box-sizing: border-box;
150
+
151
+ -moz-box-sizing: border-box;
152
+
153
+ box-sizing: border-box;
154
+
155
+ }
156
+
157
+
158
+
159
+
160
+
161
+ /* The loader container */
162
+
163
+ .loader {
164
+
165
+ position: absolute;
166
+
167
+ top: 50%;
168
+
169
+ left: 50%;
170
+
171
+
172
+
173
+ width: 200px;
174
+
175
+ height: 200px;
176
+
177
+
178
+
179
+ margin-top: -100px;
180
+
181
+ margin-left: -100px;
182
+
183
+
184
+
185
+ perspective: 200px;
186
+
187
+ transform-type: preserve-3d;
188
+
189
+ }
190
+
191
+
192
+
193
+
194
+
195
+ /* The dot */
196
+
197
+ .dot {
198
+
199
+ position: absolute;
200
+
201
+ top: 50%;
202
+
203
+ left: 50%;
204
+
205
+
206
+
207
+ width: 120px;
208
+
209
+ height: 120px;
210
+
211
+
212
+
213
+ margin-top: -60px;
214
+
215
+ margin-left: -60px;
216
+
217
+
218
+
219
+ border-radius: 100px;
220
+
221
+ border: 40px outset #1e3f57;
222
+
223
+
224
+
225
+ transform-type: preserve-3d;
226
+
227
+ transform-origin: 50% 50%;
228
+
229
+
230
+
231
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
232
+
233
+
234
+
235
+ background-color: transparent;
236
+
237
+
238
+
239
+ animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
240
+
241
+ }
242
+
243
+
244
+
245
+ .dot:nth-child(2) {
246
+
247
+ width: 140px;
248
+
249
+ height: 140px;
250
+
251
+
252
+
253
+ margin-top: -70px;
254
+
255
+ margin-left: -70px;
256
+
257
+
258
+
259
+ border-width: 30px;
260
+
261
+ border-color: #447891;
262
+
263
+
264
+
265
+ animation-name: dot2;
266
+
267
+ animation-delay: 75ms;
268
+
269
+
270
+
271
+ box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
272
+
273
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
274
+
275
+ }
276
+
277
+
278
+
279
+ .dot:nth-child(3) {
280
+
281
+ width: 160px;
282
+
283
+ height: 160px;
284
+
285
+
286
+
287
+ margin-top: -80px;
288
+
289
+ margin-left: -80px;
290
+
291
+
292
+
293
+ border-width: 20px;
294
+
295
+ border-color: #6bb2cd;
296
+
297
+
298
+
299
+ animation-name: dot3;
300
+
301
+ animation-delay: 150ms;
302
+
303
+
304
+
305
+ box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
306
+
307
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
308
+
309
+ }
310
+
311
+
312
+
313
+ @keyframes dot1 {
314
+
315
+ 0% {
316
+
317
+ border-color: #1e3f57;
318
+
319
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
320
+
321
+ }
322
+
323
+ 50% {
324
+
325
+ border-color: #1e574f;
326
+
327
+ transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
328
+
329
+ }
330
+
331
+ 100% {
332
+
333
+ border-color: #1e3f57;
334
+
335
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
336
+
337
+ }
338
+
339
+ }
340
+
341
+
342
+
343
+ @keyframes dot2 {
344
+
345
+ 0% {
346
+
347
+ border-color: #447891;
348
+
349
+ box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
350
+
351
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
352
+
353
+ }
354
+
355
+ 50% {
356
+
357
+ border-color: #449180;
358
+
359
+ box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
360
+
361
+ transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
362
+
363
+ }
364
+
365
+ 100% {
366
+
367
+ border-color: #447891;
368
+
369
+ box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
370
+
371
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
372
+
373
+ }
374
+
375
+ }
376
+
377
+
378
+
379
+ @keyframes dot3 {
380
+
381
+ 0% {
382
+
383
+ border-color: #6bb2cd;
384
+
385
+ box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
386
+
387
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
388
+
389
+ }
390
+
391
+ 50% {
392
+
393
+ border-color: #6bcdb2;
394
+
395
+ box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
396
+
397
+ transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
398
+
399
+ }
400
+
401
+ 100% {
402
+
403
+ border-color: #6bb2cd;
404
+
405
+ box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
406
+
407
+ transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
408
+
409
+ }
410
+
411
+ }
412
+
413
+ ```
414
+
415
+
416
+
417
+ ### 試したこと
418
+
419
+ topやleftなどの位置情報と思われる数値を変更してみましたが、
420
+
421
+ アニメーションを崩れるだけでした。
422
+
423
+
424
+
425
+ ### 補足情報(FW/ツールのバージョンなど)
426
+
427
+ cssアニメーションはサイトからコピペするだけで導入出来るという物となっております。
428
+
5
- 表示部分を中央ではなく画面下部に表示出来様にしたいです。
429
+ 下記サイト上から4つ目に表示されサークル状のアニメーションです。
430
+
431
+ http://photoshopvip.net/95239