爱心动画HTML程序_heart.style.left-优快云博客

本文链接：https://blog.youkuaiyun.com/bat_and_vbs/article/details/148983123

<!DOCTYPE html>

<head>

<style>

body {

margin: 0;

padding: 0;

overflow: hidden;

background-color: #000;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

font-family: Arial, sans-serif;

}

.love-text {

position: absolute;

z-index: 10;

color: #7ec0ee;

font-size: 5rem;

font-weight: bold;

text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);

opacity: 0;

animation: fadeInScale 2s forwards, pulse 2s infinite 2s;

}

@keyframes fadeInScale {

0% {

opacity: 0;

transform: scale(0.5);

}

100% {

opacity: 1;

transform: scale(1);

}

@keyframes pulse {

0% {

transform: scale(1);

text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);

}

50% {

transform: scale(1.05);

text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);

}

100% {

transform: scale(1);

text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);

}

.heart {

position: absolute;

pointer-events: none;

transform: translate(-50%, -50%);

opacity: 0;

animation: float 6s ease-in-out infinite, fadeInOut 4s infinite;

}

@keyframes float {

0%, 100% {

transform: translate(-50%, -50%) rotate(0deg);

}

50% {

transform: translate(-50%, -60%) rotate(5deg);

}

@keyframes fadeInOut {

0%, 100% {

opacity: 0;

}

50% {

opacity: 0.8;

}

.heart::before, .heart::after {

content: "";

position: absolute;

top: 0;

width: 50px;

height: 80px;

border-radius: 50px 50px 0 0;

background: #ff69b4;

box-shadow: 0 0 20px #ff69b4, 0 0 40px #ff69b4;

}

.heart::before {

left: 50px;

transform: rotate(-45deg);

transform-origin: 0 100%;

}

.heart::after {

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

}

</style>

</head>

<body>

document.addEventListener('DOMContentLoaded', function() {

// 创建爱心

function createHearts() {

const heartsCount = 50;

const container = document.body;

for (let i = 0; i < heartsCount; i++) {

const heart = document.createElement('div');

heart.className = 'heart';

// 随机位置

const x = Math.random() * window.innerWidth;

const y = Math.random() * window.innerHeight;

heart.style.left = `${x}px`;

heart.style.top = `${y}px`;

// 随机大小

const size = Math.random() * 0.8 + 0.2;

heart.style.transform = `translate(-50%, -50%) scale(${size})`;

// 随机动画延迟

heart.style.animationDelay = `${Math.random() * 5}s`;

// 随机透明度变化

const opacityVariation = Math.random() * 0.3;

heart.style.opacity = 0.5 + opacityVariation;

container.appendChild(heart);

}

createHearts();

// 点击添加更多爱心

document.addEventListener('click', function(e) {

for (let i = 0; i < 5; i++) {

setTimeout(() => {

const heart = document.createElement('div');

heart.className = 'heart';

// 在点击位置附近创建爱心

const x = e.clientX + (Math.random() - 0.5) * 100;

const y = e.clientY + (Math.random() - 0.5) * 100;

heart.style.left = `${x}px`;

heart.style.top = `${y}px`;

// 随机大小

const size = Math.random() * 0.8 + 0.2;

heart.style.transform = `translate(-50%, -50%) scale(${size})`;

// 随机动画延迟

heart.style.animationDelay = `${Math.random() * 2}s`;

document.body.appendChild(heart);

// 动画结束后移除

setTimeout(() => {

heart.remove();

}, 6000);

}, i * 200);

}

});

// 窗口大小变化时重新布局

window.addEventListener('resize', function() {

const hearts = document.querySelectorAll('.heart');

hearts.forEach(heart => {

heart.style.left = `${Math.random() * window.innerWidth}px`;

heart.style.top = `${Math.random() * window.innerHeight}px`;

});

</script>

</body>

</html>