HTML生日動畫代碼電腦Win10
<!DOCTYPE html>
<html>
<head>
<title>生日快樂</title>
<style>
body {
background-color: #f6e9ce;
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
font-size: 5em;
margin-top: 5%;
color: #d90429;
}
p {
font-size: 2.5em;
margin-top: 5%;
color: #d90429;
}
img {
margin-top: 5%;
}
/*動畫關鍵幀*/
@keyframes heartBeat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(0.9);
}
75% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/*心跳動畫*/
.heart {
animation-name: heartBeat;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h1>生日快樂！</h1>
<p>祝你生日快樂！</p>
<img class="heart" src="https://cdn.jsdelivr.net/gh/mayuxiaoguang/birthday-card/birthday-card/heart.png" width="200" alt="heart">
</body>
</html>以上這段HTML代碼可以實現一個簡單的生日祝福動畫，運行在Windows10操作系統的電腦上，只需要用文本編輯器打開文件，將代碼復制粘貼進去，保存為.html格式，雙擊打開即可。