在CSSViết mã hoạt ảnh比在jqueryDễ dàng hơn.Nhưng hạn chế của CSS là không có tính tương tác.Nó không thể được gọi khi nút được nhấp như sử dụng jquery.Nhưng có một mẹo là trộn Javascript và CSS và sử dụng hàm onclick javascript để gọi hàm CSS animation.
Đầu tiên là bảng định kiểu:
.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:
function ani(){
document.getElementById('something').className ='classname';
}
Cuối cùng, HTML:Làm thế nào nó hoạt động:
HTML đã đánh dấu một bức ảnh, sau đó nhấp vào nút,ani ()hàm sốChạy, được định nghĩa trong tập lệnh được viết ở trên.Trong hàm ani (), nó được hướng dẫn để lấyid = ”cái gì đó”Các yếu tố.Trong phần HTML, có một phân vùng với id đó, vì vậy nó được gọi bằng script.Bây giờ, mã sẽ có một tệp có tênlớp của tên lớpChèn vào phần được định nghĩa trong CSS ở trên, phần này chứa tất cả thông tin về hoạt ảnh.Do đó, miễn là nút được nhấp, hàm ani () được gọi và lớp có thuộc tính hoạt ảnh được gọi vào phân vùng có id = ”something”.
