一 使用Animate.css動畫
// 通過@import引入外部CSS資源;
// 引入線上圖片及JS文件;
// 通過更改CSS類名生成不同類型的CSS3動畫;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHub地址:https://github.com/daneden/animate.css */ 8 /* Animate.css 演示地址:https://daneden.github.io/animate.css/ */ 9 10 @import url("http://cdn.gbtags.com/animate.css/3.1.1/animate.min.css"); 11 body { 12 background: #cfcfcf; 13 } 14 img { 15 position: absolute; 16 left: 50%; 17 top:50%; 18 margin-left: -100px; 19 margin-top: -100px; 20 width:200px; 21 height:200px; 22 } 23 24 </style> 25 <body> 26 <img src="http://www.gbtags.com/gb/networks/uploadimg/074627f0-0a62-4176-aa85-06a4364deeab.png" alt=""> 27 </body> 28 <script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> 29 <script> 30 function rock (x) { // 定義事件函數; 31 $('img').not('.center') 32 .addClass(x + ' animated') // 添加CSS類名; 33 .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend' 34 ,function(){ 35 $(this).removeClass(); 36 }); 37 }; 38 39 $(document).ready(function(){ 40 rock("rubberBand infinite"); // 添加CSS類名生成相應的動態效果; 41 setTimeout(function(){window.lcation.href = "http://www.kiklink.com"},6000); 42 // 設置時間跳轉; 43 }); 44 </script> 45 </html>
二 自定義Animate.css動畫
// 可以使用animate.css代碼作為基礎,編寫自定義的動畫效果;
1 @keyframes bounce { /*通過@keyframes規則,創建bounce動畫;*/ 2 0%,20%,50%,80%,100% { 3 transform:translateY(0); 4 } 5 40% { 6 transform:translateY(-30px); 7 } 8 60% { 9 transform:translateY(-15px); 10 } 11 } 12 .bounce { 13 animation-name:bounce; /*調用bounce動畫;*/ 14 } 15 .animated { 16 animation-duration:3s; /*一個動畫周期的時長;*/ 17 animation-fill-mode:both; /*指定動畫執行之前之后的樣式;*/ 18 } 19 .animated.infinite { 20 animation-iteration-count:infinite; /*定義動畫播放的次數;(n次/infinite無限次);*/ 21 }
1 <img class="animated bounce infinite" src="http://www.gbtags.com/gb/laitu/150x150" alt="">
三 使用JavaScript控制動畫
1 $('img').click(function(){ // 給Img元素綁定點擊事件; 2 var $this = $(this); // 鼠標點擊之后添加相應的動畫類名; 3 $this.addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){ 4 // 當-webkit-animation動畫結束之后會有一個webkitAnimationEnd事件; 5 // 當one()方法監聽到webkitAnimationEnd事件之后才執行function函數;one()方法只能執行一次; 6 $this.removeClass(); // 清除相應的動畫類名; 7 }) 8 });