CSS3滾動特效是在Web設計中經常使用的一種技術,它可以讓頁面的滾動效果更加華麗,同時也可以提高用戶的交互體驗。下面是幾種常見的CSS3滾動特效。
/* 圓形進度條滾動 */ .progress-bar { width: 60px; height: 60px; border-radius: 50%; position: relative; transform: rotate(-90deg); } .progress-bar:before, .progress-bar:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 50%; border: .1em solid rgba(0, 0, 0, .15); } .progress-bar:before { z-index: -1; } .progress-bar:after { z-index: 1; border-top: .1em solid #3498db; transform: rotate(25deg); animation: loader 1s linear infinite; } @keyframes loader { 0% { transform: rotate(-135deg); } 100% { transform: rotate(225deg); } }
以上是一個圓形進度條滾動特效,可用于顯示加載進度等場景。使用了CSS3的偽元素、動畫和transform。
/* 滾動條美化 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #2c3e50; } ::-webkit-scrollbar-thumb { background-color: #3498db; border-radius: 3px; }
上述代碼是用于美化滾動條的CSS3代碼,使用了CSS3的偽元素和border-radius屬性。
/* 無縫滾動動畫 */ .marquee { width: 100%; height: 50px; overflow: hidden; position: relative; } .marquee span { position: absolute; width: 100%; height: 50px; left: 100%; top: 0; animation: marquee 10s linear infinite; } .marquee span:nth-child(2) { animation-delay: 5s; } @keyframes marquee { 0% { left: 100%; } 100% { left: -100%; } }
最后一個是無縫滾動動畫,可用于展示滾動新聞、廣告等內容。使用了CSS3的動畫和position屬性。
下一篇css3滑出