生活有点枯燥，还是要找点有趣的事情来做。
之前，学姐分享分享过canvas的随机泡泡，那个泡泡是通过绘制圆形产生的。当时觉得很好玩，当时写也多是模仿。昨天研究了一下css3 点击的“涟漪”的效果，然后想起之前的泡泡，就用这个也做了一个满屏泡泡的效果。
实现关键：
- css3 控制圆形的产生消失
- 随机产生泡泡的个数
- 添加随机产生的个数对应的节点
- 为每个泡泡添加随机色
看起来都是常用的操作，我们来看下怎么实现的吧。
(通过css3 的动画效果，来控制泡泡的生成消失 .node为每次添加的节点的样式)
<style>
*{
margin:0;
padding:0;
border:0;
}
html,body{
width: 100%;
height: 100%;
overflow:hidden;
}
#container{
width: 100%;
height: 100%;
background-image: url("../Image/344.jpg");
background-repeat: no-repeat;
background-size: 1800px 800px;
position:absolute;
}
@keyframes mywaves {
from{
opacity: 1;
position: absolute;
width:0;
height:0;
}
to{
opacity: 0;
position: absolute;
width:150px;
height: 150px;
}
}
.node{
position:absolute;
width: 100px;
height: 100px;
border-radius:50%;
border:4px solid transparent;
animation: mywaves 5s infinite;
}
</style>
</head>
<body>
<div id="container"> </div>
<script>
var num = Math.floor(Math.random()*30); //随机产生个数
var width=document.documentElement.clientWidth;//计算屏幕的宽度，高度
var height=document.documentElement.clientHeight;
var container = document.getElementById("container"); //得到父元素
for(var i =0;i<num;i++){
var nodes = document.createElement("div"); //添加子节点
nodes.className="node"; //设置添加节点的样式
nodes.style.left=Math.random()*width-200+'px'; //规定随机产生的泡泡的随机位置
nodes.style.top=Math.random()*height-200+'px';
nodes.style.backgroundColor = getColor(); //给泡泡匹配颜色
container.appendChild(nodes); //将产生的子节点追加到父元素中
}
//产生随机色
function getColor() {
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb("+r+","+g+","+b+")";
}
</script>
代码不多，来看下效果吧：
泡泡是由小变大的
变大的过程
泡泡变大规定大小就会消失，然后在接着由小变大
这就实现啦，怎么说呢，还是在继续学习吧，可以结合使用学习的东西，也是进步吧。假期学习就快结束了，希望有所长进，加油！
网友评论