帮我写一份关于祝福生日快乐的HTML代码,蛋糕周边有图片,图片可以自动旋转
时间: 2024-09-10 18:10:02 浏览: 36
以下是一份简单的HTML代码示例,它包含了一个生日祝福的页面,页面中有一个蛋糕的图片,这个图片使用CSS动画实现了自动旋转的效果:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>生日快乐</title>
<style>
.birthday-cake {
text-align: center;
margin-top: 50px;
}
.birthday-cake img {
width: 300px; /* 蛋糕图片的宽度 */
height: auto; /* 高度自适应 */
animation: rotateCake 5s linear infinite; /* 无限次旋转动画 */
}
@keyframes rotateCake {
from {
transform: rotate(0deg); /* 初始状态,不旋转 */
}
to {
transform: rotate(360deg); /* 旋转一圈 */
}
}
</style>
</head>
<body>
<div class="birthday-cake">
<img src="birthday_cake.jpg" alt="生日蛋糕">
<h1>生日快乐!</h1>
</div>
</body>
</html>
```
在上面的代码中,`.birthday-cake img` 选择器中的 `animation` 属性定义了一个名为 `rotateCake` 的关键帧动画,使图片围绕中心旋转,`from` 到 `to` 表示动画从0度旋转到360度,`5s` 表示动画周期为5秒,`linear` 表示动画速度是匀速的,`infinite` 表示动画会无限次循环执行。
请确保你的图片文件名是 "birthday_cake.jpg",并且该图片文件与HTML文件位于同一目录下。如果图片位置不同,需要相应地调整 `src` 属性中的图片路径。
阅读全文