用html和js写一段代码祝福老婆30岁生日快乐，包含生日蛋糕，鲜花的动画，而且以及滚动的文案

涛哥
Html代码

以下代码实现了一个带有生日蛋糕、鲜花动画和滚动文案的生日祝福页面，用 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代码实现了当用户单击生日蛋糕时的提示框功能。

这只是一个简单的示例代码，您可以根据自己的需求和兴趣修改和扩展它，让它更加独特和有趣。

 
  • 表白特效
  • 生日蛋糕