CSS3持續是CSS技術的一項重要更新,它引入了很多新的特性,如過渡、動畫、轉換等。這些特性可以幫助我們創建出更加生動、豐富的網頁效果。
/* 以下是一個簡單的CSS3過渡效果的實現代碼 */ .box{ width: 100px; height: 100px; background-color: blue; transition: width 1s ease-in-out; } .box:hover{ width: 200px; }
上述代碼實現的效果是當鼠標懸停在該元素上時,它的寬度從100像素過渡到200像素,過渡時間為1秒,運動規律為先慢后快。
除了過渡效果,CSS3還引入了動畫特性,可以根據我們設定的關鍵幀信息,創建出更加豐富的運動效果。
/* 以下是一個簡單的CSS3動畫效果實現代碼 */ .ball{ width: 50px; height: 50px; background-color: red; position: absolute; animation: move 2s ease-in-out infinite; } @keyframes move{ 0%{ left: 0; } 50%{ left: 200px; transform: rotate(180deg); } 100%{ left: 0; } }
上述代碼實現的效果是一個紅色的小球在左右移動過程中不斷旋轉,持續時間為2秒。
除了過渡和動畫,CSS3還有很多其他特性,諸如2D/3D轉換、圓角、陰影、濾鏡等,可以幫助我們創造出更加精美的網頁效果。CSS3持續的更新也在不斷推進,為我們提供了更多的工具和可能性。