話不多說直接代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
/*溢出隱藏*/
/*解決塌陷*/
/*清除浮動*/
}
div{
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<!--生成100個小圓，大小隨機，位置隨機，顏色隨機，透明度隨機-->
<!--讓圓閃爍起來-->
</body>
<script>
for (var i=0; i<40; i++) {
var d = document.createElement("div");
var cm = rand(10,150);
d.style.width = cm + 'px';
d.style.height = cm + 'px';
d.style.left = rand(0,window.innerWidth-150) + 'px';
d.style.top = rand(0,window.innerHeight-150) + 'px';
var r = rand(0,255);
var g = rand(0,255);
var b = rand(0,255);
var color = `rgb(${r},${g},${b})`;
d.style.backgroundColor = color;
var op = Math.random();
d.style.opacity = op;
// 手動爲div創造一個屬性speed
d.speedOpacity = 0.01;
if (0.5 - Math.random() > 0) {
d.speedOpacity = -0.01;
}
d.speedX = rand(2,4);
if (0.5 - Math.random() > 0) {
d.speedX *= -1;
}
d.speedY = rand(2,4);
if (0.5 - Math.random() > 0) {
d.speedY *= -1;
}
document.body.appendChild(d);
}
function rand(min,max) {
return Math.round(Math.random() * (max-min) + min);
}
function changeOpacityAndPosition() {
var ds = document.getElementsByTagName("div");
for (var i=0; i<ds.length; i++) {
var d = ds[i];
var op = d.style.opacity;
op = parseFloat(op);
op += d.speedOpacity;
if (op>=1 || op <= 0) {
d.speedOpacity *= -1;
}
d.style.opacity = op;
var x = d.offsetLeft + d.speedX;
var y = d.offsetTop + d.speedY;
if (x < 0) {
x = 0;
d.speedX *= -1;
} else if (x > window.innerWidth-d.offsetWidth) {
x = window.innerWidth-d.offsetWidth;
d.speedX *= -1;
}
if (y < 0) {
y = 0;
d.speedY *= -1;
} else if (y > window.innerHeight-d.offsetHeight) {
y = window.innerHeight-d.offsetHeight;
d.speedY *= -1;
}
d.style.left = x + 'px';
d.style.top = y + 'px';
}
}
setInterval(function(){
changeOpacityAndPosition()
},30);
</script>
</html>
<!--relative：不會影響元素本身的特性，定位參考是原來的位置
absolute： 脫離文檔流，找最近的使用了定位的父級來定位，如果沒有找body
fixed: 脫離文檔流，找窗口定位-->
可以通過改變i的值來改變氣泡個數。目前定義的是40
個人覺得挺好看的，電腦閒置的時候可以把整個網頁打開，然後F11全屏，作爲桌面背景。
還有，由於是網頁所以不能直接做成桌面背景，有人說可以截圖，截成視頻，拜託這些完全是隨機的，弄成視頻就不是隨機的了好吧-_-!。當然如果你有什麼辦法把網頁做成桌面背景，歡迎給我留言。
還有本次代碼是本校實訓時的成果，並不是完全靠個人做出來的。如有雷同，不勝惶恐！
作者：Lee_1310
來源：CSDN
原文：https://blog.csdn.net/Lee_1310/article/details/89048898
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！