漂浮气球
1. 页面样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Floating Balloons!?!</title>
<link rel="stylesheet"href="./styleFB.css">
</head>
<body>
<divclass="ballonBox" id="ballonBox"></div>
<scriptsrc="scriptFB.js"></script>
</body>
</html>
2. css样式
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
}
.ballonBox{
height: 100vh;/*视窗100%*/
padding: 13px;
box-sizing:border-box;
overflow: hidden;
}
.ballon{
width: 108px;
height: 128px;
border-radius: 77% 77%72% 72%;
position: relative;
float: left;
}
.ballon:before{
content: "";
display: block;
width: 1px;
height: 98px;
background:rgba(38,21,21,1.00);
position: absolute;
top: 128px;
left: 54px;
}
.ballon:after{
content: "▲";
display: block;
position: absolute;
top: 122px;
left: 47px;
}
/*关键帧*/
@keyframes floating{
0%{
transform:translateY(100vh);
opacity: 1;
}
100%{
transform:translateY(-300vh);
opacity: 0;
}
}
3. js样式
// JavaScript Document
window.onload = function(){
//获取元素
var qBallonBox =document.getElementById("ballonBox");
//创建元素
for(vari=0;i<100;i++){
var oDiv =document.createElement("div");
//添加class属性
oDiv.className= "ballon";
//设置div的样式，设置行内样式
oDiv.style.cssText= setStyle();
//添加元素
qBallonBox.appendChild(oDiv);
}
}
//设置元素样式的函数
function setStyle(){
//随机数[0,1)->[0,256)->[0-255]
//随机数[0,1)->->[5,11)[5,10]->
//Math.floor(Math.random()*(Max-Min+1))+Min
//[0,1)->[0,6)->[5,11)[5-10]
var r =Math.floor(Math.random()*256);//[0,255]
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+23);//[23,43]
var ml =Math.floor(Math.random()*21+23);
var rtStyle ="background:rgba("+r+","+g+","+b+",1);"+
"box-shadow:-9px -9px 12pxrgba("+(r-33)+","+(g-33)+","+(b-33)+",1)inset;"+
"color:rgba("+r+","+g+","+b+",1);"+
"animation:floating "+t+"s ease infinite;"+
"margin:"+mt+"px 0px 0px "+ml+"px;";
return rtStyle;
}
效果：
扫一扫
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
