CSS進度條和箭頭是一項非常有用的技術,可以幫助網站和應用程序向用戶展示操作功能或過程的進度和狀態。
/* CSS進度條 */ .progress-bar { border: 1px solid #ccc; height: 20px; position: relative; } .progress-bar span { background-color: #007fff; display: block; height: 100%; position: relative; overflow: hidden; width: 0; transition: width 0.5s ease-in-out; } .progress-bar-success span { background-color: #28b779; } .progress-bar-warning span { background-color: #f6c343; } .progress-bar-danger span { background-color: #ee634b; } /* CSS箭頭 */ .arrow { width: 100px; height: 50px; position: relative; } .arrow:before { content: ""; display: block; position: absolute; border-width: 25px 0 25px 50px; border-style: solid; border-color: transparent transparent transparent #007fff; left: -50px; top: 0; } .arrow:after { content: ""; display: block; position: absolute; border-width: 25px 50px 25px 0; border-style: solid; border-color: transparent #007fff transparent transparent; right: -50px; top: 0; }
上述代碼演示了如何使用CSS創建進度條和箭頭。進度條通過使用偽元素和過渡效果來實現動態變化。箭頭則是通過在偽元素上應用不同的邊框屬性來實現三角形形狀。
進度條樣式可以按照需要進行自定義,以反映進度狀態的不同,在示例中我們提供了一個成功,警告和危險狀態的示例。
箭頭樣式可以根據需要進行旋轉或縮小,以實現所需的視覺效果。可以針對箭頭容器應用不同的背景顏色或陰影效果,以使其與背景區分開來。