七夕节,我用代码制作了表白信封

大家好,我是小周,明天就是七夕了,这么浪漫的节日,自然少不了我这个浪漫博主,本次为大家贡献表白信封的制作,其他的就看缘分啦,哈哈,最后会放上资源包,需要的小伙伴自取就可以了,999

一、画信封

https://excalidraw.com/

使用上面的画图工具,手绘信封,可自己发挥,工具上手简单也很不错

图1:未打开的信封

在这里插入图片描述

图2:快要打开的信封

在这里插入图片描述

图3:打开的信封

在这里插入图片描述

二、结构搭建

这是整个项目的结构,其中都标注了是干嘛的,清晰明了

在这里插入图片描述

三、HTML结构

很简单,使用一个大盒子包裹所有内容,包括图片,文字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小刘 -> 小张</title>
    <link rel="shortcut icon" href="./icon/icon.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="con">
        <img src="./images/1.png" class="close" draggable="false">
        <img src="./images/花.png" class="rose" draggable="false">
        <h1>写给亲爱的郁苗小姐</h1>
        <span>2022-8-4</span>
    </div>

    <audio src="./audio/click.mp3" class="clickMusic"></audio>
    <audio src="./audio/ADG - 我 去 宇 宙 偷 星 星,放 在 夜 里 等 你♡.mp3" class="bgMusic"></audio>

    <script src="./js/main.js"></script>
</body>

</html>

在这里插入图片描述

四、CSS美化

关键注释已经写在代码中,使用了定义con相对于body定位,con内元素相对于con定位,不会乱,同时使用flex布局减少居中相关代码

/* 清除默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 给body相对定位,让con以body为标准进行定位 */
body {
    position: relative;
    /* 设置最小高度为一整个视口的高度 */
    min-height: 100vh;

}

/* 使用绝对定位,相对于body定位,居中
同时开启 flex布局,默认x轴为主轴,使用
justify-content: center;即x轴居中 */
.con {
    position: absolute;
    bottom: 150px;
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;

}

.con .close {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.con .rose {
    position: absolute;
    bottom: 70px;
    width: 50px;
    height: 50px;
    /* 玫瑰是要点的,设置鼠标样式为小手 */
    cursor: pointer;
}

.con h1 {
    position: absolute;
    bottom: 170px;
    font-size: 18px;
    color: #444;
}

.con span {
    position: absolute;
    bottom: 140px;
    font-size: 14px;
    color: #666;
}

/* 清除audio可能的占位问题 */
audio {
    width: 0;
    height: 0;
}

以下是简单美化后的效果:

在这里插入图片描述

五、JS注入灵魂

js也不难,获取节点,操作节点,使用定时器的时间差来模仿定格动画,达到开信封的效果,是不是很棒呢?注释已经写好了,如果你的基础差,看着注释也能明白哦

// 获取闭合信封的图片节点
let img1 = document.querySelector(".close");

// 获取h1和span文字节点
let h1 = document.querySelector("h1");
let span = document.querySelector("span");

// 获取点击音效
let clickMusic = document.querySelector(".clickMusic");
// 获取背景音乐
let bgMusic = document.querySelector(".bgMusic");
// 获取玫瑰,后面添加点击事件
let rose = document.querySelector(".rose");

// 添加点击事件
rose.addEventListener("click", function () {
    // 先隐藏h1和span
    h1.style.display = "none";
    span.style.display = "none";
    setTimeout(function () {
        // 播放拆信封的音效
        clickMusic.play();
        // 200毫秒后切换信封为第二张
        img1.src = "./images/2.png";
    }, 200);
    setTimeout(function () {
        // 800毫秒后切换信封为第三张
        img1.src = "./images/3.png";
        // 播放背景音乐
        bgMusic.play();
    }, 800);
})

六、媒体查询,兼容移动端,拿捏

使用简单媒体查询,处理一下不同像素下的样式,小伙伴可以根据自己情况优化,我这里提供一下思路。

/* 媒体查询,简单兼容手机端,起飞 */
@media screen and (max-width: 540px) {
    .con {
        width: 100vw;
    }

    .con .rose {
        bottom: 60px;
    }

    .con h1 {
        bottom: 150px;
    }

    .con span {
        bottom: 120px;
    }
}

七、发送,直接恋爱

最后希望大家不要为了谈恋爱而谈恋爱❤️,在没有遇到真心喜欢的她他之前,充实自己,对自己好点,加油学技术,如果觉得博主说的不错,记得点赞支持博主呀,我是小周,期待你的关注!👋

八、源码下载

https://wwb.lanzouj.com/iJ7gH08yaw1g


在这里插入图片描述

  • 90
    点赞
  • 134
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 119
    评论
以下是一个用Python编写的七夕节表白代码: ``` # -*- coding:utf-8 -*- def confession(): print("亲爱的,我想对你说:") print("在这个七夕节,我想告诉你我对你的心意。") print("我喜欢你的笑容,喜欢你温柔的眼神。") print("你是我生命中最重要的人,没有你我将无法呼吸。") print("你愿意成为我的女朋友吗?") print("请输入“yes”或“no”。") answer = input() if answer == "yes": print("太好了!我会一直守护你,爱你一辈子!") else: print("没关系,我会一直保持对你的爱和祝福。") confession() ``` 这段代码会输出一段表白的文字,然后等待用户输入回答。如果用户输入"yes",则会输出肯定的回答;如果用户输入其他任何答案,都会输出否定的回答。这段代码可以通过运行Python解释器来执行,让你的亲密爱人体验到程序员的浪漫!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [程序员的七夕用30行代码让Python化身表白神器](https://download.csdn.net/download/weixin_38733382/12860807)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [❤️赶紧收藏❤️:如何用Python过一个完美的七夕节??](https://blog.csdn.net/weixin_55822277/article/details/119697681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 119
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王子周棋洛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值