css3动画照片墙,css3照片墙动态效果

摘要：本次实战主要完成了照片墙动态效果的功能，通过引入annimate.css，在图片的点击事件时，清除图片之前的点击效果，再定义一个数组，用于存放动态效果的class，同时获取随机数，再通过addClass的方法把动态的添加动画效果。本次实战使用了es6的let声明变量和数组方法，也使用了额es6的拼接字符串的方法。实现代码如下：html>

本次实战主要完成了照片墙动态效果的功能，通过引入annimate.css，在图片的点击事件时，清除图片之前的点击效果，再定义一个数组，用于存放动态效果的class，同时获取随机数，再通过addClass的方法把动态的添加动画效果。

本次实战使用了es6的let声明变量和数组方法，也使用了额es6的拼接字符串的方法。实现代码如下：html>

照片墙动态效果

*{margin: 0px;padding: 0px;}

.box{width: 1300px;margin: 50px auto;}

img{width: 300px;height: 200px;margin: 15px;}

 

 

 

let arr=['bounce','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp'];//定义数组，用于存放动态效果的class类

$("img").click(function(){

$(this).removeClass();//先清空之前的动画效果

var radom=Math.floor(Math.random() * 7); //获取0-6的随机整数

$(this).addClass(`animated ${arr[radom]}`);//添加数组中的随机动态效果

});

jpg:

2.jpg

3.jpg

批改老师：灭绝师太批改时间：2018-11-21 16:03:14

老师总结：非常好，把学到的东西放到自己的案例中，非常ok!继续