通過 onClick 事件調用 CSS3 動畫

CSS 中編寫動畫代碼比在jquery 中更容易但是 CSS 的局限性在於它不是交互式的。不能像使用 jquery 那樣在單擊按鈕時調用它。但是有一個技巧可以將 Javascript 與 CSS 混合併使用 onclick javascript 函數調用 CSS 動畫函數。

在這裡,我們將嘗試通過單擊按鈕將圖像水平移動到遠處。這不是一個棘手的代碼。隨意複製並粘貼以下代碼。開始了!

首先是樣式表:


.classname
{
width:320px;
height:200px;
background:red;
animation:anyname 2s;
-moz-animation:anyname 2s; /* Firefox */
-webkit-animation:anyname 2s; /* Safari and Chrome */
animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;
animation-timing-function:linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}
@keyframes anyname
{
from {margin-left:0px;}
to {margin-left:600px;}
}
@-moz-keyframes anyname /* Firefox */
{
from {margin-left:0px;}
to {margin-left:600px;}
}
@-webkit-keyframes anyname /* Safari and Chrome */
{
from {margin-left:0px;}
to {margin-left:600px;}
}

Javascript:

相關問題  Hammerhead True Wireless Pro 發布 – 認識來自 Razer 的全新 TWS


function ani(){
document.getElementById('something').className ='classname';
}

最後是 HTML:它是如何工作的:

HTML 標記了一張圖片,然後點擊按鈕,ani()函數運行,這是在上面寫的腳本中定義的。在函數 ani() 中,它被指示獲取id=”something”的元素在 HTML 部分,有一個具有該 id 的分區,因此它被腳本調用。現在,代碼將一個名為classname 的類插入到上面在 CSS 中定義的分區中,其中包含有關動畫的所有信息。因此,只要單擊按鈕,就會調用函數 ani() 並將具有動畫屬性的類調用到 id=”something” 的分區中。

Share This Post

Post Comment