帮我写一个html+css代码，里面的要素有星空、海洋、踊跃的鲸鱼，一个人女孩坐在沙滩上...-CSDN博客

本文链接：https://blog.csdn.net/weixin_35755188/article/details/129075266

这段代码展示了如何使用HTML和CSS构建一个场景，包括星空、海洋、一只做跳跃动画的鲸鱼以及沙滩上的女孩图像。CSS中定义了动画让鲸鱼仿佛在水中跃起，用户可以自定义图片URL和样式以适应不同设计需求。

摘要由CSDN通过智能技术生成

好的，我来帮你写一个 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>星空海洋沙滩</title>
</head>
<body>
  <div class="sky">
    <!-- 放置星空图片 -->
  </div>
  <div class="ocean">
    <!-- 放置海洋图片 -->
    <div class="whale">
      <!-- 放置踊跃的鲸鱼图片 -->
    </div>
  </div>
  <div class="beach">
    <!-- 放置沙滩图片 -->
    <div class="girl">
      <!-- 放置女孩图片 -->
    </div>
  </div>
</body>
</html>

接下来是 CSS 代码：

.sky {
  /* 设置星空图片的样式 */
}

.ocean {
  /* 设置海洋图片的样式 */
}

.whale {
  /* 设置踊跃的鲸鱼图片的样式 */
  position: relative;
  animation: jump 1s linear infinite;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.beach {
  /* 设置沙滩图片的样式 */
}

.girl {
  /* 设置女孩图片的样式 */
}