HTML、CSS和JavaScript编写的吹泡泡的网页代码和注释：

本文主要是介绍HTML、CSS和JavaScript编写的吹泡泡的网页代码和注释：，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

以下是使用HTML、CSS和JavaScript编写的吹泡泡的网页代码和注释：

<!DOCTYPE html>
<html>
<head><title>Bubble Blower</title><style>body {background-color: #f2f2f2;}#bubble {position: absolute;background-color: #ffffff;border-radius: 50%;box-shadow: 0px 0px 20px #ffffff;animation: bubble 3s ease-out;animation-fill-mode: forwards;}@keyframes bubble {0% {width: 0px;height: 0px;opacity: 1;}50% {width: 100px;height: 100px;opacity: 0.5;}100% {width: 200px;height: 200px;opacity: 0;}}</style>
</head>
<body><h1>Bubble Blower</h1><button onclick="blowBubble()">Blow Bubble</button><div id="bubble"></div><script>function blowBubble() {// 创建一个div元素作为泡泡var bubble = document.createElement("div");// 给泡泡设置idbubble.setAttribute("id", "bubble");// 将泡泡添加到body中document.body.appendChild(bubble);// 设置泡泡的位置为鼠标点击的位置bubble.style.left = event.clientX - 100 + "px";bubble.style.top = event.clientY - 100 + "px";}</script>
</body>
</html>

注释：

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：HTML文档的根元素。
<head>：文档头部，用于包含文档的元数据。
<title>：文档的标题，显示在浏览器的标签页上。
<style>：用于定义文档的样式。
body：文档的主体部分。
background-color：设置背景颜色为灰色。
#bubble：选择id为bubble的元素。
position：设置元素的定位方式为绝对定位。
background-color：设置元素的背景颜色为白色。
border-radius：设置元素的圆角半径为50%。
box-shadow：设置元素的阴影效果。
animation：设置元素的动画效果，使用名为bubble的动画，持续时间为3秒，缓动方式为ease-out。
animation-fill-mode：设置动画结束后元素的状态，保持在最后一帧的状态。
@keyframes bubble：定义名为bubble的动画。
0%：动画开始时元素的状态。
50%：动画进行到50%时元素的状态。
100%：动画结束时元素的状态。
width：设置元素的宽度。
height：设置元素的高度。
opacity：设置元素的透明度。
<h1>：定义文档的一级标题。
<button>：定义一个按钮。
onclick：设置按钮的点击事件。
blowBubble()：定义一个名为blowBubble的函数，用于创建泡泡。
document.createElement("div")：创建一个div元素。
setAttribute("id", "bubble")：给元素设置id属性为bubble。
appendChild(bubble)：将元素添加到文档中。
event.clientX：获取鼠标点击的x坐标。
event.clientY：获取鼠标点击的y坐标。
style.left：设置元素的左边距。
style.top：设置元素的上边距。

进阶优化版本

<!DOCTYPE html>
<html><head><title>Bubble Blower</title><style>* {margin: 0;padding: 0;}body {width: 100vw;height: 100vh;overflow: hidden;background-color: #3a3434;}#bubble {position: absolute;/* background-color: #ffffff; */border-radius: 50%;box-shadow: 0px 0px 20px #ffffff;animation: bubble 3s ease-out;animation-fill-mode: forwards;}@keyframes bubble {0% {width: 0px;height: 0px;opacity: 1;filter: hue-rotate(0);}50% {width: 100px;height: 100px;opacity: 0.5;}100% {width: 200px;height: 200px;opacity: 0;filter: hue-rotate(360deg);}}</style>
</head><body><h1>Bubble Blower</h1><!-- <button onclick="blowBubble()">Blow Bubble</button> --><!-- <div id="bubble"></div> --><script>let bodyEle = document.bodybodyEle.addEventListener("click", blowBubble)function blowBubble(event) {// 创建一个div元素作为泡泡var bubble = document.createElement("div");// 给泡泡设置idbubble.setAttribute("id", "bubble");// 将泡泡添加到body中document.body.appendChild(bubble);// 设置泡泡的位置为鼠标点击的位置bubble.style.left = event.clientX + "px";bubble.style.top = event.clientY + "px";bubble.style.backgroundColor=`rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`setTimeout(() => {bubble.remove()}, 3000)}let lastExecutedTime = 0;function blowBubbleJieLiu(event){let currentTime = Date.now();let timeSinceLastExecution = currentTime - lastExecutedTime;console.log(currentTime , lastExecutedTime);if (timeSinceLastExecution >= 50) {blowBubble(event)lastExecutedTime=currentTime}else{console.log("不行");return}}bodyEle.addEventListener("mousedown", blowBubble)bodyEle.addEventListener("mousemove", blowBubbleJieLiu)// 随机setInterval(() => {// 创建一个div元素作为泡泡let bubble = document.createElement("div");// 给泡泡设置idbubble.setAttribute("id", "bubble");// 将泡泡添加到body中document.body.appendChild(bubble);// 设置泡泡的位置为鼠标点击的位置w = Math.floor(Math.random()*window.innerWidth)h = Math.floor(Math.random()*window.innerHeight)bubble.style.left = w + "px";bubble.style.top = h + "px";setTimeout(() => {bubble.remove()}, 3000)}, 1500)</script>
</body></html>