CSS做滾動動畫是網頁制作中常用的一種技巧,通過設置一些簡單的CSS樣式即可實現如滾動字幕、頁面元素漸現等效果。
/* 設置滾動文字字幕效果 */ .scroll { overflow: hidden; position: relative; } .scroll p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 100%; color: #fff; text-shadow: 0 0 1px #000; animation: scroll-up 10s linear infinite; } @keyframes scroll-up { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
上面的代碼片段是一個簡單的滾動字幕效果,先通過設置包裹文字的容器.scroll為overflow: hidden;
,隨后設置文字元素的position: absolute;
和width: 100%;
,使其獨占一行。最后通過動畫@keyframes
來控制文字節點的滾動,使用transform: translateY(-100%);
解決滾動到底部的問題。
另外示例中還通過設置文字陰影text-shadow: 0 0 1px #000;
,使得文字效果更加突出。
/* 設置頁面元素漸現效果 */ .fade-in { opacity: 0; animation: fade-in 2s ease-out forwards; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
此外,頁面元素的淡入效果也是一種常見的滾動動畫。通常可通過設置元素的opacity: 0;
,再通過動畫@keyframes
來控制元素的漸現。以上代碼片段即可實現一個簡單的漸現效果。
總之,CSS做滾動動畫為網頁設計提供了更加豐富的交互方式,通過合理運用CSS樣式可以實現更加美觀、動感的頁面效果。