25

Как сделать чтобы вода в этом примере 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>

6
  • у вас сам танк не прозрачный, если изображение спрятать за него, то не будет видно воды. Вам нужно сделать 2 пнг. 1ый пнг на фон, потом вода, потом пнг с белым не прозрачным фоном вокруг бутылки, и с прозрачным где должна быть вода
    – kizoso
    15 ноя 2017 в 9:59
  • 1
    png бутылки должно быть полупрозрачной, чтобы под ней было видно воду, остальное z-index, если я правильно задачу понял
    – DaemonHK
    15 ноя 2017 в 9:59
  • @DaemonHK, с opacity хорошо получилось, а z-index как применить?
    – Pantera
    15 ноя 2017 в 10:12
  • Так у вас же обычный бекграунд имедж стоит. Разве что маской детайте... Ну или если допустимо, чтобы вода не была в голубых ободах - подгоняйте по размер бутыли
    – MihailPw
    15 ноя 2017 в 10:17
  • а если эту бутылку нарисовать в svg и вашу анимацию поставить фоном ?
    – user33274
    15 ноя 2017 в 10:28

1 ответ 1

18

Можно использовать свойство mask-image - работает во всех современных браузерах, кроме IE. Для этого создадим div-обертку, и наложим на него маску бутылки (для этого сделал b/w бутылку в 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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.