js放飞气球(Flying balloons)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>play balloons</title>
<style type="text/css">
*{
/*设置外边距*/
margin: 0px;
/*设置内边距*/
padding:0px;
/*设置背景颜色*/
color: gray;
}
body{
overflow:hidden;
background: gray;
}
.balloon{
/*设置布局方式*/
position:absolute;
/*设置块的宽和高*/
width:160px;
height:160px;
/*设置背景颜色*/
background:#fafaf9;
/*自定义属性*/
-webkit-speed:0;
/*形成圆角*/
border-radius: 160px 160px 64px 160px;
/*旋转*/
-ms-transform:rotate(45deg); /* IE 9 */
/*-moz-transform:rotate(45deg); /* Firefox 火狐*/
-webkit-transform:rotate(45deg); /* Safari 和 Chrome 谷歌*/
-o-transform:rotate(45deg); /* Opera 歌剧*/
/*transfrom:rotate(90deg);*/
box-shadow: -8px -8px 80px -8px #873940 inset;
}
.balloon:after{/*伪类制作
/*设置布局*/
position:absolute;
/*确定位置*/
bottom:-10px;
left:150px;
/*设置大小*/
width:0px;
height:0px;
content:'';
/*设置边的宽度*/
border:10px solid ;
/*设置边的颜色*/
border-color: transparent transparent orange transparent;
/*画弧*/
border-radius:20px;
/*旋转*/
transform:rotate(-45deg);
}
</style>
</head>
<body>




<script>
var num;
var Ww=window.innerWidth;
var Wh=window.innerHeight;
var bz=160;
var i=0;
init(10);
window.setInterval(move,50);
function init(num){//初始化创造气球集群
var fragment=document.createDocumentFragment();
for(i=0;i<num;i++) {
var p=document.createElement("div");
p.classList.add('balloon');
p.style.top=Wh-bz+160+'px';
p.style.left=Math.floor(Math.random()*Ww)+'px';
fragment.appendChild(p);
p.speed=Math.floor(Math.random()*10+1);
}
document.body.appendChild(fragment);
}//setinterval:循环
//settimeout：延迟
//request
function move(){
var balloons=document.querySelectorAll('.balloon');
//document.Lienter
for(var i=0;i<balloons.length;i++){
balloons[i].style.top=balloons[i].offsetTop-balloons[i].speed-1+'px';
if(balloons[i].offsetTop<-160)
{
balloons[i].parentNode.removeChild(balloons[i]);
init(1);
}
}
}
function boom(){
document.addEventListener(
'click',function(e){
if(e.target.className.toLowerCase()==='balloon')
{
var ele=e.target;
//删除节点
ele.parentNode.removeChild(ele);
init(1);
}
}
)
}
boom();
</script>
</body>

</html>

js放飞气球(Flying balloons)相关推荐

js放飞气球动画js特效
下载地址 js放飞气球动画特效,js气球飞走特效 dd:
android气球上升的属性动画,html5 canvas告白气球上升背景动画特效
特效描述:html5 canvas 告白气球上升背景动画特效.html5基于canvas绘制各种卡通气球上升动画.告白气球背景动画特效. 代码结构 1. 引入JS 2. HTML代码 Balloon ...
python打气球小游戏（一）
欢迎加入我们卧虎藏龙的python讨论qq群:729683466 导语上期给大家讲了一个<推箱子>游戏这是是正宗的pygame模块开发的这一期给大家介绍一个非常好玩的模块tu ...
python《打气球》小游戏（二）
欢迎加入我们卧虎藏龙的python讨论qq群:729683466 导语 ss 学会了画气球现在,我们可以学一学打气球以及生成五颜六色的气球最后还给大家准备了一道课后题哦代码及相关资源获取 1 ...
地铁为什么禁止携带气球？
各式各样的气球是宝爸宝妈们的"哄娃神器".然而,每次在地铁站气球总会被工作人员果断拦下,你们知道这是为什么吗? 一．气球里的气体不好判断气球都是充好气的成品,安检人员无法判断里面 ...
【气球】关于气球动力与控制的设想
作为探空气球,最重要的是气球.然而气球作为运载载具可分为物理方式与化学方式. 首先我们可以列一下各自的优缺点进行对比. 物理方式: 原理:密闭气球里充密度比空气小的安全气体(惰性气体),利用空气的浮力 ...
谷歌「气球互联网」项目，烧钱9年，难逃关停命运
子豪发自凹非寺量子位报道 | 公众号 QbitAI 终于,在多年烧钱却仍找不到商业化途径之后,谷歌曾备受瞩目的「气球互联网」项目被宣告关闭. 最近,谷歌母公司Alphabet以一篇博文--&q ...
新概念英语第二册61-96课（转）
Lesson 61 Trouble with the Hubble哈勃望远镜的麻烦 1.哈勃望远镜The Hubble telescope被发射到太空was launched into spac ...
好的开始是成功的一半 -- 怎么做好一个项目的启动...
俗话说号的开始是成功的一半,管理一个项目也同样是这样,很多的时候,项目运行中的遇到的问题往往就是在填项目启动时所埋的坑.一个好的项目启动能极大的提高项目成功的概率,避免项目过程中很多的风险.这里我简单 ...

js放飞气球(Flying balloons)

js放飞气球(Flying balloons)相关推荐

最新文章

热门文章