【PHP小源码】一封情书，情人节给爱人一个小惊喜吧-CSDN博客

本文链接：https://blog.csdn.net/xwteam_0662/article/details/140478878

马上就要到七夕了，发个没什么技术含量的小玩意。可以直接使用，也可以自己修改成喜欢的样子。
先上图片吧：在这里插入图片描述

没什么技术含量，纯粹一个小玩意，就不多解释了。直接上代码吧：

1. 传参

<?php
$to = isset($_REQUEST['to']) ? htmlspecialchars($_REQUEST['to']) : '收件人';
$from = isset($_REQUEST['from']) ? htmlspecialchars($_REQUEST['from']) : '寄件人';
?>

2. 封面收件人

<?
php echo $to . ' 敬启';
?>

3. 寄件人和信件内容

<?php
$message = <<<EOT
亲爱的 $to
                
       我总觉得，这个世界上有很多完美
的事物，是很顽皮地躲藏于生活细节之
中，等待着有心人去发掘它们的存在。
       这一份美，我觉得是无所比拟的。
       我想要的绝对不是什么海誓山盟，
我想要的只是一个机会，让我能够好好
地疼惜你，以及静看天地，一齐分享那
些躲藏于生活细节之中的喜悦。
                            
                            爱你的 $from
EOT;
// 将文本按行分割为数组
$lines = explode("\n", $message);

// 逐行输出
foreach ($lines as $line) {
    echo "<span>" . $line . "</span>";
}
?>

4. CSS部分

@font-face {
            font-family: 'CustomFont';
            src: url('font/Authorized-font-5952.ttf') format('truetype');  /* 内容手写钢笔体，自行更换需要的字体。 */
        }
        @font-face {
            font-family: 'VerticalFont';
            src: url('font/Authorized-font-5953.ttf') format('truetype');  /* 信封毛笔字体，自行更换需要的字体。 */
        }
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: 'STKaiti', 'KaiTi', sans-serif;
        }
        .card {
            width: 500px;
            height: 700px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: scale(1.05);
        }
        .card-front {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('img/envelope.png') no-repeat center center;   /* 信封封面 */
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-family: 'VerticalFont', sans-serif;
            font-size: 48px;
            color: #000;
            text-shadow: none;
        }
        .card-inside {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('img/letter.png') no-repeat center center;  /* 信件背景 */
            background-size: cover;
            padding: 20px 40px;
            box-sizing: border-box;
            display: none;
        }
        .handwritten {
            font-family: 'CustomFont', sans-serif;
            font-size: 18px;
            line-height: 1.8;
            white-space: pre-wrap;
            text-align: left;
            margin-top: 20px;
            padding-left: 60px; 
            overflow: hidden;
            position: relative;
        }
        .handwritten span {
            display: block;
            opacity: 0;
            animation: fadeIn 0.8s forwards;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

5. JS部分

        document.addEventListener('DOMContentLoaded', function() {
            const card = document.getElementById('card');
            let isOpen = false;

            card.addEventListener('click', function() {
                if (!isOpen) {
                    card.querySelector('.card-front').style.display = 'none';
                    card.querySelector('.card-inside').style.display = 'block';
                    isOpen = true;

                    const spans = document.querySelectorAll('.handwritten span');
                    let delay = 0;
                    spans.forEach((span, index) => {
                        span.style.animationDelay = delay + 's';
                        delay += 0.6; // 内容延迟显示时间，每0.6秒显示下一行
                    });
                }
            });
        });