js--匀速透明运动

最新推荐文章于 2021-12-19 21:46:21 发布

马晨宇

最新推荐文章于 2021-12-19 21:46:21 发布

阅读量186

点赞数

分类专栏： web前端小白 js

本文链接：https://blog.youkuaiyun.com/mcyhero/article/details/90749572

版权

web前端小白同时被 2 个专栏收录

19 篇文章

订阅专栏

16 篇文章

订阅专栏

*{ margin: 0;}
#box{ height: 100px;width: 100px;background: red; position: absolute; top: 200px; left: 200px; opacity: 0.3;}

<div id="box" onmouseover="boxmove(1)" onmouseout="boxmove(0)">	</div>

    let box =document.getElementById("box");
	let time = null;1
	function boxmove(a){
		clearInterval(time);
		time = setInterval(function(){
			let opc = a>getComputedStyle(box,false)["opacity"]?0.05:-0.05;
			box.style.opacity = Number(getComputedStyle(box,false)["opacity"])+opc;
		},50)
	}