css3完成照片墙动画效果

原创 2018-12-11 03:42:57 212
摘要:html代码<ul class="pic">     <li><img src="static/images/football1.jpg" alt=""></li>     <

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>

效果图

QQ图片20181114103819.png

批改老师:天蓬老师批改时间:2018-12-11 09:02:02
老师总结:现在有一个趋势, 之前很多必须要通过javascript来实现的功能 ,越来越多的直接通过css来实现了

发布手记

热门词条