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格式，双击打开即可。