下面是一个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>
这个示例包括一个大号的标题和五个心形图案，当用户点击一个图案时，图案会“跳动”一下，然后自动消失。您可以根据需要更改标题、图案数量和样式。
猜你喜欢：
评论