- 需求 1：气泡要浮动（css 动画，easy）
- 需求 2：气泡组成一条龙
用到的素材
先用图片搜索找一张龙的剪影
所有源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 龙</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
background: #333;
}
.bubble {
position: absolute;
animation-timing-function: linear;
animation-name: floating;
animation-iteration-count: infinite;
}
@keyframes floating {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0px);
}
}
</style>
<script type="text/javascript">
window.onload = function () {
init();
}
function init() {
drawDragonImageInCanvas();
}
function drawDragonImageInCanvas(cb) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.crossOrigin = '';
image.src = "/d/file/webqianduan/3ahzsf4kykl3ahzsf4kykl.jpg";
image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
var imageData = ctx.getImageData(0, 0, image.width, image.height).data;
ctx.clearRect(0, 0, image.width, image.height);
var gap = 10;
var dragonContainer = document.getElementById("container");
var dragonScale = 2;
for (var h = 0; h < image.height; h += gap) {
for (var w = 0; w < image.width; w += gap) {
var position = (image.width * h + w) * 4;
var r = imageData[position],
g = imageData[position + 1],
b = imageData[position + 2];
if (r + g + b == 0) {
var bubble = document.createElement("img");
bubble.src = "https://media.mybj123.com/wp-content/uploads/2021/05/1621998248-a3fa9e0b6b24b1c.png";
bubble.setAttribute("class", "bubble");
var bubbleSize = Math.random() * 10 + 20;
bubble.style.left = (w * dragonScale - bubbleSize / 2) + "px";
bubble.style.top = (h * dragonScale - bubbleSize / 2) + "px";
bubble.style.width = bubble.style.height = bubbleSize + "px";
bubble.style.animationDuration = Math.random() * 6 + 4 + "s";
dragonContainer.appendChild(bubble);
}
}
}
}
}
</script>
</head>
<body>
<div id='container' style="width: 100%;height: 100%;position: absolute;z-index: 2;"></div>
<canvas id='canvas' style="position: absolute;z-index: 1;filter: blur(5px);"></canvas>
</body>
</html>