-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmovie.html
More file actions
3224 lines (2947 loc) · 200 KB
/
Copy pathmovie.html
File metadata and controls
3224 lines (2947 loc) · 200 KB
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movie</title>
<style>
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
}
body {
width: 100vw;
height: 100vh;
display: flex;
position: relative;
background-color: #348274;
transition: background-color 0.7s ease;
overflow: hidden;
}
a{
z-index: 999;
color: white;
text-decoration: none;
}
a:hover{
z-index: 999;
color: white;
text-decoration: none;
scale: 1.5 !important;
transition: all 0.3s ease-in-out;
}
#up-btn {
position: absolute;
left: 31%;
top: 1%;
font-size:70px;
}
#down-btn {
position: absolute;
left: 31%;
bottom: 3%;
font-size:70px;
}
#p1-btn {
position: absolute;
left: 2.5%;
top: 17%;
font-size:35px;
}
#p2-btn {
position: absolute;
left: 2.5%;
top: 24%;
font-size:35px;
}
#p3-btn {
position: absolute;
left: 2.5%;
top: 31%;
font-size:35px;
}
#p4-btn {
position: absolute;
left: 2.5%;
top: 38%;
font-size:35px;
}
#p5-btn {
position: absolute;
left: 2.5%;
top:45%;
font-size:35px;
}
#p6-btn {
position: absolute;
left: 2.5%;
top: 52%;
font-size:35px;
}
#p7-btn {
position: absolute;
left: 2.5%;
top:59%;
font-size:35px;
}
#p8-btn {
position: absolute;
left: 2.5%;
top: 66%;
font-size:35px;
}
#p9-btn {
position: absolute;
left: 2.5%;
top: 73%;
font-size:35px;
}
#p10-btn {
position: absolute;
left: 2.5%;
top: 80%;
font-size:35px;
}
#content1 {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.img1 {
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
filter: grayscale(1);
opacity: 0.3;
object-fit: cover;
flex-direction: column;
justify-content: center;
transition: transform .8s ease-in-out;
}
#content {
width: 47%;
height: 100%;
position: absolute;
left: 10%;
overflow: hidden;
}
.card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
transition: transform .8s ease-in-out;
}
.card-image {
position: absolute;
top: 13.5%;
object-fit: cover;
}
.card-time {
font-size: 40px;
font-weight: 700;
position: absolute;
left:48%;
top: 38%;
}
.card-title {
font-size: 50px;
font-weight: 500;
position: absolute;
left:48%;
top: 28%;
}
.card-passage {
padding-top: 5px;
border-top: 2px solid white;
margin-top: 5px;
font-size: 20px;
font-weight: 300;
position: absolute;
top: 45%;
}
.card-time1 {
font-size: 40px;
font-weight: 700;
position: absolute;
top: 28%;
}
.card-title1 {
font-size: 50px;
font-weight: 500;
position: absolute;
top: 18%;
}
.card-passage1 {
padding-top: 5px;
border-top: 2px solid white;
margin-top: 5px;
font-size: 18px;
font-weight: 300;
line-height: 1.5;
position: absolute;
top: 35%;
}
.card-title2 {
font-size: 70px;
font-weight: 500;
position: absolute;
top: 33%;
}
#clock {
height: 130%;
/* 纵横比为1:1 */
aspect-ratio: 1 / 1;
position: absolute;
right: -28%;
top: -15%;
border-radius: 50%;
background-color: #dfb293;
border: #302b0b 30px solid;
}
@media(max-width:1000px) {
#clock {
right: -90%;
}
}
#clock-table {
width: 96%;
height: 96%;
border-radius: 50%;
position: absolute;
top: 2%;
left: 2%;
transition: transform .8s ease-in-out;
}
.invisible-table {
width: 100%;
height: 100%;
border-radius: 50%;
transform-origin: 50% 50%;
position: absolute;
}
.clock-thick {
width: 6%;
height: 6px;
background-color: #302B0B;
position: absolute;
top: calc(50% - 3px);
left: 0px;
}
.clock-thick span {
font-size: 50px;
position: absolute;
left: 140%;
top: calc(50% - 30px);
color: #302B0B;
}
.clock-scale {
width: 4%;
height: 2px;
background-color: #302B0B;
position: absolute;
top: calc(50% - .5px);
left: 0px;
}
.bottom-navigation {
position: fixed;
bottom: 20px;
right: 10px;
display: flex;
gap: 10px;
background: rgba(0, 0, 0, 0);
padding: 15px;
border-radius: 15px;
backdrop-filter: blur(10px);
z-index: 1000;
flex-direction: column;
}
.nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255, 255, 255, 0);
transition: all 0.3s ease;
text-decoration: none;
}
.nav-icon:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
scale: 1.1;
}
.nav-icon img {
max-width: 32px;
max-height: 32px;
width: auto;
height: auto;
object-fit: contain;
}
</style>
</head>
<body>
<div class="main">
<a href="#" id="up-btn" onclick="slideToPrev()">∧</a>
<a href="#" id="down-btn" onclick="slideToNext()">∨</a>
<a href="#" id="p1-btn" onclick="slideTo1()">◉</a>
<a href="#" id="p2-btn" onclick="slideTo2()">◉</a>
<a href="#" id="p3-btn" onclick="slideTo3()">◉</a>
<a href="#" id="p4-btn" onclick="slideTo4()">◉</a>
<a href="#" id="p5-btn" onclick="slideTo5()">◉</a>
<a href="#" id="p6-btn" onclick="slideTo6()">◉</a>
<a href="#" id="p7-btn" onclick="slideTo7()">◉</a>
<a href="#" id="p8-btn" onclick="slideTo8()">◉</a>
<a href="#" id="p9-btn" onclick="slideTo9()">◉</a>
<a href="#" id="p10-btn" onclick="slideTo10()">◉</a>
<div id="content1">
<div class="img1">
</div>
<div class="img1">
<img src="img/1.jpg">
</div>
<div class="img1">
<img src="img/2.jpg">
</div>
<div class="img1">
<img src="img/3.png">
</div>
<div class="img1">
<img src="img/4.jpg">
</div>
<div class="img1">
<img src="img/5.jpg">
</div>
<div class="img1">
<img src="img/6.jpg">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="img/7.jpg">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/f26qyeq0ib0hal7b.jpg!800x800">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="img/9.jpg">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/gk0a1bo85qp1uxnu.jpg!800x800">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/6kgdnkgnjxkol3ie.jpg!800x800">
</div>
<div class="img1">
<img src="img/12.jpg">
</div>
<div class="img1">
<img src="img/13.jpg">
</div>
<div class="img1">
<img src="img/14.jpg">
</div>
<div class="img1">
<img src="img/15.jpg">
</div>
<div class="img1">
<img src="img/16.jpg">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/l4sscvasf28lzuoq.jpg!800x800">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/3a1hp3whioz8tr0c.jpg!800x800">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/v4mb0a2p4x47z53y.jpg!800x800">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/secg45wynxr27e2r.jpg!800x800">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="img/53.jpg">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/bvb0sknfs87ehkbz.jpg!800x800">
</div>
<div class="img1">
<img src="https://img.library.sh.cn/dy/img/hb1ifrj2go3zc4gi.jpg!800x800">
</div>
<div class="img1">
<img src="img/23.jpg">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="img/24.jpg">
</div>
<div class="img1">
<img src="img/25.jpg">
</div>
<div class="img1">
<img src="img/26.jpg">
</div>
<div class="img1">
<img src="img/27.jpg">
</div>
<div class="img1">
<img src="img/28.jpg">
</div>
<div class="img1">
<img src="img/29.jpg">
</div>
<div class="img1">
<img src="img/30.jpg">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="img/31.jpg">
</div>
<div class="img1">
<img src="img/32.jpg">
</div>
<div class="img1">
<img src="img/33.jpg">
</div>
<div class="img1">
<img src="img/34.jpg">
</div>
<div class="img1">
<img src="img/35.jpg">
</div>
<div class="img1">
<img src="img/36.jpg">
</div>
<div class="img1">
<img src="img/37.jpg">
</div>
<div class="img1">
<img src="img/38.jpg">
</div>
<div class="img1">
<img src="img/39.jpg">
</div>
<div class="img1">
<img src="img/40.jpg">
</div>
<div class="img1">
<img src="img/41.jpg">
</div>
<div class="img1">
<img src="img/42.jpg">
</div>
<div class="img1">
<img src="img/43.jpg">
</div>
<div class="img1">
<img src="img/44.jpg">
</div>
<div class="img1">
<img src="img/45.jpg">
</div>
<div class="img1">
<img src="img/46.jpg">
</div>
<div class="img1">
<img src="img/47.jpg">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="img/48.jpg">
</div>
<div class="img1">
<img src="img/49.jpg">
</div>
<div class="img1">
<img src="img/50.jpg">
</div>
<div class="img1">
<img src="img/51.jpg">
</div>
<div class="img1">
<img src="img/52.jpg">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="img/54.jpg">
</div>
<div class="img1">
<img src="img/55.jpg">
</div>
<div class="img1">
<img src="img/56.jpg">
</div>
<div class="img1">
<img src="img/57.jpg">
</div>
<div class="img1">
<img src="img/58.jpg">
</div>
<div class="img1">
<img src="img/59.jpg">
</div>
<div class="img1">
<img src="img/60.jpg">
</div>
<div class="img1">
<img src="img/61.jpg">
</div>
<div class="img1">
<img src="img/62.jpg">
</div>
<div class="img1">
<img src="img/63.jpg">
</div>
<div class="img1">
<img src="img/64.jpg">
</div>
<div class="img1">
<img src="img/65.jpg">
</div>
<div class="img1">
<img src="img/66.jpg">
</div>
<div class="img1">
<img src="img/67.jpg">
</div>
<div class="img1">
<img src="img/68.jpg">
</div>
<div class="img1">
<img src="img/69.jpg">
</div>
<div class="img1">
<img src="img/70.jpg">
</div>
<div class="img1">
<img src="img/71.jpg">
</div>
<div class="img1">
<img src="img/72.jpg">
</div>
<div class="img1">
<img src="img/73.jpg">
</div>
<div class="img1">
<img src="img/74.jpg">
</div>
<div class="img1">
<img src="img/76.jpg">
</div>
<div class="img1">
<img src="img/77.jpg">
</div>
<div class="img1">
<img src="img/78.jpg">
</div>
<div class="img1">
<img src="img/75.jpg">
</div>
<div class="img1">
<img src="img/79.jpg">
</div>
<div class="img1">
<img src="img/80.jpg">
</div>
<div class="img1">
<img src="img/81.jpg">
</div>
<div class="img1">
<img src="img/82.jpg">
</div>
<div class="img1">
<img src="img/83.jpg">
</div>
<div class="img1">
<img src="img/84.jpg">
</div>
<div class="img1">
</div>
<div class="img1">
<img src="img/85.jpg">
</div>
<div class="img1">
<img src="img/86.jpg">
</div>
<div class="img1">
<img src="img/87.jpg">
</div>
<div class="img1">
<img src="img/88.jpg">
</div>
<div class="img1">
<img src="img/89.jpg">
</div>
<div class="img1">
<img src="img/90.jpg">
</div>
<div class="img1">
<img src="img/91.jpg">
</div>
<div class="img1">
<img src="img/92.jpg">
</div>
<div class="img1">
<img src="img/93.jpg">
</div>
<div class="img1">
<img src="img/94.jpg">
</div>
<div class="img1">
<img src="img/95.jpg">
</div>
<div class="img1">
<img src="img/96.jpg">
</div>
<div class="img1">
<img src="img/97.jpg">
</div>
<div class="img1">
<img src="img/98.jpg">
</div>
<div class="img1">
<img src="img/99.jpg">
</div>
<div class="img1">
<img src="img/100.jpg">
</div>
</div>
<div id="content">
<div class="card">
<div class="card-title1" left=100 top=100>
萌芽期：电影进入中国
</div>
<div class="card-time1">
1905~1923
</div>
<div class="card-passage1">
<br>
1905-1923年间，中国处于清末民初社会剧烈变革阶段。辛亥革命推翻帝制后，民族资本主义初步发展，上海等通商口岸城市化加速，西方文化与传统文明碰撞，为电影诞生提供土壤。<br><br>1905年电影进入中国，从戏曲纪录片起步，到1913年亚细亚影戏公司成立，专业制片机构出现伴随着原创剧作的诞生，再到1921年首部长片诞生，影院建设与制片公司初步形成产业雏形，1922年明星影片公司成立并推动类型化创作。<br><br>此时的电影内容多取材戏曲、社会奇闻或家庭伦理，倾向娱乐教化结合，风格受文明戏和好莱坞影响，以固定机位纪实为主，渐向叙事探索过渡，奠定民族电影发展基础。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/1.jpg" width=336 height=224>
</div>
<div class="card-title">
定军山
</div>
<div class="card-time">
1905
</div>
<div class="card-passage">
<br>
《定军山》是中国电影的开山之作，由任庆泰执导，记录了京剧大师谭鑫培表演的京剧《定军山》中“请缨”、“舞刀”等片段。影片本身是对传统戏曲艺术的影像化记录，在思想性上虽无复杂叙事，但其选择国粹京剧作为内容，奠定了电影本土化的最初尝试。拍摄手法上采用固定机位全景拍摄，完全忠实于舞台表演，技术虽简陋却具有划时代的开创性。<br><br>《定军山》诞生于1905年，电影这一“西洋影戏”初入中国之际。其诞生标志着中国电影自主拍摄与制作的起点，开创了中国民族电影的历史纪元。作为中国电影的奠基之作，其无可替代的历史地位，使其成为中国电影史最为重要的里程碑。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/2.jpg" width=336 height=224>
</div>
<div class="card-title">
难夫难妻
</div>
<div class="card-time">
1913
</div>
<div class="card-passage">
<br>
《难夫难妻》是中国第一部短故事片，由张石川、郑正秋联合执导。影片通过一对素未谋面的青年被包办婚姻捆绑的过程，辛辣讽刺了封建婚俗的荒谬性。其思想上前所未有地触及社会批判领域，具有启蒙意义。拍摄上虽仍为固定机位舞台式记录，但已尝试简单的叙事编排，超越了纯戏曲记录。<br><br>影片诞生于辛亥革命后新旧思潮碰撞的年代，是电影从娱乐消遣转向社会批判的开端。作为中国叙事电影的奠基之作，它开创了电影与社会现实结合的传统，在中国电影史上占有无可替代的起源性地位。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/3.png" width=336 height=224>
</div>
<div class="card-title">
黑籍冤魂
</div>
<div class="card-time">
1916
</div>
<div class="card-passage">
<br>
《黑籍冤魂》是中国早期社会问题故事片，由张石川执导，改编自同名舞台剧。影片讲述一个富家子弟因吸食鸦片导致家破人亡的悲剧，直接批判了鸦片泛滥的社会毒瘤，其鲜明的社会警示意义和现实主义倾向在娱乐至上的早期影坛显得尤为可贵。拍摄上虽延续舞台化调度和固定机位，但通过字幕卡和场景切换实现了清晰的叙事表达。<br><br>影片诞生于1916年，正值民国初年社会变革期，鸦片问题仍是严重社会痼疾。影片继承了文明戏的批判传统，是中国电影史上最早聚焦社会现实问题的叙事作品之一，为后来社会问题剧的发展奠定了基石，具有重要的先驱意义。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/4.jpg" width=336 height=224>
</div>
<div class="card-title">
阎瑞生
</div>
<div class="card-time">
1921
</div>
<div class="card-passage">
<br>
《阎瑞生》是中国第一部长故事片（片长100分钟），改编自1920年上海滩真实的恶性犯罪事件。影片详尽叙述了洋行职员阎瑞生因财谋杀妓女王莲英并最终伏法的过程，其价值在于以写实手法直面都市犯罪与道德沦丧，虽存在猎奇色彩，但客观上展现了社会转型期的混乱图景。拍摄上大量采用外景实拍和字幕卡叙事，并启用非职业演员扮演本人，增强了纪实感和商业噱头，手法在当时颇具突破性。<br><br>该片诞生于1921年，正值上海都市化进程中市民文化兴起之初。影片巨大的商业成功开创了中国电影以真实社会案件为蓝本的“稗史片”风潮，尽管因其题材引发巨大道德争议，但它作为中国长故事片的奠基之作，标志着中国电影从短剧转向长篇叙事并探索本土商业化道路的里程碑，在中国电影史上占有至关重要的起源性地位。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/5.jpg" width=336 height=224>
</div>
<div class="card-title">
劳工之爱情
</div>
<div class="card-time">
1922
</div>
<div class="card-passage">
<br>
《劳工之爱情》（又名《掷果缘》）是现存最早的中国故事短片，由明星影片公司1922年摄制，张石川导演、郑正秋编剧。影片讲述水果贩为追求医生女儿，巧施计谋使一群跌打损伤的赌徒成为岳父病人，最终赢得爱情的故事。生动描绘了市井平民的智慧与生活趣味，摆脱了文明戏的沉重说教，充满诙谐幽默的生活气息。拍摄上虽为短片，却巧妙运用了叠化、特写等早期电影语言，场景调度灵活，喜剧节奏明快，叙事完整，技术处理在当时远胜同期作品。<br><br>影片诞生于中国电影初创期，正值市民文化兴起。它是早期短故事片创作趋于成熟的典范，标志着中国电影从戏剧记录转向独立叙事表达的关键一步，完整的喜剧形态与高超的叙事技巧使其在中国电影史上具有早期喜剧经典与文本标本的双重重要地位。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/6.jpg" width=336 height=224>
</div>
<div class="card-title">
孤儿救祖记
</div>
<div class="card-time">
1923
</div>
<div class="card-passage">
<br>
《孤儿救祖记》是中国早期电影里程碑作品，1923年由张石川执导、郑正秋编剧。影片讲述富翁杨寿昌遭侄道培陷害，儿媳余蔚如被逐后含辛茹苦抚养儿子，最终孙子余璞在祖父危难时挺身相救，揭穿阴谋重振家业的故事。其深刻思想在于聚焦家庭伦理与社会教化，宣扬传统孝道与善恶有报观念，同时折射对遗产制度及女性命运的思考。拍摄手法上突破早期戏剧式结构，叙事完整流畅，注重人物情感刻画，运用交叉剪辑增强戏剧张力，标志着中国电影从滑稽短片向长片正剧的艺术转型。<br><br>该片诞生于中国电影初创期，其惊人的商业成功挽救了明星影片公司，直接刺激了民族电影业的繁荣。作为第一部引起社会广泛反响的伦理剧情长片，它开创了中国社会问题剧的创作传统，被誉为“中国民族电影的奠基石”，在中国电影史上具有承前启后的划时代地位。
<br>
</div>
</div>
<div class="card">
<div class="card-title1" left=100 top=100>
探索期：中国电影初步发展
</div>
<div class="card-time1">
1923-1927
</div>
<div class="card-passage1">
<br>
1923-1927年，北洋军阀混战的同时五四运动也在如火如荼地进行。民族工业短暂发展推动城市文化消费，上海成为多元文化交汇中心，知识分子通过电影参与社会启蒙。此期电影业进入首轮商业化高潮，制片公司从1924年的20余家激增至1927年的100余家，长故事片成为主流，影院建设与发行网络初具规模。<br><br>《孤儿救祖记》的商业成功引发“国片复兴运动”，推动民族电影产业崛起；1926年天一公司开创古装片风潮，引发传统题材拍摄热潮；到1927年古装神怪片开始泛滥，中国电影商业类型化探索逐渐失控。<br><br>此时的电影内容开始呈现多元倾向：社会伦理片延续教化传统；古装稗史片挖掘民间故事；爱情片受西方影响展现都市生活。风格上逐步摆脱舞台化痕迹，尝试好莱坞叙事模式与视觉技巧，布景设计渐趋精细……
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/7.jpg" width=336 height=224>
</div>
<div class="card-title">
盘丝洞
</div>
<div class="card-time">
1927
</div>
<div class="card-passage">
<br>
《盘丝洞》是1927年由但杜宇执导的古装神怪片，改编自《西游记》第七十二回。影片以唐僧误入盘丝洞遭遇蜘蛛精为主线，虽为神怪题材，却通过妖女诱惑与冒险突围的叙事，隐晦投射了当时上海都市文化中的欲望表达与摩登观念，其大胆的感官呈现具有超前性。拍摄上大量运用布景、灯光和早期特技（如叠影、模型）营造奇幻氛围，女演员的表演与服装设计在当时极为前卫，技术表现力冠绝同期。<br><br>该片诞生于中国电影商业竞争激烈的“神怪片”浪潮初期，其惊人的票房成功极大推动了类型片创作。尽管因“伤风化”遭部分舆论抨击且拷贝一度失传，但它作为早期商业电影探索的极致代表，标志着中国电影娱乐化与工业化的关键一步，在中国电影史上具有特殊的文化史与类型研究价值。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://img.library.sh.cn/dy/img/f26qyeq0ib0hal7b.jpg!800x800" width=336 height=224>
</div>
<div class="card-title">
天涯歌女
</div>
<div class="card-time">
1927
</div>
<div class="card-passage">
<br>
《天涯歌女》是1927年由欧阳予倩编导、李旦旦主演的黑白无声片，讲述歌女凌霄在恶势力压迫下颠沛流离，最终被友人救赎的悲剧故事。影片通过女性命运批判社会黑暗与权贵欺压，寄托对底层人民的深切同情，其反封建的进步意识在早期影坛颇具启蒙意义。拍摄上虽剧作扎实，但受限于戏剧背景，多采用固定机位和舞台式调度，视觉语言较为僵化，被评“貌为电影实乃话剧”。<br><br>该片诞生于中国电影初创期，是欧阳予倩转型导演的早期尝试，虽艺术表现力不及同期《挂名的夫妻》等作，但作为首部以“歌女”为主角聚焦社会问题的影片，开创了女性题材与现实主义结合的先河。其角色塑造与流浪母题影响深远，为1937年《马路天使》等经典提供了叙事灵感，在中国电影史上奠定了社会批判题材的基石地位。
<br>
</div>
</div>
<div class="card">
<div class="card-title1" left=100 top=100>
竞争期：商业竞争浪潮
</div>
<div class="card-time1">
1928~1931
</div>
<div class="card-passage1">
<br>
南京国民政府成立初期，社会表面统一实则动荡，资本主义经济短暂繁荣推动娱乐业发展，上海成为远东电影中心。此期电影业陷入无序商业竞争，制片公司数量从百余家锐减至20余家，类型片生产达到高潮，但艺术质量参差不齐，过度商业化导致恶性循环。<br><br>1928年《火烧红莲寺》引发武侠神怪片狂潮，三年内推出18集，跟风作品超200部，形成中国电影史上首次类型片泛滥；1931年《歌女红牡丹》作为首部有声片诞生，标志技术革命开启；同年国民政府出台《电影检查法》，以“宣扬迷信”为由禁映武侠神怪片，强制终结此类型热潮。<br><br>此时电影内容彻底倾向娱乐化：武侠片构建江湖奇观，神怪片追求视觉猎奇，言情片延续鸳鸯蝴蝶派风格。艺术风格呈现两极分化：商业片大量使用钢丝特技、接顶摄影等视觉创新，但叙事粗糙；少数文艺片如《桃花泣血记》尝试社会写实，为左翼电影运动埋下伏笔。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/9.jpg" width=336 height=224>
</div>
<div class="card-title">
火烧红莲寺
</div>
<div class="card-time">
1928
</div>
<div class="card-passage">
<br>
《火烧红莲寺》是1928年明星影片公司出品的武侠默片，改编自小说《江湖奇侠传》，讲述陆小青揭破红莲寺恶僧罪行，联合众侠士火烧邪寺的故事。影片借神怪元素隐射现实黑暗，掌心发雷等各种视觉奇观虽被诟病“怪力乱神”，却折射了大革命失败后民众的避世心理与对权威的消解意愿。拍摄上开创性运用“接顶法”、吊钢丝等特技实现剑光斗法、空中飞行等奇幻场面，奠定了武侠电影的技术美学基础。<br><br>该片巨大的轰动效应引发三年内连拍18集的空前热潮，并推动后续227部武侠神怪片的跟风制作，虽于1931年因“宣扬迷信”遭国民政府禁映，却成为中国电影史上首波类型片浪潮的标志。作为武侠神怪片的开山之作，它将武侠片推升为最具中国特色的电影品类，其技术实验与商业化模式深刻影响香港武侠电影的发展，在中国电影史上享有类型拓荒与工业启蒙的双重里程碑地位。
<br>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://img.library.sh.cn/dy/img/gk0a1bo85qp1uxnu.jpg!800x800" width=336 height=224>
</div>
<div class="card-title">
歌女红牡丹
</div>
<div class="card-time">
1931
</div>
<div class="card-passage">
<br>
《歌女红牡丹》是中国第一部有声电影，由张石川执导、胡蝶主演，于1931年上映。影片讲述京剧女艺人红牡丹虽艺术成名却婚姻不幸，长期忍受败家丈夫的虐待与剥削，最终丈夫失手杀人入狱，她仍选择原谅的悲情故事。深刻揭露了封建礼教对女性的束缚与摧残，通过女主人公的忍辱负重折射旧时代艺人的社会困境，虽以道德救赎结尾但仍具批判意识。拍摄上采用蜡盘发音技术实现中国电影首次有声突破，虽音画同步尚显粗糙，但戏曲唱段的插入与对白运用具有划时代意义。<br><br>该片诞生于中国电影商业化探索与技术革命交界时期，其轰动效应推动了中国电影从默片向有声时代的转型。作为中国有声片的开山之作，它奠定了国产有声电影的技术与艺术基础，在中国电影史上具有里程碑式的地位。
<br>
</div>
</div>
<div class="card">
<div class="card-title1" left=100 top=100>
变革期：左翼电影与有声电影
</div>
<div class="card-time1">
1932~1937
</div>
<div class="card-passage1">
<br>
九一八事变与一二八事变后，救亡图存成为社会核心议题，城市文化界左翼思潮蓬勃兴起。电影业在商业泡沫破裂后迎来理性重建，明星、联华等大公司主导行业整合，有声技术全面普及，中国电影进入思想性与艺术性飞跃的黄金阶段。<br><br>1932年左翼作家联盟成立，夏衍、田汉等共产党员进入明星公司组建编剧委员会，标志着“左翼电影运动”正式兴起；《狂流》等片掀起社会批判浪潮，同年国民党成立电影检查委员会强化意识形态管控；1934年中共电影小组成立地下创作网络；1936年"国防电影"口号提出，呼应抗日统一战线形成。<br><br>此时内容倾向发生根本转变：从娱乐消遣转向社会批判，聚焦阶级矛盾、女性命运、民族危机三大主题。风格呈现多元突破：蔡楚生融合情节剧与现实主义，吴永刚以视觉隐喻深化批判，袁牧之探索声音叙事，费穆开创诗化电影语言。此期作品将好莱坞叙事技巧、苏联蒙太奇美学与中国人文关怀结合，奠定了中国现实主义电影的美学基石。
<br>
</div>