html表白特效源代码

涛哥
Html代码

下面是一个HTML表白特效的源代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>表白特效示例</title>
	<style>
		body {
			background-color: #f7e8e8;
			font-family: Arial, sans-serif;
			text-align: center;
			padding-top: 50px;
		}
		h1 {
			font-size: 60px;
			color: #f44336;
			margin-bottom: 50px;
		}
		.heart {
			display: inline-block;
			position: relative;
			margin: 0 10px;
			width: 50px;
			height: 50px;
			transform: rotate(45deg);
			animation: beat 1s ease-in-out infinite;
			cursor: pointer;
		}
		.heart:before,
		.heart:after {
			position: absolute;
			content: "";
			left: 25px;
			top: 0;
			width: 25px;
			height: 40px;
			background-color: #f44336;
			border-radius: 25px 25px 0 0;
		}
		.heart:before {
			transform: rotate(-45deg);
		}
		.heart:after {
			left: 0;
			transform: rotate(45deg);
		}
		.heart:hover {
			animation: none;
			transform: scale(1.2) rotate(45deg);
		}
		@keyframes beat {
			0% {transform: scale(1);}
			20% {transform: scale(1.1);}
			40% {transform: scale(1);}
			60% {transform: scale(1.1);}
			80% {transform: scale(1);}
			100% {transform: scale(1);}
		}
	</style>
</head>
<body>

	<h1>我喜欢你</h1>

	<div class="heart"></div>
	<div class="heart"></div>
	<div class="heart"></div>
	<div class="heart"></div>
	<div class="heart"></div>

	<script>
		// 添加点击事件，每次点击时，弹出一组心形图案
		document.addEventListener("click", function(event) {
			if (event.target.classList.contains("heart")) {
				var heart = event.target;
				heart.classList.add("clicked");
				setTimeout(function() {
					heart.classList.remove("clicked");
				}, 1000);
			}
		});
	</script>

</body>
</html>

这个示例包括一个大号的标题和五个心形图案，当用户点击一个图案时，图案会“跳动”一下，然后自动消失。您可以根据需要更改标题、图案数量和样式。

猜你喜欢：

python实现动态心形代码

用python给女朋友写的表白代码

python表白代码大全（属于程序员的浪漫,建议收藏）

 
  • 表白信
  • 表白特效