养成记录博客的好习惯。
- 一、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 100%; 5 position: fixed; 6 z-index: 1; 7 margin-top: 0px; 8 top: 0px; 9 } 10 #loading-center{ 11 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 200px; 21 margin-top: -100px; 22 margin-left: -100px; 23 } 24 .object{ 25 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% { 100px; height:100px; left: 48px; top: 48px; } 54 } 55 @keyframes second_object { 56 100% { 100px; height:100px; left: 48px; top: 48px; } 57 } 58 59 60 @-webkit-keyframes third_object { 61 100% { 150px; height:150px; left: 23px; top: 23px;} 62 } 63 @keyframes third_object { 64 100% { 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