心形特效代码html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>心形特效</title>
<style>
/* 给body添加背景图片 */
body {
background-image: url("bg.jpg");
}
/* 设置心形样式 */
.heart {
position: absolute;
height: 50px;
width: 50px;
background-color: red;
transform: rotate(45deg);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
height: 50px;
width: 50px;
background-color: red;
}
.heart::before {
top: -25px;
border-radius: 25px 25px 0 0;
}
.heart::after {
left: -25px;
border-radius: 0 25px 25px 0;
}
/* 给按钮添加点击事件 */
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
color: black;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* 设置动画效果 */
.heart {
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
</style>
</head>
<body>
<button class="btn">
点我生成心形特效
</button>
<script>
// 获取按钮元素
const btn = document.querySelector(".btn");
// 点击按钮生成心形特效
btn.addEventListener("click", function() {
// 生成心形元素
const heart = document.createElement("div");
heart.classList.add("heart");
// 设置心形的位置
heart.style.top = `${Math.random() * 100}%`;
heart.style.left = `${Math.random() * 100}%`;
// 将心形添加到body中
document.body.appendChild(heart);
// 2秒后删除心形
setTimeout(function() {
heart.remove();
}, 2000);
});
</script>
</body>
</html>