CSS3中,動畫作為一個重要的特性被廣泛地使用。其中,一條線動畫是一種簡單而有趣的動畫效果,可以通過CSS3的屬性和關鍵幀來實現。下面是一個簡單的例子:
.line { width: 100%; height: 2px; background-color: black; position: absolute; top: 50%; animation: line-anim 2s linear infinite; } @keyframes line-anim { 0% { left: 0; width: 0; } 50% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } }
上面這段代碼定義了一個寬度為100%、高度為2px、背景色為黑色的線段。在其父級元素中,它被設置在垂直居中的位置。在這個示例中,動畫被命名為line-anim,運行2秒鐘,速度為線性,無限循環。
在樣式表中的關鍵幀定義了線段的運動軌跡。在0%的關鍵幀上,線段左邊定位為0,寬度為0。在50%的關鍵幀上,線段左邊定位為0,寬度為100%。在100%的關鍵幀上,線段左邊定位為100%,寬度為0。通過這些關鍵幀,我們可以實現線段從左到右的運動效果。
總之,一條線動畫是一種簡單而有趣的動畫效果,可以帶來更有趣的用戶體驗。使用CSS3的屬性和關鍵幀,我們可以實現各種形式的線動畫效果。