夜雨聆风
🚀 零门槛使用，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 看～
