js实现气球漂浮

最新推荐文章于 2023-03-06 20:05:54 发布

weixin_57770064

最新推荐文章于 2023-03-06 20:05:54 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/weixin_57770064/article/details/117663548

版权

CSS3动画关键帧 JavaScript 动态生成气球效果

关键词由CSDN通过智能技术生成

开发工具与关键技术：

Adobe Dreamweaver CC 2019

Htmml部分：

<body>
	<div class="ballonBox" id="ballonBox">
	</div>
</body>

css部分：

<style>
		*{
			margin: 0px;
		}
		.ballonBox{
			height: 100vh;
			padding: 10px;
			box-sizing: border-box;
			overflow: hidden;
		}
		.ballon{
			width: 105px;
			height: 125px;
			border-radius: 75% 75% 70% 70%;
			position: relative;
			/*关键帧调用*/
			animation: a 16s ease infinite;
			margin: 20px 0px 0px 40px;
			float: left;
		}
		.ballon:before{
			content: "";/*插入内容为空*/
			display: block;/*块级元素展示出来*/
			width: 1px;
			height: 75px;
			background: rgba(100,65,23,1);
			position: absolute;
			left: 52px;
			top: 125px;
		}
		.ballon:after{
			content:"▲";
			display: block;
			position: absolute;
			top: 120px;
			left: 44px;
		}
		@keyframes a{
			0%{
				transform: translateY(100vh);
				opacity: 1;
			}
			100%{
				transform: translateY(-300vh);
				opacity: 0;
			}
		}
	</style>

js部分：

<script>
	window.onload = function(){
		//获取元素
		var oballonBox = document.getElementById("ballonBox");
		//在页面上放一百个气球
		for(var i=0; i<100; i++){
			//创建元素
			var odiv = document.createElement("div");
			//为元素添加属性class
			odiv.className = "ballon";
			//设置元素样式
			odiv.style.cssText = setStyle();
			//将odiv添加到父元素oballonBox中
			oballonBox.appendChild(odiv);
		}
	}
	//设置元素样式的函数
	function setStyle(){
		
		var r = Math.floor(Math.random()*256);
		var g = Math.floor(Math.random()*256);
		var b = Math.floor(Math.random()*256);
		var t = Math.floor(Math.random()*6)+5;
		var mt = Math.floor(Math.random()*21+20);
		var ml = Math.floor(Math.random()*21+20);
		
		var rtStyle = 'background: rgba('+r+','+g+','+b+',1);'+
					  'box-shadow: -10px -10px 7px hsla('+(r-20)+','+(g-20)+','+(b-20)+',1)inset;'+
					  'color:rgba('+r+','+g+','+b+',1);'+
					  'animation: a '+t+'s ease infinite;'
					  'margin: '+mt+'px 0px 0px '+ml+'px;';
		return rtStyle;
	}
</script>