早上我上CSDN查资料(签到，抽谢谢惠顾)的时候，首页推送了一个给女朋友做网页表白程序的博客，突然想起女朋友明天的生日，于是花了两小时做了个生日贺卡送给她，没想到她收到后感动哭了(把我打了)
代码,主要使用了html和css，还有亿点点的JavaScript。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
position: relative;
background-color: cadetblue;
}
#cat{
width: 60px;
height: 50px;
background-image: url('./img/cat.png');
background-size: contain;
position: fixed;
right: 100px;
top: 50px;
cursor: pointer;
}
#box{
width: 500px;
height: 350px;
position: relative;
background-image: url('./img/1000065.jpg') ;
background-size: cover;
margin: 180px auto 0px ;
border-radius: 25px;
}
#box p{
cursor: pointer;
}
#box .p1{
color: whitesmoke;
font-size: 2em;
font-family: 'Courier New', Courier, monospace;
position: absolute;
left: 190px;
top: -50px;
}
#box .p2{
color: thistle;
position: absolute;
left: 20px;
top: 10px;
font-family: 'Times New Roman', Times, serif;
font-size: 2em;
}
#box .p2 span{
color: black;
}
#box .p30{
width: 20px;
position: absolute;
right: 50px;
top: 100px;
color: ivory;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#box .p31{
width: 20px;
position: absolute;
right: 75px;
top: 130px;
color: ivory;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#box .p32{
width: 20px;
position: absolute;
right: 100px;
top: 100px;
color: ivory;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#box .p33{
width: 20px;
position: absolute;
right: 125px;
top: 130px;
color: ivory;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#box .p34{
position: absolute;
right: 0px;
top: 250px;
color: ivory;
}
#box .p4{
color: ivory;
font-family: 'Courier New', Courier, monospace;
position: absolute;
left: 150px;
bottom: 0px;
}
#earth{
width: 50px;
height: 50px;
background-image: url('./img/ground.png');
background-size: cover;
margin: 30px auto;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cat"></div>
<div id="box">
<p class="p1">Message</p>
<p class="p2">25<span>/</span>03</p>
<p class="p3">
<p class="p30">山河远阔，</p>
<p class="p31">人间烟火，</p>
<p class="p32">无一是你，</p>
<p class="p33">无一不是你。</p>
<p class="p34">——《江海共余生》</p>
</p>
<p class="p4">"I Am In LOVE With YOU"</p>
</div>
<a href="./html/birthday.html"><div id="earth"></div></a>
</body>
<script>
</script>
</html>birthday.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: #5274a0;
position: relative;
}
#player {
width: 400px;
height: 100px;
background-color: cadetblue;
border-radius: 20px;
position: absolute;
left: 200px;
top: 300px;
}
#player .cake {
width: 70px;
height: 70px;
position: absolute;
margin: 15px;
border-radius: 10px;
background-image: url('./../img/birthday.png');
background-size: cover;
}
#player p {
position: absolute;
left: 100px;
top: 20px;
cursor: pointer;
color: ivory;
font-family: 'Courier New', Courier, monospace;
}
#tip {
position: absolute;
top: 60px;
left: 100px;
}
#play2 {
width: 40px;
height: 40px;
position: absolute;
margin: 30px;
right: 0px;
background: url('./../img/play2.png');
background-size: cover;
}
#bill {
width: 450px;
height: 450px;
background-image: url('./../img/ss.png');
background-size: cover;
position: absolute;
top: 120px;
left: 750px;
}
</style>
</head>
<body>
<div id="player">
<div class="cake"></div>
<p>Happy Birthday</p>
<div id="tip"></div>
<div id="play2"><audio id="music" src="./../song.mp3"></audio></div>
</div>
<div id="bill"></div>
</body>
<script>
var play2 = document.getElementById('play2')
var music = document.getElementById('music')
var tip = document.getElementById('tip')
var i = 0;
play2.onclick = function () {
i++;
if (i % 2 == 1) {
music.play();
play2.style.background = "url(./../img/stop2.png)";
setTimeout(function () {
tip.innerHTML = "正在播放《Happy Birthday》"
}, 500)
} else {
music.pause();
play2.style.background = "url(./../img/play2.png)";
setTimeout(function () {
tip.innerHTML = ""
}, 500)
}
play2.style.backgroundSize = "cover";
}
</script>
</html>