js点击透明

CSS动画渐变

最新推荐文章于 2020-06-03 20:16:04 发布

原创最新推荐文章于 2020-06-03 20:16:04 发布 · 790 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js点击透明

js案例专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用纯CSS实现的动画效果案例，通过JavaScript控制元素透明度实现渐变动画。具体展示了如何设置div元素的宽高及背景颜色，并通过JavaScript定时器调整透明度，实现了从完全可见到逐渐透明的效果。

div{
			width: 300px;
			height: 300px;
			background-color: blueviolet;
		
		}
		
	</style>
	<body>
		
		<div id="dv"></div>
		<input type="button"  value="渐变" id="box"/>
	</body>
	<script>
		function mid(id){
			return document.getElementById(id)
		}
		
	
		mid("box").function(){
				var opacity=10;
			var timeId=setInterval(function(){
				
				opacity--;
				if (opacity<=0) {
					clearInterval(timeId);
				}
		mid("dv").style.opacity=opacity/10;
			},200);
			
		
		
		}
		
	</script>