在css中,可以利用「@keyframes」規則和animation屬性來實現左右運動效果,主要語法「@keyframes 動畫名稱{0% {left:0px;}50%{left:200px;} 100% {left:0px;}}」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中,可以利用「@keyframes」規則和animation屬性來實現左右運動效果。
程式碼範例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { 0% {left:0px;} 50%{left:200px;} 100% {left:0px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { 0% {left:0px;} 50%{left:200px;} 100% {left:0px;} } </style> </head> <body> <div></div> </body> </html>
效果圖:
說明:
使用@keyframes規則,你可以創建動畫。創建動畫是透過逐步改變從一個CSS樣式設定到另一個。
在動畫過程中,您可以更改CSS樣式的設定多次。
指定的變化時發生時使用%,或關鍵字"from"和"to",這是和0%到100%相同。 0%是開頭動畫,100%是當動畫完成。
語法:
@keyframes animationname {keyframes-selector {css-styles;}}
值 | #說明 |
---|---|
animationname | 必要的。定義animation的名稱。由animation屬性定義。 |
keyframes-selector | #必要的。動畫持續時間的百分比。 合法值: 0-100% 注意: 您可以用一個動畫keyframes-selectors。 |
css-styles | #必要的。一個或多個合法的CSS樣式屬性 |
(學習影片分享:css影片教學)
以上是怎麼用css實現左右運動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!