网站效果：
http://www.fengzhao.icu/love_balloon/html/%E5%91%8A%E7%99%BD.html
效果图:
源码Demo:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>告白气球</title><style type="text/css">body,html{width: 100%;height: 100%;background-color: #000;}div{position: absolute;border-radius: 50%;}#txt{position: relative;width: 400px;height: 100px;margin: 300px 600px;font-size: 50px;z-index: 1000;}</style></head><body><div id="txt"><p>老婆我爱你!</p></div><audio src="http://www.fengzhao.icu/love_balloon/audio/%E5%91%A8%E6%9D%B0%E4%BC%A6%20-%20%E5%91%8A%E7%99%BD%E6%B0%94%E7%90%83.mp3" autoplay="true" loop="true" hidden="true" id="vd"></audio><script type="text/javascript">//要使用面向对象的思维来开发//定义一个气球对象function Balloon(pic){//盒子this.div=document.createElement("div");//初始位置this.left = randomRange(0,1000);this.top = randomRange(0,600);//背景颜色if(pic == null){this.bg = randomColor();//0-255//半径 范围20~80this.r=Math.random()*60+40;//运行速度this.speedX = randomRange(-5,5);this.speedY = randomRange(-5,5);}else{this.bg = pic;this.r=80;//运行速度this.speedX = randomRange(-3,3);this.speedY = randomRange(-3,3);}}//绘制气球 原型概念Balloon.prototype.drawBalloon = function(parent){this.parent = parent;var style = this.div.style;this.div.style.width = this.r * 2 + "px";this.div.style.height = this.r * 2 + "px";style.left = this.left + "px";style.top = this.top + "px";style.background = this.bg;parent.appendChild(this.div);}//让气球动起来Balloon.prototype.run = function(){//获取父容器宽高var maxLeft = this.parent.offsetWidth - this.r * 2;var maxTop = this.parent.offsetHeight - this.r * 2;var ts = this;//定时器setInterval(function(){//获取左边移动的距离var left = ts.div.offsetLeft + ts.speedX;//获取上边移动的距离var top = ts.div.offsetTop + ts.speedY;//判断边界位置if(left <= 0){left = 0;ts.speedX *= -1;}if(top <= 0){top = 0;ts.speedY *= -1;}if(left >= maxLeft){left = maxLeft;ts.speedX *= -1;}if(top >= maxTop){top = maxTop;ts.speedY *= -1;}//开始移动ts.div.style.left = left + "px";ts.div.style.top = top + "px";},20);}//封装一个指定范围的随机函数function randomRange(min,max){return Math.random()*(max-min)+min;}//封装随机颜色function randomColor(){var r = randomRange(0,255);var g = randomRange(0,255);var b = randomRange(0,255);var a = randomRange(0,1);return "rgba("+r+","+g+","+b+","+a+")";}</script><script type="text/javascript">//照片var n = 1;var t =setInterval(function(){var b = new Balloon("url(../img/0"+n+".png)");//绘制气球b.drawBalloon(document.body);//气球动起来b.run();n++;if(n>6){clearInterval(t);}},3000);//气球for (var i =0; i<=30;i++){//创建气球对象var b = new Balloon();//绘制气球b.drawBalloon(document.body);//气球动起来b.run();}</script><script>function toggleSound() {var music = document.getElementById("vd");//获取ID if (music.paused) { //判读是否播放 music.paused=false;music.play(); //没有就播放 } }setInterval("toggleSound()",1);</script></body></html>
公众号：
微信
