Заполнение объекта водой
1,00
р.
Как сделать чтобы вода в этом примере https://jsfiddle.net/wsygj8q4/2/ обтекала бутылку, а не накладывалась на нее?
.body { width: 149px height: 706px background-image: url("http:/010.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:/04.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 }
Ответ
Можно использовать свойство mask-image - работает во всех современных браузерах, кроме IE. Для этого создадим div-обертку, и наложим на него маску бутылки (для этого сделал b/w бутылку в png):
.body { width: 149px height: 706px background-image: url("http:/010.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:/04.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:/012.radikal.ru/i319/1711/0a/d4a760a32e93.png") mask-image: url("http:/012.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 }
.body { width: 149px height: 706px background-image: url("http:/010.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:/04.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 }
Ответ
Можно использовать свойство mask-image - работает во всех современных браузерах, кроме IE. Для этого создадим div-обертку, и наложим на него маску бутылки (для этого сделал b/w бутылку в png):
.body { width: 149px height: 706px background-image: url("http:/010.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:/04.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:/012.radikal.ru/i319/1711/0a/d4a760a32e93.png") mask-image: url("http:/012.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 }
