代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Animate Demo</title> <link rel="stylesheet" type="text/css" href="animate.min.css"> <style type="text/css"> div{ width:200px; height:150px; background-color:blue; } </style> </head> <body> <div class="animated bounceInLeft"></div> <div class="animated bounceOut"></div> <div class="animated fadeIn"></div> <div class="animated flash"></div> <div class="animated flipInX"></div> <div class="animated hinge"></div> <div class="animated rotateInDownLeft"></div> <div class="animated swing"></div> <div class="animated tada"></div> <div class="animated wobble"></div> <div id="ani"></div> <script src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ $("#ani").addClass("animated flipInY"); }); </script> </body> </html>
课后作业:
1.复制上述代码,预览查看效果。
2.读懂上述代码。
第三方CSS动画库CSS文件下载地址:
https://blog-static.cnblogs.com/files/exesoft/animate.min.css