摘要:<!DOCTYPE html> <html> <head> <title>照片墙(CSS3动态效果)</title> <link rel="stylesheet" type="text/css" href="static/css/animate
<!DOCTYPE html> <html> <head> <title>照片墙(CSS3动态效果)</title> <link rel="stylesheet" type="text/css" href="static/css/animate.min.css"> <link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon" /> <script type="text/javascript" src="static/js/jquery.js"></script> <style type="text/css"> *{margin: 0px;padding: 0px;} .box{width: 1500px;margin: 50px auto;} img{width: 300px;height: 200px;margin: 10px;} </style> </head> <body> <div class="box"> <img src="static/images/1.jpg"/> <img src="static/images/2.jpg"/> <img src="static/images/3.jpg"/> <img src="static/images/4.jpg"/> <img src="static/images/5.jpg"/> <img src="static/images/6.jpg"/> <img src="static/images/7.jpg"/> <img src="static/images/8.jpg"/> <img src="static/images/9.jpg"/> <img src="static/images/10.jpg"/> <img src="static/images/11.jpg"/> <img src="static/images/12.jpg"/> <img src="static/images/13.jpg"/> <img src="static/images/14.jpg"/> <img src="static/images/15.jpg"/> <img src="static/images/16.jpg"/> </div> </body> <script type="text/javascript"> var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp'] $('img').on('click',function(){ $('img').removeClass(); //移除现有class //随机生成新的class var rand=parseInt(Math.random()*10) $(this).addClass('animated '+arr[rand])//:animated 选择器选取当前的所有动画元素。 }) </script> </html>
通过这个小案例,学会了animate.css的使用,线引进.css文件,然后通过类名使用图片的动画效果,比较方便使用。
批改老师:查无此人批改时间:2018-12-10 17:14:43
老师总结:写的不错,你是想表达,会引入目录下的css文件吗? jquery做效果还是很方便的。