有沒有一種方法可以從左中心開始爲CSS中的圖像顯示液體？

Question

我看到一個廣告這部動畫，我正在尋找一種方式用CSS來做到這一點，希望最小的無JQuery的。我主要是在尋找一種方法來做一個動畫或過渡的圖像顯示。適用於所有瀏覽器的東西。

我開始用這款內置了另一個小提琴，我發現，現在來看它揭示了懸停，而不是定時的，但它不出來的方式爲GIF相同。

https://jsfiddle.net/ff43gn16/1/

HTML：

<div class="outer"> 
    <div class="middle"> 
    <div class="inner"> 
     <img src="http://i.imgur.com/hy35kqY.png?1"> 
    </div> 
    </div> 
    Hover Here 
</div> 

CSS：

.outer { 
    width: 90%; 
    height: 110px; 
    background: #0C61A5; 
} 

.middle { 
    width: 0px; 
    height: 0px; 
    overflow: hidden; 
    border-top-right-radius: 50%; 
    border-bottom-right-radius: 50%; 
    position: absolute; 
    transition-property:all; 
    transition-duration: 1s; 
} 

.outer:hover > div { 
    width: 425px; 
    height: 110px; 
    border-radius: 0px; 
    margin-top: 0px; 
    margin-left: 0px; 
} 

.outer:hover > div > div { 
    margin-top: 0px; 
    margin-left: 0px 
} 

我認爲它不看右邊的一個原因是，動畫是從頂部開始我不知道如何讓它從中心開始顯示。它也可能是它揭示的方式不夠圓潤。

Answer 1

一個posibility是使用覆蓋圖像，並用陰影oculting它的僞元件。

然後你就可以揭示其移動僞

.container { 
 
    width: 600px; 
 
    height: 400px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 50px; 
 
} 
 

 
.container:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 300%; 
 
    height: 150%; 
 
    background-color: transparent; 
 
    top: -25%; 
 
    border-radius: 100%; 
 
    box-shadow: inset -900px 0px 140px 0px blue; 
 
    transform: translateX(-950px); 
 
    transition: transform 2s; 
 
} 
 

 
.container:hover:after { 
 
    transform: translateX(400px); 
 
} 
 
.image { 
 
    width: 600px; 
 
    height: 400px; 
 
     background-image: url(http://lorempixel.com/600/400/nature); 
 
    background-size: cover; 
 

 
}

<div class="container"> 
 
    <div class="image"></div> 
 
    </div>

Answer 2

此效果可以用一個簡單的在CSS

這裏剪貼蒙版能夠實現，將解釋和如何創建它展示樣本的來源。

https://css-tricks.com/clipping-masking-css/

和其他類似的方法

-webkit-clip-path: circle(100% at 50% 50%); 
clip-path: circle(100% at 50% 50%); 

http://codepen.io/danielhickman/pen/bVBzXo

這裏是一個演示實現你的例子中，我創建：

https://jsfiddle.net/dimshik/ff43gn16/4/

.outer { 
 
    width: 500px; 
 
    height: 110px; 
 
    background: #0C61A5; 
 
    position: relative; 
 
} 
 

 
.clip-ellipse { 
 
    clip-path: ellipse(0px 0px at 0px 55px); 
 
    -webkit-clip-path: ellipse(0px 0px at 0px 55px); 
 
    -moz-clip-path: ellipse(0px 0px at 0px 55px); 
 
    -o-clip-path: ellipse(0px 0px at 0px 55px); 
 
    -ms-clip-path: ellipse(0px 0px at 0px 55px); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transition-property: all; 
 
    transition-duration: 1s; 
 
} 
 

 
.outer:hover .clip-ellipse { 
 
    clip-path: ellipse(500px 100px at 0px 55px); 
 
    -webkit-clip-path: ellipse(500px 100px at 0px 55px); 
 
    -moz-clip-path: ellipse(500px 100px at 0px 55px); 
 
    -o-clip-path: ellipse(500px 100px at 0px 55px); 
 
    -ms-clip-path: ellipse(500px 100px at 0px 55px); 
 
}

<div class="outer"> 
 
    <img src="http://i.imgur.com/hy35kqY.png?1" class="clip-ellipse"> Hover Here 
 
</div>