CSS3气球动画技术求助：实现黑线固定地面、气球随风摆动效果

嘿，我懂你想要的效果——黑色线条牢牢固定在地面，气球带着线条左右轻轻晃，就像被微风拂过的样子。咱们来一步步调整你的代码，实现这个效果：

先说说原代码里的小问题 #

原来的线条是用固定的top值定位的，没法跟着地面走；而且动画作用的范围不对，导致线条会跟着气球整体移动，没法实现下端固定的效果。

修改方案和代码调整 #

下面是调整后的完整代码，关键修改点我都标出来了：

修改后的CSS

.container {
  width: 640px;
  height: 480px;
  position: absolute;
  left: 25%;
  top: 25%;
  background: url('mario_time.jpg') no-repeat;
  background-size: cover;
  cursor: crosshair;
  overflow: hidden; /* 新增：防止内容超出容器 */
}

.balloon {
  display: inline-block;
  position: absolute; /* 修改：改为绝对定位，底部对齐地面 */
  bottom: 0;
  left: 80px;
}

.percentage {
  margin-top: 20px;
  font-family: robot;
  font-size: 20px;
  color: black;
  padding: 7px 25px;
  padding-top: 6px;
  border-radius: 25px;
  margin: auto;
  width: 50px;
}

.score-box {
  font-family: 'Orbitron', sans-serif;
  font-size: 40px;
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

.score-box .label, .score-box .percentage{
  visibility: hidden;
}

.welcome-box .ready {
  font-family: 'Orbitron', sans-serif;
  font-size: 40px;
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  visibility: visible;
}

.score-box.ready { top: 20%; }
.welcome-box.ready { top: 20%; }

.score-box.ready .label, .score-box.ready .percentage {
  visibility: visible;
}

.welcome-box.ready .badge {
  text-align: center;
  width: 250px;
  height: 100px;
  padding: 15px;
  margin: 0px auto;
  border-radius: 15px;
  border: 4px solid #fff;
  background-color: white;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.62);
  color: black;
  visibility: visible
}

.score-box.ready.ready .badge {
  width: 250px;
  height: 100px;
  padding: 15px;
  margin: 0px auto;
  border-radius: 15px;
  border: 4px solid #fff;
  background-color: white;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.62);
  color: black
}

.label {
  font-family: roboto;
  font-size: 18px;
}

.balloon {
  width: 100px; /* 修改：和气球主体宽度一致，方便定位 */
}

.balloon > div {
  width:100px;
  height:130px;
  border-radius:80% 80% 80% 80%;
  position: absolute;
  top: -130px; /* 修改：让气球主体悬浮在容器上方，底部对齐线条顶端 */
  background: rgb(30,144,255);
  -webkit-transform-origin: bottom center; /* 关键：动画原点在气球底部，这样摆动时线条顶端跟着动 */
  transform-origin: bottom center;
  -webkit-animation:balloon1 6s ease-in-out infinite;
  -moz-animation:balloon1 6s ease-in-out infinite;
  -o-animation:balloon1 6s ease-in-out infinite;
  animation:balloon1 6s ease-in-out infinite;
}

.balloon > div:before {
  color:rgb(30,144,255);
  position:absolute;
  bottom:-11px;
  left: 52px;
  content:"▲";
  font-size:1em;
}

.balloon > div:after { /* 修改线条样式，下端固定在地面 */
  display:block;
  position:absolute;
  height: 130px; /* 和气球主体高度一致，从地面到气球底部 */
  width:3px;
  content:"";
  background:rgba(0,0,0,0.2);
  left: 50%; /* 居中对齐气球底部 */
  transform: translateX(-50%);
  bottom: -130px; /* 线条从气球底部延伸到容器底部（地面） */
  pointer-events: none;
}

/* 修改动画：让气球左右摆动，模拟风吹效果 */
@-webkit-keyframes balloon1 {
  0%,100%{
    -webkit-transform:translateX(-10px) rotate(-6deg);
  }
  50%{
    -webkit-transform:translateX(10px) rotate(8deg);
  }
}

@keyframes balloon1 {
  0%,100%{
    transform:translateX(-10px) rotate(-6deg);
  }
  50%{
    transform:translateX(10px) rotate(8deg);
  }
}

HTML部分（仅保留原有结构，无需额外修改）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Baloon_shooter</title>
<link rel="stylesheet" href="main.css" type="text/css" charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
</head>
<body>
<div class ="container">
  <div class="balloon" style="left:50px">
    <div class="balloon1"></div>
  </div>
  <div class="balloon" style="left:150px">
    <div class="balloon2"></div>
  </div>
  <div class="balloon" style="left:250px">
    <div class="balloon3"></div>
  </div>
  <div class="balloon" style="left:350px">
    <div class="balloon4"></div>
  </div>
  <div class="score-box">
    <div class="badge">
      <span class="label">Gratulálunk, az ön nyereménye:</span>
      <div class="percentage">0</div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

关键修改点解释 #

1. 容器添加overflow: hidden：防止气球或者线条超出容器范围，保持画面整洁。
2. .balloon改为绝对定位，底部对齐地面：这样每个气球容器的底部都固定在容器的底部（地面），线条可以从这里向上延伸。
3. 气球主体top: -130px：因为气球主体高度是130px，这样设置后，气球的底部刚好对齐容器的顶部（也就是线条的顶端）。
4. 线条样式调整：把top改成bottom: -130px，让线条从气球底部延伸到容器底部；用left:50%和transform: translateX(-50%)让线条居中对齐气球底部。
5. 动画原点设置：给气球主体加上transform-origin: bottom center，让动画的旋转和移动都以气球底部为中心，这样摆动时线条的顶端会跟着气球动，下端固定在地面。
6. 修改动画效果：把原来的上下移动改成左右平移+旋转，更贴近风吹气球的自然摆动效果。

这样调整后，你就能看到线条牢牢固定在地面，气球带着线条左右晃动的效果啦！

内容的提问来源于stack exchange，提问作者ben800