abstract：<!DOCTYPE html> <html> <head> <title>照片墻(CSS3動(dòng)態(tài)效果)</title> <link rel="stylesheet" type="text/css" href="static/css/animate
<!DOCTYPE html>
<html>
<head>
<title>照片墻(CSS3動(dòng)態(tài)效果)</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(); //移除現(xiàn)有class
//隨機(jī)生成新的class
var rand=parseInt(Math.random()*10)
$(this).addClass('animated '+arr[rand])//:animated 選擇器選取當(dāng)前的所有動(dòng)畫元素。
})
</script>
</html>通過這個(gè)小案例，學(xué)會(huì)了animate.css的使用，線引進(jìn).css文件，然后通過類名使用圖片的動(dòng)畫效果，比較方便使用。
Correcting teacher：查無此人Correction time：2018-12-10 17:14:43
Teacher's summary：寫的不錯(cuò)，你是想表達(dá)，會(huì)引入目錄下的css文件嗎？ jquery做效果還是很方便的。