css3完成照片墙动画效果

html代码

<ul class="pic">
    <li><img src="static/images/football1.jpg" alt=""></li>
    <li><img src="static/images/football2.jpg" alt=""></li>
    <li><img src="static/images/football3.jpg" alt=""></li>
    <li><img src="static/images/football4.jpg" alt=""></li>
    <li><img src="static/images/football5.jpg" alt=""></li>
    <li><img src="static/images/football6.jpg" alt=""></li>
    <li><img src="static/images/football7.jpg" alt=""></li>
    <li><img src="static/images/football8.jpg" alt=""></li>
    <li><img src="static/images/football9.jpg" alt=""></li>
    <li><img src="static/images/football10.jpg" alt=""></li>
</ul>

css代码

<style type="text/css">
    li{margin:10px;float:left;list-style: none;}
    li,img{width: 200px;height: 250px;}
</style>

js代码

<script type="text/javascript">
    let randCss = ['bounce','flash','pulse','rubberBand','shake','swing','tada','wobble','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp'];
    $('.pic img').on('click',function(){
       $(this).removeClass();
       let randNum = parseInt(Math.random()*randCss.length);
       $(this).addClass('animated '+randCss[randNum]);
    });
</script>

效果图