<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宝贝金鹤专属</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: pink;
overflow:hidden;
}
#frame{
position: relative;
width: 400px;
height: 300px;
margin: 250px auto;
}
.left,.right{
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
}
.left{
left: 35px;
}
.right{
right: 35px;
z-index: -1;
}
.bottom{
bottom: 36px;
left: 100px;
width: 200px;
height: 200px;
transform: rotate(45deg);
z-index: -1;
}
.heart{
position: absolute;
box-shadow:0 0 40px #d5093c;
animation: beat .4s ease infinite normal;
background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
}
@keyframes beat {
0%{
transform: scale(1) rotate(225deg);
box-shadow:0 0 40px #d5093c;
}
50%{
transform: scale(1.1) rotate(225deg);
box-shadow: 0 0 70px #d5093c;
}
100%{
transform: scale(1) rotate(225deg);
box-shadow: 0 0 40px #d5093c;;
}
}
h1{
position:absolute;
width: 100%;
top:8%;
text-align: center;
font-family: 'Love Ya Like A Sister', cursive;
font-size: 40px;
color: #c70012;
padding: 0 20px;
}
</style>
</head>
<body>
<h1 id="h1"></h1>
<div id="frame">
<div class="heart left"></div>
<div class="heart right"></div>
<div class="heart bottom"></div>
</div>
<b style="position:absolute;
width: 50%;
top:70%;
left:25%;
text-align: center;
transform:translateY(-50%);
font-family: 'Love Ya Like A Sister', cursive;
font-size: 40px;
color: #c70012;
padding: 0 20px;">晚霞与鲜花共绘浪漫,<br>
你是我藏在心里的爱意泛滥.</b>
<audio autoplay="autopaly" loop="loop" id="audios" preload="auto">
<source src="http://music.163.com/song/media/outer/url?id=526464145.mp3"/>
</audio>
<script>
window.onload=function starttime(){
setInterval(function() {
time();
}, 1000);
}
function time() {
var nowtime = new Date().getTime(); // 现在时间转换为时间戳
var futruetime = new Date('2020/8/20').getTime(); // 未来时间转换为时间戳
var msec = nowtime-futruetime; // 毫秒 未来时间-现在时间
var time = (msec/1000); // 毫秒/1000
var day = parseInt(time/86400); // 天 24*60*60*1000
var hour = parseInt(time/3600)-24*day; // 小时 60*60 总小时数-过去的小时数=现在的小时数
var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
var second = parseInt(time%60); // 以60秒为一整份 取余 剩下秒数
document.getElementById("h1").innerHTML = "李宝贝，我们已经在一起：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了";
}
</script>
</body>
</html>
The running effect is as follows:
