用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>

巴特西

用opcity模拟zindex渐变的效果

github地址:

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

最新文章

热门文章