Skip to content

Commit

Permalink
Finish example
Browse files Browse the repository at this point in the history
  • Loading branch information
@zxuqian
zxuqian committed Mar 14, 2024
1 parent 68581e5 commit ed75479
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 18 deletions.
Binary file added 51-css-scroll-based-animation/images/image1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 51-css-scroll-based-animation/images/image2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 13 additions & 18 deletions 51-css-scroll-based-animation/index.html → 51-css-scroll-based-animation/scroll.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,47 +13,42 @@
}

main {
background-color: hsl(209, 100%, 50%);
/* background-color: hsl(209, 100%, 50%); */
width: 100vw;
height: calc(100vh * 3);
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;

perspective: 1000px;
/* perspective: 1000px; */
}

.box {
margin-top: 50vh;
background-color: hsl(40, 100%, 50%);
img {
width: 300px;
height: 300px;
animation: scaleAndFlip linear;
animation-timeline: scroll(root block);
transform-style: preserve-3d;
object-fit: cover;
margin-top: 50vh;
}

.box2 {
background-color: hsl(60, 100%, 50%);
img:nth-of-type(1) {
animation: move200 linear;
animation-timeline: scroll(root block);
}

@keyframes scaleAndFlip {
@keyframes move200 {
0% {
scale: 1;
rotate: x 0deg;
translate: 0 0;
}
100% {
scale: 4;
rotate: x 360deg;
opacity: 0.1;
translate: 0 -200px;
}
}
</style>
</head>
<body>
<main>
<div class="box box1"></div>
<div class="box box2"></div>
<img src="images/image1.jpg" alt="" />
<img src="images/image2.jpg" alt="" />
</main>
</body>
</html>
87 changes: 87 additions & 0 deletions 51-css-scroll-based-animation/view.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: transparent;
font-family: "PingFang SC", sans-serif;
}

main {
background-color: hsl(209, 100%, 98%);
width: 100vw;
height: calc(100vh * 3);
display: grid;
justify-content: center;

/* perspective: 1000px; */
}

article {
width: 60vw;
padding: 24px;
line-height: 1.6;
text-indent: 2em;
}

article p {
margin-bottom: 1em;
}

img {
max-width: 100%;
object-fit: cover;
margin: 24px 0;

animation: reveal linear;
/* 从上边界进入开始，到下边界离开为止 */
/* animation-timeline: view(block); */
animation-timeline: view(block);
/* animation-range: entry; */
animation-range: entry 0% cover 50%;
}

@keyframes reveal {
0% {
opacity: 0;
scale: 5;
}
100% {
scale: 1;
opacity: 1;
}
}
</style>
</head>
<body>
<main>
<article>
<p>
《蜀道难》是南朝诗人阴铿创作的一首五言古诗。起笔两句先从歌咏前人赴蜀之事入手，引出对蜀地山川险阻的描写。中间四句，写蜀道险要难行，从大处写意着笔，岷山高耸，终年积雪，栈道连桓，深谷万丈，九折路使车毁坏，七星桥阻挡坐骑。结尾两句通过对蜀中山川险阻的具体描绘，发出“功名讵可要”的感慨，这正是生当乱世、屡历仕艰的诗人内心矛盾的自然流露。全诗以洗练的笔墨勾勒了自然形势的高险，缘景生情，融入了诗人的身世之悲，使此诗在思想意义上有所突破。
</p>
<p>
王尊奉汉朝，灵关不惮遥。”起笔先从歌咏前人赴蜀之事入手。这是对汉代王尊不惧险阻、忠诚事国的称颂，也是要通过他赴蜀做益州刺史一事，引出对蜀地山川险阻的描写。“高岷长有雪”以下四句，就展开对蜀中山川险阻的具体描绘。“高岷长有雪，阴栈屡经烧。”高耸的岷山，从川北到陇南绵延川甘边境，为一险绝之处，要写蜀道艰难，自是不能不写的。其主峰雪宝顶积雪终年不化，故谓“长有雪”。作者不仅突出了其高，还突出了其长年不化之雪。栈道是一种于峭岩陡壁之上凿孔架木而成的道路，乃是古代川、陕、甘一带的重要通道。这种悬空架木之道，在沟连蜀地和汉中的险途中，自是一绝，当然也不能不写。因而，作者用“阴”来突出其悬于难见日光的半山腰，并且突出其屡次经历战火焚烧，犹有断痕残迹。通过这一高一下的高山、栈道的描写，万丈深谷，悬崖峭壁之多可见，蜀道之艰难亦可知。然而，其难还不止于此。“轮摧九折路，骑阻七星桥。”相对于前面自外入川之难而言，极写途中处处有险：九折路使车毁坏，七星桥阻挡坐骑。“九折路”，是指险阻回曲的山路，同时暗用王尊路经“九折阪”这一典故。王阳托病辞官、王尊要驭者加鞭前进事皆发生在此处，作者以“轮摧”形容之，可见此处道路的崎岖迂曲。“七星桥”栈道险峻，故作者以“骑阻”形容。车轮被摧折、车骑被阻塞，可见这蜀地山川是何等险峻难行了。
</p>
<p>
蜀道难如此，功名讵可要。”通过对蜀中山川险阻的具体描绘，作者不禁发出这样的感慨。这个反问句，显然是面对山川险阻，发出功名绝对要不得的感慨。诗读至此，读者自然会产生一个疑问：开头两句盛赞王尊“不惮遥”，结尾却又说功名要不得，岂不矛盾了吗？其实，这正是作者生当乱世、屡历宦途而产生的思想矛盾的反映。要做忠臣，就得甘冒被贬、被杀的危险，就得甘冒自然界和仕途的艰难险阻，而实际生活中这种危险又时刻等待着忠臣，王尊也曾被劾免，作者也曾在“侯景之乱”中被擒。可见，这“难”是惊叹道路之难，更是慨叹仕途之难。
</p>
<img src="images/image1.jpg" alt="" />
<p>
这首诗表现陇蜀道之难的主要意象，是“高山积雪”“阴栈屡烧”“轮摧九折”“骑阻星桥”，但落脚点在蜀道难的含义上。全诗既写了蜀道之艰难，又连类取譬，发出仕途艰难的感慨，就思想意义而言，较之仅仅描写蜀中山川艰难的同题之作，显然是有所突破的。此诗在艺术表现上，值得一说的就是在描写蜀中山川险阻时，能选择有代表性的险绝处，并字斟句酌地突出其特点。这样，使人觉得具体、形象，产生如临其境的感觉。
</p>
<p>
王尊奉汉朝，灵关不惮遥。”起笔先从歌咏前人赴蜀之事入手。这是对汉代王尊不惧险阻、忠诚事国的称颂，也是要通过他赴蜀做益州刺史一事，引出对蜀地山川险阻的描写。“高岷长有雪”以下四句，就展开对蜀中山川险阻的具体描绘。“高岷长有雪，阴栈屡经烧。”高耸的岷山，从川北到陇南绵延川甘边境，为一险绝之处，要写蜀道艰难，自是不能不写的。其主峰雪宝顶积雪终年不化，故谓“长有雪”。作者不仅突出了其高，还突出了其长年不化之雪。栈道是一种于峭岩陡壁之上凿孔架木而成的道路，乃是古代川、陕、甘一带的重要通道。这种悬空架木之道，在沟连蜀地和汉中的险途中，自是一绝，当然也不能不写。因而，作者用“阴”来突出其悬于难见日光的半山腰，并且突出其屡次经历战火焚烧，犹有断痕残迹。通过这一高一下的高山、栈道的描写，万丈深谷，悬崖峭壁之多可见，蜀道之艰难亦可知。然而，其难还不止于此。“轮摧九折路，骑阻七星桥。”相对于前面自外入川之难而言，极写途中处处有险：九折路使车毁坏，七星桥阻挡坐骑。“九折路”，是指险阻回曲的山路，同时暗用王尊路经“九折阪”这一典故。王阳托病辞官、王尊要驭者加鞭前进事皆发生在此处，作者以“轮摧”形容之，可见此处道路的崎岖迂曲。“七星桥”栈道险峻，故作者以“骑阻”形容。车轮被摧折、车骑被阻塞，可见这蜀地山川是何等险峻难行了。
</p>
<p>
蜀道难如此，功名讵可要。”通过对蜀中山川险阻的具体描绘，作者不禁发出这样的感慨。这个反问句，显然是面对山川险阻，发出功名绝对要不得的感慨。诗读至此，读者自然会产生一个疑问：开头两句盛赞王尊“不惮遥”，结尾却又说功名要不得，岂不矛盾了吗？其实，这正是作者生当乱世、屡历宦途而产生的思想矛盾的反映。要做忠臣，就得甘冒被贬、被杀的危险，就得甘冒自然界和仕途的艰难险阻，而实际生活中这种危险又时刻等待着忠臣，王尊也曾被劾免，作者也曾在“侯景之乱”中被擒。可见，这“难”是惊叹道路之难，更是慨叹仕途之难。
</p>
</article>
</main>
</body>
</html>

0 comments on commit ed75479

Please sign in to comment.