diff --git a/51-css-scroll-based-animation/images/image1.jpg b/51-css-scroll-based-animation/images/image1.jpg new file mode 100644 index 0000000..178cca3 Binary files /dev/null and b/51-css-scroll-based-animation/images/image1.jpg differ diff --git a/51-css-scroll-based-animation/images/image2.jpg b/51-css-scroll-based-animation/images/image2.jpg new file mode 100644 index 0000000..f7c4b65 Binary files /dev/null and b/51-css-scroll-based-animation/images/image2.jpg differ diff --git a/51-css-scroll-based-animation/index.html b/51-css-scroll-based-animation/scroll.html similarity index 60% rename from 51-css-scroll-based-animation/index.html rename to 51-css-scroll-based-animation/scroll.html index bd8cd60..5c721bb 100644 --- a/51-css-scroll-based-animation/index.html +++ b/51-css-scroll-based-animation/scroll.html @@ -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; } }
-
-
+ +
diff --git a/51-css-scroll-based-animation/view.html b/51-css-scroll-based-animation/view.html new file mode 100644 index 0000000..521c01c --- /dev/null +++ b/51-css-scroll-based-animation/view.html @@ -0,0 +1,87 @@ + + + + + + Document + + + +
+
+

+ 《蜀道难》是南朝诗人阴铿创作的一首五言古诗。起笔两句先从歌咏前人赴蜀之事入手，引出对蜀地山川险阻的描写。中间四句，写蜀道险要难行，从大处写意着笔，岷山高耸，终年积雪，栈道连桓，深谷万丈，九折路使车毁坏，七星桥阻挡坐骑。结尾两句通过对蜀中山川险阻的具体描绘，发出“功名讵可要”的感慨，这正是生当乱世、屡历仕艰的诗人内心矛盾的自然流露。全诗以洗练的笔墨勾勒了自然形势的高险，缘景生情，融入了诗人的身世之悲，使此诗在思想意义上有所突破。 +

+

+ 王尊奉汉朝，灵关不惮遥。”起笔先从歌咏前人赴蜀之事入手。这是对汉代王尊不惧险阻、忠诚事国的称颂，也是要通过他赴蜀做益州刺史一事，引出对蜀地山川险阻的描写。“高岷长有雪”以下四句，就展开对蜀中山川险阻的具体描绘。“高岷长有雪，阴栈屡经烧。”高耸的岷山，从川北到陇南绵延川甘边境，为一险绝之处，要写蜀道艰难，自是不能不写的。其主峰雪宝顶积雪终年不化，故谓“长有雪”。作者不仅突出了其高，还突出了其长年不化之雪。栈道是一种于峭岩陡壁之上凿孔架木而成的道路，乃是古代川、陕、甘一带的重要通道。这种悬空架木之道，在沟连蜀地和汉中的险途中，自是一绝，当然也不能不写。因而，作者用“阴”来突出其悬于难见日光的半山腰，并且突出其屡次经历战火焚烧，犹有断痕残迹。通过这一高一下的高山、栈道的描写，万丈深谷，悬崖峭壁之多可见，蜀道之艰难亦可知。然而，其难还不止于此。“轮摧九折路，骑阻七星桥。”相对于前面自外入川之难而言，极写途中处处有险：九折路使车毁坏，七星桥阻挡坐骑。“九折路”，是指险阻回曲的山路，同时暗用王尊路经“九折阪”这一典故。王阳托病辞官、王尊要驭者加鞭前进事皆发生在此处，作者以“轮摧”形容之，可见此处道路的崎岖迂曲。“七星桥”栈道险峻，故作者以“骑阻”形容。车轮被摧折、车骑被阻塞，可见这蜀地山川是何等险峻难行了。 +

+

+ 蜀道难如此，功名讵可要。”通过对蜀中山川险阻的具体描绘，作者不禁发出这样的感慨。这个反问句，显然是面对山川险阻，发出功名绝对要不得的感慨。诗读至此，读者自然会产生一个疑问：开头两句盛赞王尊“不惮遥”，结尾却又说功名要不得，岂不矛盾了吗？其实，这正是作者生当乱世、屡历宦途而产生的思想矛盾的反映。要做忠臣，就得甘冒被贬、被杀的危险，就得甘冒自然界和仕途的艰难险阻，而实际生活中这种危险又时刻等待着忠臣，王尊也曾被劾免，作者也曾在“侯景之乱”中被擒。可见，这“难”是惊叹道路之难，更是慨叹仕途之难。 +

+ +

+ 这首诗表现陇蜀道之难的主要意象，是“高山积雪”“阴栈屡烧”“轮摧九折”“骑阻星桥”，但落脚点在蜀道难的含义上。全诗既写了蜀道之艰难，又连类取譬，发出仕途艰难的感慨，就思想意义而言，较之仅仅描写蜀中山川艰难的同题之作，显然是有所突破的。此诗在艺术表现上，值得一说的就是在描写蜀中山川险阻时，能选择有代表性的险绝处，并字斟句酌地突出其特点。这样，使人觉得具体、形象，产生如临其境的感觉。 +

+

+ 王尊奉汉朝，灵关不惮遥。”起笔先从歌咏前人赴蜀之事入手。这是对汉代王尊不惧险阻、忠诚事国的称颂，也是要通过他赴蜀做益州刺史一事，引出对蜀地山川险阻的描写。“高岷长有雪”以下四句，就展开对蜀中山川险阻的具体描绘。“高岷长有雪，阴栈屡经烧。”高耸的岷山，从川北到陇南绵延川甘边境，为一险绝之处，要写蜀道艰难，自是不能不写的。其主峰雪宝顶积雪终年不化，故谓“长有雪”。作者不仅突出了其高，还突出了其长年不化之雪。栈道是一种于峭岩陡壁之上凿孔架木而成的道路，乃是古代川、陕、甘一带的重要通道。这种悬空架木之道，在沟连蜀地和汉中的险途中，自是一绝，当然也不能不写。因而，作者用“阴”来突出其悬于难见日光的半山腰，并且突出其屡次经历战火焚烧，犹有断痕残迹。通过这一高一下的高山、栈道的描写，万丈深谷，悬崖峭壁之多可见，蜀道之艰难亦可知。然而，其难还不止于此。“轮摧九折路，骑阻七星桥。”相对于前面自外入川之难而言，极写途中处处有险：九折路使车毁坏，七星桥阻挡坐骑。“九折路”，是指险阻回曲的山路，同时暗用王尊路经“九折阪”这一典故。王阳托病辞官、王尊要驭者加鞭前进事皆发生在此处，作者以“轮摧”形容之，可见此处道路的崎岖迂曲。“七星桥”栈道险峻，故作者以“骑阻”形容。车轮被摧折、车骑被阻塞，可见这蜀地山川是何等险峻难行了。 +

+

+ 蜀道难如此，功名讵可要。”通过对蜀中山川险阻的具体描绘，作者不禁发出这样的感慨。这个反问句，显然是面对山川险阻，发出功名绝对要不得的感慨。诗读至此，读者自然会产生一个疑问：开头两句盛赞王尊“不惮遥”，结尾却又说功名要不得，岂不矛盾了吗？其实，这正是作者生当乱世、屡历宦途而产生的思想矛盾的反映。要做忠臣，就得甘冒被贬、被杀的危险，就得甘冒自然界和仕途的艰难险阻，而实际生活中这种危险又时刻等待着忠臣，王尊也曾被劾免，作者也曾在“侯景之乱”中被擒。可见，这“难”是惊叹道路之难，更是慨叹仕途之难。 +

+
+
+ +