Skip to content

Commit ed75479

Browse files
committed
Finish example
1 parent 68581e5 commit ed75479

File tree

4 files changed

+100
-18
lines changed

4 files changed

+100
-18
lines changed
92.9 KB
Loading
140 KB
Loading

51-css-scroll-based-animation/index.html renamed to 51-css-scroll-based-animation/scroll.html

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,47 +13,42 @@
1313
}
1414

1515
main {
16-
background-color: hsl(209, 100%, 50%);
16+
/* background-color: hsl(209, 100%, 50%); */
1717
width: 100vw;
1818
height: calc(100vh * 3);
1919
display: grid;
2020
grid-template-columns: 1fr 1fr;
2121
justify-items: center;
2222

23-
perspective: 1000px;
23+
/* perspective: 1000px; */
2424
}
2525

26-
.box {
27-
margin-top: 50vh;
28-
background-color: hsl(40, 100%, 50%);
26+
img {
2927
width: 300px;
3028
height: 300px;
31-
animation: scaleAndFlip linear;
32-
animation-timeline: scroll(root block);
33-
transform-style: preserve-3d;
29+
object-fit: cover;
30+
margin-top: 50vh;
3431
}
3532

36-
.box2 {
37-
background-color: hsl(60, 100%, 50%);
33+
img:nth-of-type(1) {
34+
animation: move200 linear;
35+
animation-timeline: scroll(root block);
3836
}
3937

40-
@keyframes scaleAndFlip {
38+
@keyframes move200 {
4139
0% {
42-
scale: 1;
43-
rotate: x 0deg;
40+
translate: 0 0;
4441
}
4542
100% {
46-
scale: 4;
47-
rotate: x 360deg;
48-
opacity: 0.1;
43+
translate: 0 -200px;
4944
}
5045
}
5146
</style>
5247
</head>
5348
<body>
5449
<main>
55-
<div class="box box1"></div>
56-
<div class="box box2"></div>
50+
<img src="images/image1.jpg" alt="" />
51+
<img src="images/image2.jpg" alt="" />
5752
</main>
5853
</body>
5954
</html>
Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
margin: 0;
11+
padding: 0;
12+
background-color: transparent;
13+
font-family: "PingFang SC", sans-serif;
14+
}
15+
16+
main {
17+
background-color: hsl(209, 100%, 98%);
18+
width: 100vw;
19+
height: calc(100vh * 3);
20+
display: grid;
21+
justify-content: center;
22+
23+
/* perspective: 1000px; */
24+
}
25+
26+
article {
27+
width: 60vw;
28+
padding: 24px;
29+
line-height: 1.6;
30+
text-indent: 2em;
31+
}
32+
33+
article p {
34+
margin-bottom: 1em;
35+
}
36+
37+
img {
38+
max-width: 100%;
39+
object-fit: cover;
40+
margin: 24px 0;
41+
42+
animation: reveal linear;
43+
/* 从上边界进入开始,到下边界离开为止 */
44+
/* animation-timeline: view(block); */
45+
animation-timeline: view(block);
46+
/* animation-range: entry; */
47+
animation-range: entry 0% cover 50%;
48+
}
49+
50+
@keyframes reveal {
51+
0% {
52+
opacity: 0;
53+
scale: 5;
54+
}
55+
100% {
56+
scale: 1;
57+
opacity: 1;
58+
}
59+
}
60+
</style>
61+
</head>
62+
<body>
63+
<main>
64+
<article>
65+
<p>
66+
《蜀道难》是南朝诗人阴铿创作的一首五言古诗。起笔两句先从歌咏前人赴蜀之事入手,引出对蜀地山川险阻的描写。中间四句,写蜀道险要难行,从大处写意着笔,岷山高耸,终年积雪,栈道连桓,深谷万丈,九折路使车毁坏,七星桥阻挡坐骑。结尾两句通过对蜀中山川险阻的具体描绘,发出“功名讵可要”的感慨,这正是生当乱世、屡历仕艰的诗人内心矛盾的自然流露。全诗以洗练的笔墨勾勒了自然形势的高险,缘景生情,融入了诗人的身世之悲,使此诗在思想意义上有所突破。
67+
</p>
68+
<p>
69+
王尊奉汉朝,灵关不惮遥。”起笔先从歌咏前人赴蜀之事入手。这是对汉代王尊不惧险阻、忠诚事国的称颂,也是要通过他赴蜀做益州刺史一事,引出对蜀地山川险阻的描写。“高岷长有雪”以下四句,就展开对蜀中山川险阻的具体描绘。“高岷长有雪,阴栈屡经烧。”高耸的岷山,从川北到陇南绵延川甘边境,为一险绝之处,要写蜀道艰难,自是不能不写的。其主峰雪宝顶积雪终年不化,故谓“长有雪”。作者不仅突出了其高,还突出了其长年不化之雪。栈道是一种于峭岩陡壁之上凿孔架木而成的道路,乃是古代川、陕、甘一带的重要通道。这种悬空架木之道,在沟连蜀地和汉中的险途中,自是一绝,当然也不能不写。因而,作者用“阴”来突出其悬于难见日光的半山腰,并且突出其屡次经历战火焚烧,犹有断痕残迹。通过这一高一下的高山、栈道的描写,万丈深谷,悬崖峭壁之多可见,蜀道之艰难亦可知。然而,其难还不止于此。“轮摧九折路,骑阻七星桥。”相对于前面自外入川之难而言,极写途中处处有险:九折路使车毁坏,七星桥阻挡坐骑。“九折路”,是指险阻回曲的山路,同时暗用王尊路经“九折阪”这一典故。王阳托病辞官、王尊要驭者加鞭前进事皆发生在此处,作者以“轮摧”形容之,可见此处道路的崎岖迂曲。“七星桥”栈道险峻,故作者以“骑阻”形容。车轮被摧折、车骑被阻塞,可见这蜀地山川是何等险峻难行了。
70+
</p>
71+
<p>
72+
蜀道难如此,功名讵可要。”通过对蜀中山川险阻的具体描绘,作者不禁发出这样的感慨。这个反问句,显然是面对山川险阻,发出功名绝对要不得的感慨。诗读至此,读者自然会产生一个疑问:开头两句盛赞王尊“不惮遥”,结尾却又说功名要不得,岂不矛盾了吗?其实,这正是作者生当乱世、屡历宦途而产生的思想矛盾的反映。要做忠臣,就得甘冒被贬、被杀的危险,就得甘冒自然界和仕途的艰难险阻,而实际生活中这种危险又时刻等待着忠臣,王尊也曾被劾免,作者也曾在“侯景之乱”中被擒。可见,这“难”是惊叹道路之难,更是慨叹仕途之难。
73+
</p>
74+
<img src="images/image1.jpg" alt="" />
75+
<p>
76+
这首诗表现陇蜀道之难的主要意象,是“高山积雪”“阴栈屡烧”“轮摧九折”“骑阻星桥”,但落脚点在蜀道难的含义上。全诗既写了蜀道之艰难,又连类取譬,发出仕途艰难的感慨,就思想意义而言,较之仅仅描写蜀中山川艰难的同题之作,显然是有所突破的。此诗在艺术表现上,值得一说的就是在描写蜀中山川险阻时,能选择有代表性的险绝处,并字斟句酌地突出其特点。这样,使人觉得具体、形象,产生如临其境的感觉。
77+
</p>
78+
<p>
79+
王尊奉汉朝,灵关不惮遥。”起笔先从歌咏前人赴蜀之事入手。这是对汉代王尊不惧险阻、忠诚事国的称颂,也是要通过他赴蜀做益州刺史一事,引出对蜀地山川险阻的描写。“高岷长有雪”以下四句,就展开对蜀中山川险阻的具体描绘。“高岷长有雪,阴栈屡经烧。”高耸的岷山,从川北到陇南绵延川甘边境,为一险绝之处,要写蜀道艰难,自是不能不写的。其主峰雪宝顶积雪终年不化,故谓“长有雪”。作者不仅突出了其高,还突出了其长年不化之雪。栈道是一种于峭岩陡壁之上凿孔架木而成的道路,乃是古代川、陕、甘一带的重要通道。这种悬空架木之道,在沟连蜀地和汉中的险途中,自是一绝,当然也不能不写。因而,作者用“阴”来突出其悬于难见日光的半山腰,并且突出其屡次经历战火焚烧,犹有断痕残迹。通过这一高一下的高山、栈道的描写,万丈深谷,悬崖峭壁之多可见,蜀道之艰难亦可知。然而,其难还不止于此。“轮摧九折路,骑阻七星桥。”相对于前面自外入川之难而言,极写途中处处有险:九折路使车毁坏,七星桥阻挡坐骑。“九折路”,是指险阻回曲的山路,同时暗用王尊路经“九折阪”这一典故。王阳托病辞官、王尊要驭者加鞭前进事皆发生在此处,作者以“轮摧”形容之,可见此处道路的崎岖迂曲。“七星桥”栈道险峻,故作者以“骑阻”形容。车轮被摧折、车骑被阻塞,可见这蜀地山川是何等险峻难行了。
80+
</p>
81+
<p>
82+
蜀道难如此,功名讵可要。”通过对蜀中山川险阻的具体描绘,作者不禁发出这样的感慨。这个反问句,显然是面对山川险阻,发出功名绝对要不得的感慨。诗读至此,读者自然会产生一个疑问:开头两句盛赞王尊“不惮遥”,结尾却又说功名要不得,岂不矛盾了吗?其实,这正是作者生当乱世、屡历宦途而产生的思想矛盾的反映。要做忠臣,就得甘冒被贬、被杀的危险,就得甘冒自然界和仕途的艰难险阻,而实际生活中这种危险又时刻等待着忠臣,王尊也曾被劾免,作者也曾在“侯景之乱”中被擒。可见,这“难”是惊叹道路之难,更是慨叹仕途之难。
83+
</p>
84+
</article>
85+
</main>
86+
</body>
87+
</html>

0 commit comments

Comments
 (0)