以下代码实现了一个带有生日蛋糕、鲜花动画和滚动文案的生日祝福页面，用 HTML 和 JavaScript 实现了以下需求：
- 页面背景颜色为淡灰色，字体样式为 Arial；
- 生日蛋糕和鲜花使用 PNG 格式的图片，并通过 CSS 设置其尺寸和位置，并添加了动画效果；
- 滚动文案使用 P 元素实现，通过 CSS 的动画设置，让文案在垂直方向上流畅地滚动，并设置了字体大小、居中对齐等属性；
- 点击生日蛋糕时，弹出提示框显示“生日快乐！”的内容。
整个页面的主题是以陈雨的30岁生日为主题的祝福页面，通过 HTML 和 JavaScript 代码实现了简单的动画效果，使整个页面更加有趣和生动。
以下是一个简单的HTML和JavaScript代码，可以实现一个带有生日蛋糕、鲜花动画和滚动文案的生日祝福页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陈雨30岁生日快乐！</title>
<style>
/* 设置背景颜色和字体样式 */
body {
background-color: #fdfdfd;
font-family: Arial, sans-serif;
}
/* 设置生日蛋糕和鲜花动画 */
#cake {
width: 300px;
height: 400px;
background-image: url("https://cdn.pixabay.com/photo/2017/05/17/19/49/cake-2321173_1280.png");
background-repeat: no-repeat;
background-size: contain;
position: relative;
animation: cakeAnimation 2s infinite alternate;
}
#flowers {
width: 150px;
height: 150px;
background-image: url("https://cdn.pixabay.com/photo/2016/03/31/17/37/bouquet-1298159_1280.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 40%;
left: 10%;
animation: flowersAnimation 2s infinite alternate;
}
/* 设置滚动文案 */
#text {
text-align: center;
margin-top: 50px;
font-size: 30px;
animation: textAnimation 5s linear infinite;
}
/* 定义动画 */
@keyframes cakeAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(10deg); }
}
@keyframes flowersAnimation {
0% { transform: translateX(0px); }
100% { transform: translateX(20px); }
}
@keyframes textAnimation {
0% { transform: translateY(0px); }
25% { transform: translateY(-20px); }
50% { transform: translateY(-40px); }
75% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body>
<div id="cake">
<div id="flowers"></div>
</div>
<p id="text">祝陈雨30岁生日快乐！</p>
<script>
// 实现点击生日蛋糕时的提示
var cake = document.getElementById("cake");
cake.onclick = function() {
alert("生日快乐！");
};
</script>
</body>
</html>
在上述代码中，我们首先定义了一个ID为cake的DIV元素，并将其作为背景图设置为一张生日蛋糕图片。同时，我们也定义了一个ID为flowers的DIV元素，并用鲜花图片作为其背景。通过CSS中的动画设置，我们让这两个元素实现了不同的动画效果。
此外，我们还添加了一个ID为text的文本元素，并用CSS中的动画设置，使其实现了较为流畅的垂直滚动效果。最后，我们使用JavaScript代码实现了当用户单击生日蛋糕时的提示框功能。
这只是一个简单的示例代码，您可以根据自己的需求和兴趣修改和扩展它，让它更加独特和有趣。
评论