随机生成两个不同大小颜色的圆

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1000" height="600" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			
			private var Circle1:String;
			private var Circle2:String;

			private function init():void
			{
				this.circleCanvas.graphics.beginFill((Math.random()*111111),1);
				this.circleCanvas.graphics.drawCircle(100,300,Math.random()*100);
				this.circleCanvas.graphics.endFill();

				this.circleCanvas.graphics.beginFill((Math.random()*111111),1);
				this.circleCanvas.graphics.drawCircle(800,300,Math.random()*100);
				this.circleCanvas.graphics.endFill();

	
			}
			
			
		]]>
	</mx:Script>
	<mx:Canvas x="0" y="0"  id="circleCanvas" width="1000" height="600">
	</mx:Canvas>
	
	
	
	
</mx:Application>


 

HTML本身并不直接支持动画效果,比如烟花绽放。但是我们可以结合CSS和JavaScript来模拟这种动态效果。下面是一个简单的示例,它创建了一个div元素,并通过JavaScript控制其宽度、高度和背景颜色的变化,营造出类似烟花的效果: ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .firework { position: relative; display: inline-block; width: 50px; /* 烟花初始宽度 */ height: 50px; /* 烟花初始高度 */ animation: fireworks 3s ease-in-out infinite; /* 动画持续时间、缓动效果和无限循环 */ } @keyframes fireworks { 0% { width: 50px; height: 50px; background-color: #F00; } /* 开始时红色 */ 50% { width: 70px; height: 100px; background-color: #00F; } /* 中间阶段随机颜色 */ 100% { width: 50px; height: 50px; background-color: transparent; } /* 结束透明 */ } </style> </head> <body> <div class="firework"></div> <script> // 随机颜色生成函数 function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // 每隔一段时间改变烟花的颜色 setInterval(() => { document.querySelector('.firework').style.backgroundColor = getRandomColor(); }, 2000); // 每隔2秒更换一次颜色 </script> </body> </html> ``` 这个例子中,烟花会从红色开始,然后变宽、变高并变为随机颜色,最后恢复到原始尺寸。每两秒钟颜色会发生变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值