当前位置:网站首页>For Qixi Festival, I made a confession envelope with code
For Qixi Festival, I made a confession envelope with code
2022-08-04 04:14:00 【Prince Zhou Qiluo】
大家好,我是小周,明天就是七夕了,Such a romantic holiday,Naturally, I am a romantic blogger,This time, I will contribute to the production of the confession envelope,The rest depends on fate,哈哈,The resource pack will be added at the end,Friends who need it can pick it up,999
一、draw envelope
https://excalidraw.com/
Use the paint tool above,Hand drawn envelope,可自己发挥,The tools are easy to use and nice
图1:Unopened envelope
图2:An envelope about to be opened
图3:Open envelope
二、结构搭建
这是整个项目的结构,It's all marked for what,清晰明了
三、HTML结构
很简单,Use one big box to wrap everything,包括图片,文字
<!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>To my dear Miss Yu Miao</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美化
Key comments are already written in the code,Definition is usedcon相对于body定位,conThe inner element is relative tocon定位,不会乱,同时使用flexLayout reduces centering related code
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 给body相对定位,让con以bodyPositioning for the standard */
body {
position: relative;
/* Sets the minimum height to the height of an entire viewport */
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;
/* Roses are the point,设置鼠标样式为小手 */
cursor: pointer;
}
.con h1 {
position: absolute;
bottom: 170px;
font-size: 18px;
color: #444;
}
.con span {
position: absolute;
bottom: 140px;
font-size: 14px;
color: #666;
}
/* 清除audiopossible placeholder issue */
audio {
width: 0;
height: 0;
}
The following is the effect after simple beautification:
五、JS注入灵魂
js也不难,获取节点,操作节点,Use the time difference of a timer to simulate stop motion animation,To achieve the effect of opening an envelope,是不是很棒呢?Notes are already written,If your foundation is poor,You can understand by looking at the comments
// Get the image node of the closed envelope
let img1 = document.querySelector(".close");
// 获取h1和span文字节点
let h1 = document.querySelector("h1");
let span = document.querySelector("span");
// Get click sound
let clickMusic = document.querySelector(".clickMusic");
// Get background music
let bgMusic = document.querySelector(".bgMusic");
// Get roses,Add click event later
let rose = document.querySelector(".rose");
// 添加点击事件
rose.addEventListener("click", function () {
// 先隐藏h1和span
h1.style.display = "none";
span.style.display = "none";
setTimeout(function () {
// Play the sound of opening the envelope
clickMusic.play();
// 200Toggle envelope to second after milliseconds
img1.src = "./images/2.png";
}, 200);
setTimeout(function () {
// 800Switch the envelope to the third one after milliseconds
img1.src = "./images/3.png";
// 播放背景音乐
bgMusic.play();
}, 800);
})
六、媒体查询,兼容移动端,拿捏
Use simple media queries,Handle the styles under different pixels,Small partners can optimize according to their own situation,I provide an idea here.
/* 媒体查询,Simple compatibility with mobile phones,起飞 */
@media screen and (max-width: 540px) {
.con {
width: 100vw;
}
.con .rose {
bottom: 60px;
}
.con h1 {
bottom: 150px;
}
.con span {
bottom: 120px;
}
}
七、发送,直接恋爱
Finally, I hope that everyone will not fall in love for the sake of falling in love️,Before meeting the person he really likes,充实自己,对自己好点,Cheers to technology,If you think the blogger is right,Remember to like and support the blogger,我是小周,期待你的关注!
八、源码下载
https://wwb.lanzouj.com/iJ7gH08yaw1g
边栏推荐
猜你喜欢
Postgresql source code (66) insert on conflict grammar introduction and kernel execution process analysis
docker安装mysql与宿主机相差8小时的问题。
十一种概率分布
2千兆光+6千兆电导轨式网管型工业级以太网交换机支持X-Ring冗余环网一键环网交换机
Gigabit 2 X light 8 electricity management industrial Ethernet switches WEB management - a key Ring Ring net switch
pnpm 是凭什么对 npm 和 yarn 降维打击的
7.LVS负载均衡群集之原理叙述
2022杭电多校联赛第五场 题解
基本表单验证流程
Y86. Chapter iv Prometheus giant monitoring system and the actual combat, Prometheus storage (17)
随机推荐
7.LVS负载均衡群集之原理叙述
Basic form validation process
FFmpeg —— 录制麦克风声音(附源码)
Deep learning -- CNN clothing image classification, for example, discussed how to evaluate neural network model
Reproduce 20-character short domain name bypass
if,case,for,while
6口全千兆二层网管型工业以太网交换机千兆2光4电光纤自愈ERPS环网交换机
Explain detailed explanation and practice
自定义通用分页标签01
How to automatically export or capture abnormal login ip and logs in elastic to the database?
FPGA parsing B code----serial 3
将xml标签转换为txt(voc格式转换为yolo方便进行训练)
Stop behind.
Enterprise live broadcast is on the rise: Witnessing focused products, micro-like embracing ecology
y86.第四章 Prometheus大厂监控体系及实战 -- prometheus存储(十七)
力扣(LeetCode)215. 数组中的第K个最大元素(2022.08.03)
Eight guiding principles to help businesses achieve digital transformation success
高效IO模型
数组相关 内容 解析
如何简化现代电子采购的自动化?