基于HTML和js的表白动画

最新推荐文章于 2024-05-02 09:06:45 发布

錒嗄锕醃

最新推荐文章于 2024-05-02 09:06:45 发布

阅读量128

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_67927381/article/details/132669727

版权

以下是一个简单的表白网页示例，使用HTML和JavaScript编写：

<!DOCTYPE html>
<html>
<head>
	<title>表白</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-color: pink;
			font-family: Arial;
			text-align: center;
		}
		h1 {
			color: white;
		}
		#love {
			font-size: 3em;
			color: red;
			font-weight: bold;
			animation: pulse 2s infinite;
		}
		@keyframes pulse {
			0% {
				transform: scale(1);
			}
			50% {
				transform: scale(1.2);
			}
			100% {
				transform: scale(1);
			}
		}
	</style>
</head>
<body>
	<h1>我爱你</h1>
	<p>我一直默默地喜欢你，现在终于鼓起勇气向你表白了。</p>
	<p>我想说：</p>
	<p id="love"></p>
	<input type="text" id="message" placeholder="请输入你想说的话">
	<button onclick="showMessage()">告诉你</button>
	<script>
		function showMessage() {
			var message = document.getElementById("message").value;
			document.getElementById("love").innerHTML = message;
		}
	</script>
</body>
</html>

这个网页包括一个标题、一些文本和一个心形图案。它还有一个文本框和一个“告诉你”按钮，点击按钮后会在心形图案中显示用户输入的消息。这是通过JavaScript的功能来实现的，当用户点击按钮时，showMessage()函数会被调用。这个函数获取文本框中的值，然后在HTML中的“love”元素中显示它。

尝试在你的本地计算机上打开这个网页，更改文本框中的消息并点击按钮，看看会发生什么！

錒嗄锕醃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于HTML和js的表白动画

这个网页包括一个标题、一些文本和一个心形图案。它还有一个文本框和一个“告诉你”按钮，点击按钮后会在心形图案中显示用户输入的消息。这是通过JavaScript的功能来实现的，当用户点击按钮时，showMessage()函数会被调用。这个函数获取文本框中的值，然后在HTML中的“love”元素中显示它。尝试在你的本地计算机上打开这个网页，更改文本框中的消息并点击按钮，看看会发生什么！
复制链接

扫一扫