javascript鼠标经过方块消失出现图片

javascript鼠标经过方块消失出现图片

html:

<div id="wrap">
		
</div>

css:

<style>
*{
	margin: 0;
	padding: 0;
	/* 让 盒子 转成 怪异盒模型*/
	box-sizing: border-box;
}
body{
	background: #000;
}
#wrap{
	width: 600px;
	height: 375px;
	margin: 50px auto;
	background-image: url(./img/1.jpg);
	background-repeat: no-repeat;
	background-position: left center;
}
.box{
	width: 75px;
	height: 75px;
	background: #F77128;
	border: 1px solid #fff;
	line-height: 45px;
	text-align: center;
	/*透明度*/
	opacity: 0.9;
	/*浮动*/
	float: left;
	/*css3的过渡动画*/
	transition: all 0.5s ease-out;
}
</style>

javascirpt:

<script>
	// 1.获取对象（抓取元素）
	var odiv = document.getElementById("wrap");
	console.log(odiv);
	// 2.我们希望 出现 40个 类目叫.box div盒子，这些盒子 存放在 #wrap
	for(var i=0; i<40; i++){
		odiv.innerHTML += '<div class="box"></div>';
	}


	// 3.获取对象（抓取很多盒子 类目.box 小盒子，全部抓取到）
	var odivs = odiv.getElementsByTagName('div');
	console.log(odivs);
	// 4.我们希望 每个.box小盒子 身上都产生一个过渡动画
	for(var i=0; i<40; i++){
		odivs[i].onmouseover = function(){
		// (1) 希望盒子 旋转1周并且 比例缩放为0
		this.style.transform = 'rotate(360deg) scale(0)';
		// (2) 希望盒子 的透明度变成0
		this.style.opacity = 0;
		}
	}
</script>