搜索
搜索

CSS3气球动画

ben800 发表于 Dev
49
ben800

我这里有点问题。:) 我尝试用 css3 制作一个很好的气球动画。Link我的问题是我希望黑线贴在地面上，然后稍微移动带有黑线的气球。就像风在左右吹气球:)

 .container {
     width: 640px;
     height: 480px;
     position: absolute;
     left: 25%;
     top: 25%;
     background: url('mario_time.jpg') no-repeat;
     background-size: cover;
     cursor: crosshair;
     position: absolute;

 }
 
 .balloon {
  display: inline-block;
  position: relative;
  top: 200px;
  left: 80px;
  -webkit-animation:inflatable 6s ease-in-out infinite;
  -moz-animation:inflatable 6s ease-in-out infinite;
  -o-animation:inflatable 6s ease-in-out infinite;
   animation:inflatable 6s ease-in-out infinite;
 }
 

.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: 38px;
  margin: 0 auto;
  padding-top: 30px;
  position: relative;
  top:22%;
}
.balloon > div {
  width:100px;
  height:130px; 
  border-radius:0;
  border-radius:80% 80% 80% 80%;
  margin: 0 auto;
  position: absolute;
  padding:10px;
  -webkit-transform-origin: bottom center; 
}
.balloon > div{
  background: rgb(30,144,255);;
  left: 0; 
  -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;
  &:before { 
   color: rgba(182, 15, 97, 0.9); ;
  }


}
.balloon > div:before {
  color:rgb(30,144,255);
  position:absolute;
  bottom:-11px;
  left: 52px;  
  content:"▲";
  font-size:1em;
}
.balloon > :after {
 display:inline-block;
 top:153px;
  top:167px;
  position:absolute;
  height:180px;
  width:3px;
  margin:0 auto;
  content:"";
  background:rgba(0,0,0,0.2); 
  left: 60px;
  pointer-events: none
}

/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {
  0%,100%{ -webkit-transform:translateY(0) rotate(-6deg);}
  50%{ -webkit-transform:translateY(0px) rotate(8deg); }
}
<!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>

 .container {
     width: 640px;
     height: 480px;
     position: absolute;
     left: 25%;
     top: 25%;
     background: url('mario_time.jpg') no-repeat;
     background-size: cover;
     cursor: crosshair;
     position: absolute;

 }
 
 .balloon {
  display: inline-block;
  position: relative;
  top: 200px;
  left: 80px;
  -webkit-animation:inflatable 6s ease-in-out infinite;
  -moz-animation:inflatable 6s ease-in-out infinite;
  -o-animation:inflatable 6s ease-in-out infinite;
   animation:inflatable 6s ease-in-out infinite;
 }
 

.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: 38px;
  margin: 0 auto;
  padding-top: 30px;
  position: relative;
  top:22%;
}
.balloon > div {
  width:100px;
  height:130px; 
  border-radius:0;
  border-radius:80% 80% 80% 80%;
  margin: 0 auto;
  position: absolute;
  padding:10px;
  -webkit-transform-origin: bottom center; 
}
.balloon > div{
  background: rgb(30,144,255);;
  left: 0; 
  &:before { 
   color: rgba(182, 15, 97, 0.9); ;
  }


}
.balloon > div:before {
  color:rgb(30,144,255);
  position:absolute;
  bottom:-11px;
  left: 52px;  
  content:"▲";
  font-size:1em;
}
.balloon > :after {
 display:inline-block;
 top:153px;
  top:167px;
  position:absolute;
  height:180px;
  width:3px;
  margin:0 auto;
  content:"";
  background:rgba(0,0,0,0.2); 
  left: 60px;
  pointer-events: none;
        -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;
    -webkit-transform-origin: bottom; 

}

/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {
  0%,100%{ -webkit-transform:translateY(0) rotate(-6deg);}
  50%{ -webkit-transform:translateY(0px) rotate(8deg); }
}
<!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>

如果我像上面这样使用我的 css，我可以正确移动黑线，但我不能像我想要的那样移动气球：/。

用户9674579

也许这就是你想要的？

不完全是您想要的，但有点相似（没有图形），
可能您必须根据需要对其进行调整:)

:root {
  --swings: calc(60 / 10 * 2s);
  --swing-time: var(--swings);
}

.balloon {
  position: relative;
  top: -40px;
  left: -10px;
  height: 30px;
  background: blue;
  border-radius: 80% 80% 80% 80%;
  width: 30px;
}

.stick {
  position: relative;
  transform-origin: 50% 100%;
  top: 40px;
  margin-left: 50px;
  float: left;
  height: 70vh;
  background: black;
  width: 8px;
  animation: swing var(--swing-time) ease-in-out infinite;
}

@keyframes swing {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(8deg);
  }
}
<div class="stick">
  <div class="balloon">
  </div></div>
<div class="stick">
  <div class="balloon">
  </div></div>
<div class="stick">
  <div class="balloon">
  </div>
</div>
<div class="stick">
  <div class="balloon">
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS3 onclick动画

CSS3动画不动

CSS3动画问题

CSS3 动画重置

CSS3动画指环

CSS3动画-平滑无限动画

CSS3动画延迟仅在右侧

无法播放CSS3动画

使用CSS3动画的链接缩进

Li上的CSS3动画删除

CSS3无限动画图

从CSS3动画中删除JavaScript

CSS3动画链接的作品很奇怪

使用CSS3动画更改文字？

CSS3旋转动画

CSS3动画波效果

中心比例动画css3

动画管道（画布，JavaScript或CSS3）

IE9的CSS3动画

显示css3动画2次

CSS3自旋动画

这个css3动画如何运作？

仅限CSS3的类盲动画

更少：结合多个CSS3动画

CSS3动画交替闪烁

如何控制CSS3动画的时间

CSS3动画-平滑无限循环

在无限的CSS3动画中暂停

如何使用CSS3制作动画

TOP 榜单

  1. 1

    Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

  2. 2

    使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

  3. 3

    SQL Server中的非确定性数据类型

  4. 4

    Swift 2.1-对单个单元格使用UITableView

  5. 5

    如何避免每次重新编译所有文件？

  6. 6

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  7. 7

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  8. 8

    应用发明者仅从列表中选择一个随机项一次

  9. 9

    在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

  10. 10

    HttpClient中的角度变化检测

  11. 11

    在Wagtail管理员中，如何禁用图像和文档的摘要项？

  12. 12

    如何了解DFT结果

  13. 13

    Camunda-根据分配的组过滤任务列表

  14. 14

    错误：找不到存根。请确保已调用spring-cloud-contract：convert

  15. 15

    为什么此后台线程中未处理的异常不会终止我的进程？

  16. 16

    构建类似于Jarvis的本地语言应用程序

  17. 17

    使用分隔符将成对相邻的数组元素相互连接

  18. 18

    您如何通过 Nativescript 中的 Fetch 发出发布请求？

  19. 19

    通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

  20. 20

    使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

  21. 21

    使用 text() 獲取特定文本節點的 XPath

热门标签

归档