可以成为我的恋人吗代码(附源码)

🚀 零门槛使用，3 秒就能跑

完全不用配置环境，只要电脑，复制粘贴就能运行：
新建一个文本文件，把代码全部复制进去
后缀改成 .html（例如 love.html）
双击运行，见证奇迹
需要更爱文案的直接去修改即可！
💖 完整版代码（直接复制）

# 完整版代码直接复制粘贴即可<html lang="en">
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>可以成为我的朋友吗？</title> 
  <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .container {
            width: 100vw;
            height: 100vh;
            background: #faf8f6;
            background-image: url(https://dy.dw0.cn/uploads/20250222/b78e92079b51f6bf4edc1e8311f6d4df.png);
            background-size: cover;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .img-box {
            width: 230px;
            height: 240px;
            margin-bottom: 30px;
            transition: all 0.3s ease; /* 添加过渡效果 */
        }

        .img-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .text {
            font-size: 24px;
            text-align: center;
            margin-bottom: 30px;
            transition: all 0.3s ease; /* 添加过渡效果 */
        }

        .button-group {
            display: flex;
            flex-direction: column;
            align-items: center; /* 确保按钮居中 */
        }

        .btn {
            height: 40px;
            font-size: 18px;
            width: 120px;
            margin: 10px 0;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease; /* 添加过渡效果 */
        }

        .agree {
            background-color: #f6cb89;
             color: #000;
        }

        .refuse {
            background-color: #ebe6df;
            color: #000;
                      height: 40px;
            font-size: 18px;
            min-width: 90px;
            /*width: 120px;*/
            margin: 10px 0;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease; /* 添加过渡效果 */
        }
        #yesimage{
                width: 17.5rem;
    height: 11.875rem;
    margin: 2.25rem auto 0;
        }
        .end-text{
            font-size: 7vw;
        }
    </style> 
  <script src="js/jq.js"></script> 
 </head> 
 <body id="v1"> 
  <div id="v2" class="container containers"> 
   <div id="v3" class="img-box"> 
    <img id="imga" src="https://dy.dw0.cn/uploads/20250222/f2619d03e0962548b6554e3313fcc2b3.gif" alt=""> 
   </div> 
   <div id="v4" class="text">
     可以成为我的朋友吗？ 
   </div> 
   <div id="v5" class="button-group"> 
    <button id="v6" class="btn agree"> 可以 </button> 
    <button id="v7" class="refuse">不要</button> 
   </div> 
  </div> 
  <div id="v8" class="container containert" style="display:none;"> 
   <div id="v9" class="empty"></div> 
   <div id="v10" class="end-text">
     太好啦！！！ 
   </div> 
   <img id="yesimage" src="https://dy.dw0.cn/uploads/20250222/92c4fd68976be39d0378f2704b4fadff.png" class="suki-friend" alt=""> 
  </div> 
  <script>
    const containers = document.querySelector('.containers')
    const containert = document.querySelector('.containert')
        const agreeButton = document.querySelector('.agree');
        const refuseButton = document.querySelector('.refuse');
        const imgBox = document.querySelector('.img-box');
        const imga = document.querySelector('#imga')
        const text = document.querySelector('.text');

        let scale = 1; // 初始缩放比例
        let offset = 0; // 初始偏移量
        let mu = 0;
agreeButton.addEventListener('click',function(){
    containers.style.display='none'
    containert.style.display='flex'
})
        // 点击“不要”按钮时，“可以”按钮变大，同时图片和文字被顶上去
        refuseButton.addEventListener('click', function () {
            mu += 1;
            scale += 2; // 每次点击增加 2 倍
            offset += 40; // 每次点击增加 40px 的偏移量

            // 设置“可以”按钮的缩放
            agreeButton.style.transform = `scale(${scale})`;

            // 设置“不要”按钮的偏移
            refuseButton.style.transform = `translateY(${offset}px)`;

            // 设置图片和文字的偏移
            imgBox.style.transform = `translateY(-${offset}px)`;
            text.style.transform = `translateY(-${offset}px)`;
            
            if(mu===1){
                imga.src = 'https://dy.dw0.cn/uploads/20250222/aab60b71b58b095ec252411b5822b64e.gif'
                refuseButton.innerText = '？认真的吗？'
            }
            if(mu===2){
            imga.src = 'https://dy.dw0.cn/uploads/20250222/3433ec8637a2a39ea00e1231cdce2e56.gif'
                refuseButton.innerText = '要不再想想？'
            }
            if(mu===3){
                imga.src = 'https://dy.dw0.cn/uploads/20250222/4aa131d65a7e4f4e699b8fc4953eacf8.gif'
                refuseButton.innerText = '不许选这个'
            }
            if(mu===4){
                imga.src = 'https://dy.dw0.cn/uploads/20250222/4aa131d65a7e4f4e699b8fc4953eacf8.gif'
                refuseButton.innerText = '我会很伤心的...'
            }
            if(mu>=5){
                imga.src = 'https://dy.dw0.cn/uploads/20250222/4aa131d65a7e4f4e699b8fc4953eacf8.gif'
                refuseButton.innerText = '不行！'
            }
            
        });
    </script>  
 </body>
</html>
💌 写在最后

浪漫不一定需要昂贵礼物，一段简单的代码，也能把温柔送到眼前。
送给自己：好好爱自己，岁岁常欢愉。送给 TA：满心欢喜皆是你。
快收藏起来，找个机会运行给 TA 看～