几个动画库

养成记录博客的好习惯。

  • 一、animate.css

    1、官网地址：animate.css ，支持IE8以上。可以直接选择样式查看，淡入淡出等，涵盖范围广大


    2、使用起来也很方便

    　　a、首先引入animate css文件　　

    <head>
  <link rel="stylesheet" href="animate.min.css">
</head>

    　　b、给指定的元素加指定的样式名（这里用了fadeInRight这个效果，animated是必选的）。

    <section class="animated fadeInRight">

    　　c、可以通过javascript或者JQuery动态添加，如

    1 $('#yourElement').addClass('animated bounceOutLeft');

    可参考http://www.jq22.com/jquery-info819

  • 二、30-css-page-preload-animations

    1、演示地址：http://simbyone.com/demo/30-css-page-preload-animations/。这个可以用在loading的时候，效果还是挺好看的，项目里在用。

    2、html根据每个demo略有不同，不过每个demo会有对应的html文件。我的做法是把html部分放到页面里然后window.onload的时候关闭，下面举栗demo3，效果如下



    html部分
    <div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="first_object"></div>
            <div class="object" id="second_object"></div>
            <div class="object" id="third_object"></div>
        </div>
    </div>
</div>

    css部分

      1 #loading{
  2     background-color: #ffd34e;
  3     height: 100%;
  4     width: 100%;
  5     position: fixed;
  6     z-index: 1;
  7     margin-top: 0px;
  8     top: 0px;
  9 }
 10 #loading-center{
 11     width: 100%;
 12     height: 100%;
 13     position: relative;
 14     }
 15 #loading-center-absolute {
 16     position: absolute;
 17     left: 50%;
 18     top: 50%;
 19     height: 200px;
 20     width: 200px;
 21     margin-top: -100px;
 22     margin-left: -100px;
 23 }
 24 .object{
 25     width: 50px;
 26     height: 50px;
 27     background-color: rgba(255,255,255,0);
 28     margin-right: auto;
 29     margin-left: auto;
 30     border: 4px solid #FFF;
 31     left: 73px;
 32     top: 73px;
 33     position: absolute;
 34 }
 35 
 36 #first_object{
 37     -webkit-animation: first_object_animate 1s infinite ease-in-out;
 38     animation: first_object_animate 1s infinite ease-in-out;
 39 }
 40     
 41 #second_object{
 42     -webkit-animation: second_object 1s forwards, second_object_animate 1s infinite ease-in-out;
 43     animation: second_object 1s forwards, second_object_animate 1s infinite ease-in-out;
 44     }    
 45 #third_object{
 46     -webkit-animation: third_object 1s forwards, third_object_animate 1s infinite ease-in-out;
 47     animation: third_object 1s forwards, third_object_animate 1s infinite ease-in-out;
 48     }    
 49     
 50     
 51     
 52 @-webkit-keyframes second_object {
 53  100% { width: 100px; height:100px; left: 48px; top: 48px; }
 54 }        
 55 @keyframes second_object {
 56 100% { width: 100px; height:100px; left: 48px; top: 48px; }
 57 }
 58 
 59 
 60 @-webkit-keyframes third_object {
 61  100% { width: 150px; height:150px; left: 23px; top: 23px;}
 62 }        
 63 @keyframes third_object {
 64 100% { width: 150px; height:150px; left: 23px; top: 23px;}
 65 }
 66 
 67 
 68 
 69 
 70 
 71 
 72 @-webkit-keyframes first_object_animate {
 73   0% { -webkit-transform: perspective(100px); }
 74   50% { -webkit-transform: perspective(100px) rotateY(-180deg); }
 75   100% { -webkit-transform: perspective(100px) rotateY(-180deg) rotateX(-180deg); }
 76 }
 77 
 78 @keyframes first_object_animate {
 79   0% { 
 80     transform: perspective(100px) rotateX(0deg) rotateY(0deg);
 81     -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg); 
 82   } 50% { 
 83     transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
 84     -webkit-transform: perspective(100px) rotateX(-180deg) rotateY(0deg) ;
 85   } 100% { 
 86     transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
 87     -webkit-transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
 88   }
 89 }
 90 
 91 
 92 
 93 @-webkit-keyframes second_object_animate {
 94   0% { -webkit-transform: perspective(200px); }
 95   50% { -webkit-transform: perspective(200px) rotateY(180deg); }
 96   100% { -webkit-transform: perspective(200px) rotateY(180deg) rotateX(180deg); }
 97 }    
 98 
 99 
100 @keyframes second_object_animate {
101   0% { 
102     transform: perspective(200px) rotateX(0deg) rotateY(0deg);
103     -webkit-transform: perspective(200px) rotateX(0deg) rotateY(0deg); 
104   } 50% { 
105     transform: perspective(200px) rotateX(180deg) rotateY(0deg);
106     -webkit-transform: perspective(200px) rotateX(180deg) rotateY(0deg) ;
107   } 100% { 
108     transform: perspective(200px) rotateX(180deg) rotateY(180deg);
109     -webkit-transform: perspective(200px) rotateX(180deg) rotateY(180deg);
110   }
111 }
112 
113 
114 
115 
116 @-webkit-keyframes third_object_animate {
117   0% { -webkit-transform: perspective(300px); }
118   50% { -webkit-transform: perspective(300px) rotateY(-180deg); }
119   100% { -webkit-transform: perspective(300px) rotateY(-180deg) rotateX(-180deg); }
120 }
121 
122 @keyframes third_object_animate {
123   0% { 
124     transform: perspective(300px) rotateX(0deg) rotateY(0deg);
125     -webkit-transform: perspective(300px) rotateX(0deg) rotateY(0deg); 
126   } 50% { 
127     transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
128     -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(0deg) ;
129   } 100% { 
130     transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
131     -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
132   }
133 }

    js部分（自己写的，有其他方式请指出）

    window.onload = function() {
    $("#loading").fadeOut();
};

     

  • 三、magic.css

    1、演示地址 http://www.yyyweb.com/demo/inner-show/magic-css.html

    2、感觉可以做点击呀hover的特效，使用类似animate.css。然后发现这个→http://www.yyyweb.com/350.html，Mark
posted @ 2017-03-15 17:35  amzjj  阅读(283)  评论(0)  编辑  收藏  举报