主页 / 问题 / 744977
Accepted
Pantera
Asked:2020-11-15 17:50:56 +0000 UTC2020-11-15 17:50:56 +0000 UTC

用水填充物体

  • 772

如何在此示例中制作水https://jsfiddle.net/wsygj8q4/2/ 环绕瓶子而不是重叠？

.body {
  width: 149px;
  height: 706px;
  background-image: url("http://s010.radikal.ru/i311/1711/9c/d679c55a8026.png");
  background-repeat: no-repeat;
  background-size: 122px 298px;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 10px;
}

.body .tank {
  width: 94px;
  height: 182px;
  background-image: url("http://s04.radikal.ru/i177/1711/a6/141640ec7964.png");
  background-size: 103px 180px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 23px;
}

#water {
  background-image: url("https://media.giphy.com/media/xTiTnrfZfRPJ520yly/giphy.gif");
  background-position: center;
  position: absolute;
  bottom: 0px;
  opacity:0.3;
  width: 95px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#tank:hover #water {
  height: 350px;
  background-position: top left;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
}
<div style="text-align:left">
  <div class="body">
    <div class="tank">
      <div id="water" style="height:50%"></div>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    您可以使用 mask-image 属性 - 适用于除 IE 之外的所有现代浏览器。为此，创建一个 div-wrapper，并在其上放置一个瓶子遮罩（为此，我在 png 中制作了一个黑白瓶子）：

    .body {
  width: 149px;
  height: 706px;
  background-image: url("http://s010.radikal.ru/i311/1711/9c/d679c55a8026.png");
  background-repeat: no-repeat;
  background-size: 122px 298px;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 10px;
}

.body .tank {
  width: 103px;
  height: 182px;
  background-image: url("http://s04.radikal.ru/i177/1711/a6/141640ec7964.png");
  background-size: 103px 180px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 23px 18px;
}

.water-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: inline-block;
  -webkit-mask-image: url("http://s012.radikal.ru/i319/1711/0a/d4a760a32e93.png");
  mask-image: url("http://s012.radikal.ru/i319/1711/0a/d4a760a32e93.png");
}

#water {
  background-image: url("https://media.giphy.com/media/xTiTnrfZfRPJ520yly/giphy.gif");
  background-position: center;
  position: absolute;
  bottom: 0px;
  opacity:0.3;
  width: 103px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#tank:hover #water {
  height: 350px;
  background-position: top left;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
}
    <div style="text-align:left">
  <div class="body">
    <div class="tank">
    <div class="water-wrapper">
      <div id="water" style="height:50%"></div>
      </div>
    </div>
  </div> 
</div>

    • 18

相关问题