html5漂亮的happy birthday代码
时间: 2023-02-05 15:02:59 浏览: 53
这是一个 HTML5 带有动画效果的 "Happy Birthday" 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: sans-serif;
background-color: lightpink;
}
h1 {
animation: fadeIn 2s ease-in;
color: hotpink;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.heart {
display: inline-block;
animation: pulse 2s infinite;
color: red;
}
@keyframes pulse {
50% {
transform: scale(1.2);
}
}
</style>
</head>
<body>
<h1>Happy Birthday!</h1>
<p class="heart">❤️</p>
</body>
</html>
```
这段代码将在浏览器中呈现一个居中的 "Happy Birthday!" 文本,文本的颜色是粉红色,背景是浅粉色,文本会有淡入的动画效果。在文本后面还会有一个红色的心形符号(❤️),它会有跳动的动画效果。