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

最新推荐文章于 2024-07-23 10:23:14 发布

小墨蛇

最新推荐文章于 2024-07-23 10:23:14 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/weiyi47/article/details/133894554

版权

javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端htmlcss

13 篇文章 1 订阅

订阅专栏

以下是使用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");
			// 给泡泡设置id
			bubble.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.body
        bodyEle.addEventListener("click", blowBubble)
        function blowBubble(event) {
            // 创建一个div元素作为泡泡
            var bubble = document.createElement("div");
            // 给泡泡设置id
            bubble.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");
            // 给泡泡设置id
            bubble.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>

小墨蛇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS和JavaScript编写的吹泡泡的网页代码和注释：

/body;;;box-shadow;animation;;height;opacity;50%width;height;opacity;100%width;height;opacity;
复制链接

扫一扫

专栏目录