透過 keyframes 樣式的設定,可以輕易的在網頁上針對某個特定元素實作動畫效果,而經由程式調整動畫樣式,可以在特定的時機點切換不同的動畫效果。
考慮以下的畫面,當滑鼠游標移至矩形框內部區域時,其中的圖片會往上移動,若是滑鼠游標移出矩形框區域,則圖片會往下移動。


考慮以下的畫面,當滑鼠游標移至矩形框內部區域時,其中的圖片會往上移動,若是滑鼠游標移出矩形框區域,則圖片會往下移動。


現在嘗試實作這個效果,於網頁中配置以下的內容:
其中的標籤為矩形框,其識別 id 名稱為 cimg ,其中配置了
標籤,作為示範圖片來源。現在定義兩個 keyframe 動畫樣式,內容如下:
slide 與 slide_r 分別調整 margin-top 屬性來達到改變位置座標的效果。緊接著,設定
標籤的樣式如下:
其中設定初始的 margin-top 屬性與其它幾個基礎動畫樣式。另外定義兩個樣式類別,內容如下:
這兩個類別分別套用不同的樣式。最後於網頁載入完成時,註冊矩形框的 mouseover 與 mouseout 事件如下:
其中於 mouseover 與 mouseout 事件被觸發時,分別針對圖片套用不同的動畫樣式類別。
p.s.
本篇文章以 Chrome 為測試瀏覽器,不討論 IE 系列,Firefox 請將所有樣式屬性名稱字首 -webkit- 調整為 -moz- 。
相關文章
CSS3 動畫效果(1)
CSS3 動畫效果(2)- 控制 CSS 動畫
CSS3 動畫效果(3)- 動畫屬性設定範例
<body>
<div id="cimg"
style="margin:0 auto;
text-align:center;
width:280px;height:400px;
border:1px solid silver;">
<img id="cpaint" src="images/IMGP0811.JPG" height="180" />
</div>
</body>
其中的標籤為矩形框,其識別 id 名稱為 cimg ,其中配置了
@-webkit-keyframes slide {
from {margin-top:220px}
to {margin-top:0px}
}
@-webkit-keyframes slide_r {
from {margin-top:0}
to {margin-top:220px}
}
slide 與 slide_r 分別調整 margin-top 屬性來達到改變位置座標的效果。緊接著,設定
img#cpaint {
margin-top:220px;
-webkit-animation-duration:500ms;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:inherit;
-webkit-animation-fill-mode:forwards;
}
其中設定初始的 margin-top 屬性與其它幾個基礎動畫樣式。另外定義兩個樣式類別,內容如下:
.slide_ani {
-webkit-animation-name:slide ;
}
.slide_ani_r {
-webkit-animation-name:slide_r ;
}
這兩個類別分別套用不同的樣式。最後於網頁載入完成時,註冊矩形框的 mouseover 與 mouseout 事件如下:
window.onload = function () {
var nav = document.getElementById('cimg');
nav.onmouseover = function () {
document.getElementById('cpaint').className = 'slide_ani';
};
nav.onmouseout = function () {
document.getElementById('cpaint').className = 'slide_ani_r';
};
};
其中於 mouseover 與 mouseout 事件被觸發時,分別針對圖片套用不同的動畫樣式類別。
p.s.
本篇文章以 Chrome 為測試瀏覽器,不討論 IE 系列,Firefox 請將所有樣式屬性名稱字首 -webkit- 調整為 -moz- 。
相關文章
CSS3 動畫效果(1)
CSS3 動畫效果(2)- 控制 CSS 動畫
CSS3 動畫效果(3)- 動畫屬性設定範例
沒有留言:
張貼留言