首頁 > 開發者 > JavaScript
CSS--使用Animate.css製作動畫效果，css--animate.css
一 使用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>
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="">
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 });
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
