animate.css动画

Original 2018-11-15 22:38:07 267
abstract:<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>手风琴</title>   <link rel="stylesheet&q
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>手风琴</title>
  <link rel="stylesheet" href="static/css/style4.css">
  <link rel="stylesheet" href="static/css/animate.min.css">
  <link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon">
  <script type="text/javascript" src="static/js/jquery.js"></script>
  <style>
  *{margin: 0;padding: 0}
  .box{width: 1500px; margin: 50px auto; }
  img{width: 300px; height: 200px;margin: 10px;}
  </style>
</head>
<body>

<div>
  
  <img src="static/images/1.jpg" alt="">
  <img src="static/images/2.jpg" alt="">
  <img src="static/images/3.jpg" alt="">
  <img src="static/images/4.jpg" alt="">
  <img src="static/images/5.jpg" alt="">
  <img src="static/images/6.jpg" alt="">
  <img src="static/images/7.jpg" alt="">
  <img src="static/images/8.jpg" alt="">
  <img src="static/images/9.jpg" alt="">
  <img src="static/images/10.jpg" alt="">
  <img src="static/images/11.jpg" alt="">
  <img src="static/images/12.jpg" alt="">
  <img src="static/images/13.jpg" alt="">
  <img src="static/images/14.jpg" alt="">
  <img src="static/images/15.jpg" alt="">
  <img src="static/images/16.jpg" alt="">

</div>

<script type="text/javascript">
  var arr = ['bounce','flash','rubberBand','swing','jello','bounceOut','bounceOutRight','zoomOutUp','jackInTheBox','rollIn','rollOut','zoomOutLeft'];

$("img").on('click',function(){
      $('img').removeClass();
     var rand=parseInt(Math.random()*12)
     $(this).addClass('animated '+arr[rand])
})

</script>


</body>
</html>


Correcting teacher:灭绝师太Correction time:2018-11-16 09:16:36
Teacher's summary:一晚上完成这么多作业,都理解没有啊?不要心急奥?

Release Notes

Popular Entries