js放飞气球(Flying balloons)

最新推荐文章于 2025-03-27 15:50:07 发布

翻译最新推荐文章于 2025-03-27 15:50:07 发布 · 1.1k 阅读

文章标签：

#Flying balloons

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的互动式气球动画效果，气球会从底部升起并消失，用户点击气球可以触发新的气球出现，通过简单的JavaScript代码实现了动画效果的连续性和互动性。

<!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>