用opcity模拟zindex渐变的效果

github地址:

    https://github.com/echoorx/opacity-Gradient

zindex好像不能渐变改变，所以用opcity来模拟

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			position: absolute;	
			top: 0;
		}
		.big{
			background-color: red;
		}
		.small{
			background-color: green;
			z-index: 1;
			opacity: 0;
		}
		#btn{
			margin-top: 200px;
		}
	</style>
</head>
	<div class="big"></div>
	<div class="small"></div>
	<input id="btn" value="1111" type="button">
<body>
	<script>
		var btn = document.querySelector('#btn');
		var small = document.querySelector('.small')
		btn.addEventListener('click',function(){
			var timer = setInterval(function(){
				var opc = window.getComputedStyle(small, null)["opacity"];
				opc = opc * 100 + 2;
				opc /= 100;
				small.style.opacity = opc;
				if(opc == 1){
					clearInterval(timer)
				}
			},10)
		})
	</script>
</body>
</html>

posted on 2017-12-20 13:36  ouruixi  阅读(214)  评论(0)    收藏  举报

导航