js点击透明

最新推荐文章于 2023-09-21 21:09:52 发布

林剑南

最新推荐文章于 2023-09-21 21:09:52 发布

阅读量775

点赞数

CC 4.0 BY-SA版权

分类专栏： js案例文章标签： js点击透明

本文链接：https://blog.youkuaiyun.com/u014414110/article/details/88891933

js案例专栏收录该内容

35 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>