CSS3 是 Web 開發中一個十分重要的技術,其中 CSS3 原生動畫更是讓網頁設計與用戶體驗更上一層樓。這是一種非常實用的技術,它能夠增加網站的互動性,使用戶在使用網站時獲得更好的體驗。
#box { width: 100px; height: 100px; animation-name: move; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes move { from {transform:translateX(0);} to {transform:translateX(300px);} }
上面這個代碼塊是一個簡單的 CSS3 動畫示例,這段代碼可以讓一個元素進行左右往返移動的動畫。這里使用了animation-name
來指定動畫的名稱為“move”;animation-duration
來指定動畫的持續時間為 4s;animation-iteration-count
來指定動畫循環的次數為無限次;animation-direction
來指定動畫反轉的方向為交替。
除此之外,關鍵的 CSS3 原生動畫屬性還有@keyframes
。用于指定動畫的關鍵幀,這里使用了一個簡單的樣例,將物體一開始時的位置(from)定義為 0,結束時的位置 (to) 定義為 300px,并通過transform: translateX()
將元素在水平方向上進行移動。
總之,CSS3 原生動畫可以讓我們更加方便、快捷地實現一些常用的動畫效果,提高用戶體驗,也更加方便我們的網頁設計。
上一篇css range
下一篇css rgba 顏色