<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> A letter for you </title>
</head>
<body>
<div>
<!-- 這裏用到的歌是任然的《疑心病》 -->
<audio controls="controls" autoplay="autoplay" id="music1" style="height: 0" >
<source src="http://music.163.com/song/media/outer/url?id=405599470.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<div class="letter"></div>
</div>
</body>
<style>
body{
background:#CCE3E6;
}
.letter{
background:transparent;
width:0px;
height: 0px;
margin:200px auto;
position: relative;
border-top:80px solid transparent;
border-bottom:50px solid #d3b0b5;
border-right:100px solid #f0c9cf;
border-left: 100px solid #f3d3d8;
}
.letter::before{
content: "";
height: 140px;
width: 140px;
background:#fff5f5;
position: absolute;
transform: rotate(45deg) translate(-50%,-50%);
left:-70px;
top:-50px;
z-index: -2;
}
.letter::after{
width:140px;
height: 100px;
background:#fff;
content: "我想你了🥳 (✿◡‿◡) ";
color: rgb(252, 134, 154);
display:flex;
justify-content: space-between;
align-items: center;
text-align: center;
font-size: 18px;
font-family: "華文行楷";
position: absolute;
left: -70px;
top:-80px;
z-index: -1;
animation: move 1.5s infinite ease-in-out;
}
@keyframes move{
from {
}
to {
background: lightyellow;
top:-120px;
transform: scale(1.1);
}
}
</style>
<script type="text/javascript">
function titleScroll(){
setInterval(() => {
var titleMsg=document.title
var head=titleMsg.substring(0,1);
var foot=titleMsg.substring(1,titleMsg.length);
document.title=foot+head;
}, 200);
}
titleScroll(); //調用titleScroll ，讓網頁標題動起來
</script>
</html>
可直接複製代碼運行看效果：（有背景音樂，信紙有進出的動畫,我沒弄動圖）
