<script>
(function(window, document, undefined) {
var hearts = [];
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
setTimeout(callback, 1000 / 60)
}
})();
init();
function init() {
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform:rotate(45deg);}.heart:after,.heart:before{content: '';width:inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius:50%;position:absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop()
}
function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color
}
requestAnimationFrame(gameloop)
}
function attachEvent() {
var old = typeof window.οnclick === "function" && window.onclick;
window.onclick = function(event) {
old && old();
createHeart(event)
}
}
function createHeart(event) {
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d)
}
function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css))
} catch(ex) {
style.styleSheet.cssText = css
}
document.getElementsByTagName('head')[0].appendChild(style)
}
function randomColor() {
return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")"
}
})(window, document);
</script>
将上面的代码复制到网页中即可
另一个用“deepseek”生成的鼠标点击出现心形的代码
<style>
body {
margin: 0;
height: 100vh;
cursor: pointer;
overflow: hidden;
}
.heart {
position: absolute;
pointer-events: none;
font-size: 20px;
color: #ff3366;
animation: float 3s ease-out forwards;
}
@keyframes float {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(20px, -100px) scale(2.5);
opacity: 0;
}
}
</style>
<script>
document.addEventListener('click', function(e) {
// 创建爱心元素
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = '❤';
// 设置爱心位置为点击位置
heart.style.left = e.clientX + 'px';
heart.style.top = e.clientY + 'px';
// 添加随机偏移和旋转效果
const randomOffset = Math.random() * 20 - 10;
heart.style.transform = `translate(${randomOffset}px, 10) rotate(${Math.random() * 30 - 15}deg)`;
// 随机大小
const randomSize = 5 + Math.random() * 15;
heart.style.fontSize = randomSize + 'px';
// 随机颜色(可选)
const colors = ['#CC0066', '#ff5050', '#009900', '#ff3366', '#ffdf5a', '#0000FF', '#FFFF66', '#CC33FF', '#ff3366', '#ff66a3', '#ff9999', '#ff1493','#ff5a5a', '#ff9d5a', '#5aff6e', '#5a9dff', '#c05aff'];
heart.style.color = colors[Math.floor(Math.random() * colors.length)];
// 添加到页面
document.body.appendChild(heart);
// 动画结束后移除元素
setTimeout(() => {
heart.remove();
}, 2000);
});
</script>
将上面的代码复制到网页中即可