有没有办法从左中心开始为 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

一种可能性是使用一个伪元素覆盖图像，并用阴影掩盖它。

然后你可以显示它移动伪

.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>