CSS--使用Animate.css制作动画效果
生活随笔
收集整理的這篇文章主要介紹了
CSS--使用Animate.css制作动画效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一 使用Animate.css動(dòng)畫
// 通過@import引入外部CSS資源;
// 引入線上圖片及JS文件;
// 通過更改CSS類名生成不同類型的CSS3動(dòng)畫;
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) { // 定義事件函數(shù);
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類名生成相應(yīng)的動(dòng)態(tài)效果;
41 setTimeout(function(){window.lcation.},6000);
42 // 設(shè)置時(shí)間跳轉(zhuǎn);
43 });
44 </script>
45 </html>
二 自定義Animate.css動(dòng)畫
// 可以使用animate.css代碼作為基礎(chǔ),編寫自定義的動(dòng)畫效果;
1 @keyframes bounce { /*通過@keyframes規(guī)則,創(chuàng)建bounce動(dòng)畫;*/
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; /*調(diào)用bounce動(dòng)畫;*/
14 }
15 .animated {
16 animation-duration:3s; /*一個(gè)動(dòng)畫周期的時(shí)長;*/
17 animation-fill-mode:both; /*指定動(dòng)畫執(zhí)行之前之后的樣式;*/
18 }
19 .animated.infinite {
20 animation-iteration-count:infinite; /*定義動(dòng)畫播放的次數(shù);(n次/infinite無限次);*/
21 }
1 <img class="animated bounce infinite" src="http://www.gbtags.com/gb/laitu/150x150" alt="">
三 使用JavaScript控制動(dòng)畫
1 $('img').click(function(){ // 給Img元素綁定點(diǎn)擊事件;
2 var $this = $(this); // 鼠標(biāo)點(diǎn)擊之后添加相應(yīng)的動(dòng)畫類名;
3 $this.addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){
4 // 當(dāng)-webkit-animation動(dòng)畫結(jié)束之后會(huì)有一個(gè)webkitAnimationEnd事件;
5 // 當(dāng)one()方法監(jiān)聽到webkitAnimationEnd事件之后才執(zhí)行function函數(shù);one()方法只能執(zhí)行一次;
6 $this.removeClass(); // 清除相應(yīng)的動(dòng)畫類名;
7 })
8 });
總結(jié)
以上是生活随笔為你收集整理的CSS--使用Animate.css制作动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 马说原文及翻译拼音
- 下一篇： 怎么创建具有真实纹理的CG场景岩石？