前端代码分享--爱心

给对象写的，顺便源码给大家分享一下

就是简单的html+css+js，不复杂

xin1.html

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>写你自己的</title>  
    <link rel="stylesheet" href="petal.css">
    <style>  
        body {  
            margin: 0;  
            overflow: hidden;  
            background: radial-gradient(circle at bottom, #ff89b5, #ffe0e5);  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            position: relative;  
            height: 100vh;  
        }  
        /* 心形动画 */  
        .heart {  
            position: absolute;  
            z-index: 10; /* 确保爱心在最上层 */  
            width: 150px;  
            height: 135px;  
            background: pink;  
            transform: rotate(45deg);  
            animation: heartbeat 1s infinite;  
        }  
        .heart::before,  
        .heart::after {  
            content: "";  
            position: absolute;  
            width: 150px;  
            height: 135px;  
            background: pink;  
            border-radius: 50%;  
        }  
        .heart::before {  
            left: -75px;  
            border-radius: 50% 0 0 50%;  
        }  
        .heart::after {  
            top: -75px;  
            border-radius: 50% 50% 0 0;  
        }  
        @keyframes heartbeat {  
            0%, 100% {  
                transform: rotate(45deg) scale(1);  
            }  
            50% {  
                transform: rotate(45deg) scale(1.1);  
            }  
        }  
        /* 文字动画 */  
        .text {  
            position: absolute;  
            z-index: 11;  
            top: 47%;  
            left: 50%;  
            transform: translate(-50%, -50%);  
            color: #fff;  
            font-family: 'KaiTi', cursive;  
            font-size: 48px;  
            font-weight: bold;  
            opacity: 0;  
            animation: textFadeIn 4s forwards;  
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);  
        }  
        @keyframes textFadeIn {  
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5);}  
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1);}  
        }  
        /* 花瓣样式 */  
        
        .photo-display {  
            position: absolute;  
            top: 0;  
            left: 0;  
            width: 100%;  
            height: 100%;  
            display: flex;  
            z-index: 1;  
            opacity: 0;  
            animation: photoFadeIn 2s forwards;  
        }  
        .photo-display img {  
            width: 50%;  
            height: 100%;  
            object-fit: cover;  
        }  
        @keyframes photoFadeIn {  
            from { opacity: 0; }  
            to { opacity: 1; }  
        }
        .button {  
            position: fixed;  
            bottom: 10px;  
            left: 10px;  
            background-color: #FF69B4;  
            color: white;  
            border: none;  
            padding: 10px 20px;  
            text-align: center;  
            text-decoration: none;  
            display: inline-block;  
            font-size: 16px;  
            margin: 10px 8px;  
            cursor: pointer;  
            border-radius: 12px;  
            z-index: 15;  
            opacity: 0.7;  
        }  
        .button:hover {  
            opacity: 1;  
            background-color: #FF1493;  
        }  
</style>  
</head>  
<body>  
    <div class="heart"></div>  
    <div class="text">随便写</div>  
    <!--<audio id="bgm" src="简单爱.mp3" loop></audio>  -->  

    <!--  此处为二张拼接的照片链接 
    <div class="photo-display">  
        <img src="photo/1.jpg" alt="欣怡1"> 
        <img src="photo/2.jpg" alt="欣怡2">  
    </div>  
    
    这块的话是主页面的背景，大家看着调整
    -->  

    <a href="message.html" class="button">查看留言</a> 

    <script>  
        // 创建飘落花瓣  
        const petalCount = 30;  
        for (let i = 0; i < petalCount; i++) {  
            createPetal();  
        }  
        function createPetal() {  
            let petal = document.createElement('div');  
            petal.classList.add('petal');  
            petal.style.left = Math.random() * 100 + 'vw';  
            petal.style.animationDuration = 5 + Math.random() * 5 + 's';  
            petal.style.animationDelay = Math.random() * 5 + 's';  
            petal.style.transform = 'translateX(0) rotate(' + Math.random() * 360 + 'deg)';  
            document.body.appendChild(petal);  
            petal.addEventListener('animationend', () => {  
                petal.remove();  
                createPetal();  
            });  
        }  

        // 音乐和图片展示处理   
        const photoDisplay = document.querySelector('.photo-display');  
        function playAudioAndShowPhotos() {  
            photoDisplay.style.opacity = '1'; // 显示图片  
            document.querySelector('.click-to-play').style.display = 'none';  
            document.removeEventListener('click', playAudioAndShowPhotos);  
        }  

        document.addEventListener('click', playAudioAndShowPhotos);  
</script>  
</body>  
</html>

message.html

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>写你的</title>  
    <link rel="stylesheet" href="petal.css">
    <style>  
        body {  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            height: 100vh;  
            margin: 0;  
            background-color: #fff0f5;  
            font-family: 'KaiTi', cursive;  
            color: #e75480;  
            padding: 20px;  
            box-sizing: border-box;  
            text-shadow: 1px 1px 2px #ffa6c9;  
        }  
        .message-container {  
            text-align: center;  
            max-width: 600px;  
        }  
        .message-container h1 {  
            font-size: 36px;  
            margin-bottom: 20px;  
        }  
        .message-container p {  
            font-size: 18px;  
            line-height: 1.5;  
            text-indent: 2em;
        }  
</style>  
</head>  
<body>  
    <div class="message-container">  
     <!--替换为你的内容-->  
    </div>

    <audio id="bgm" src="简单爱.mp3" loop></audio> 
     <!--替换为你的内容-->  

    <script>  
    const petalCount = 30;  
        for (let i = 0; i < petalCount; i++) {  
            createPetal();  
        }  
        function createPetal() {  
            let petal = document.createElement('div');  
            petal.classList.add('petal');  
            petal.style.left = Math.random() * 100 + 'vw';  
            petal.style.animationDuration = 5 + Math.random() * 5 + 's';  
            petal.style.animationDelay = Math.random() * 5 + 's';  
            petal.style.transform = 'translateX(0) rotate(' + Math.random() * 360 + 'deg)';  
            document.body.appendChild(petal);  
            petal.addEventListener('animationend', () => {  
                petal.remove();  
                createPetal();  
            });  
        }  
        
    const audio = document.getElementById('bgm');  
        const photoDisplay = document.querySelector('.photo-display');  
        function playAudioAndShowPhotos() {  
            audio.play();  
            photoDisplay.style.opacity = '1'; // 显示图片  
            document.querySelector('.click-to-play').style.display = 'none';  
            document.removeEventListener('click', playAudioAndShowPhotos);  
            localStorage.setItem('musicPlaying', 'true'); // 保存音乐状态  
        }  

        
        function startMusic() {  
            if (localStorage.getItem('musicPlaying') === 'true') {  
                audio.play();  
            }  
        }  

        document.addEventListener('click', playAudioAndShowPhotos);  
</script>  
</body>  
</html>

petal.css

.petal {  
    position: fixed;  
    top: -50px;  
    background-image: url('photo/hua.png');   
    background-size: contain;  
    background-repeat: no-repeat;  
    width: 50px;  
    height: 50px;  
    opacity: 0.8;  
    pointer-events: none;  
    animation: fall linear infinite;  
    z-index: 5;  
}  
@keyframes fall {  
    0% {  
        transform: translateX(0) rotate(0deg);  
    }  
    100% {  
        transform: translateX(200px) translateY(100vh) rotate(360deg);  
    }  
}