css - 动画CSS反射

Question

我画了一个图标，并在播放 webkit 动画的 css 中有一个悬停状态，使图标弹跳。我希望反射反向反弹，以便它保持在地面上而不是跟随图标，但是反射属性不会动画。有什么问题还是有其他选择？我想尽可能避免添加元素来实现这一点。

请查看我的代码的 jsfiddle:http://jsfiddle.net/2rmmU/

仅供引用，这使用了 webkit 反射，因此您需要 webkit 浏览器才能看到它。

Answer 1

好像是-webkit-box-reflect不是很健壮，不能做动画。

但是，您可以使用伪元素实现您正在寻找的效果。

#twitter_logo:after{
    content:'';
    height:50px;
    width:50px;
    position:absolute;
    top:54px;
    left:0;
}

Demo

现在，再次显示 svg，flip it , 并申请 gradient mask .