动画css反射

2023年10月20日 213次阅读

我绘制一个图标,并在css中有一个悬停状态,播放webkit动画以使图标反弹.我希望反射反向反弹,以便它保持在地面而不是跟随图标,但反射属性不会生成动画.有什么不对或有其他选择吗？我想尽可能避免添加元素来实现这一点.

请查看此jsfiddle以获取我的代码：http://jsfiddle.net/2rmmU/

仅供参考,我使用webkit反射,因此您需要一个webkit浏览器才能看到它.

最佳答案 它似乎是-webkit-box-reflect不是很强大,不能动画.

但是,您可以使用伪元素实现所需的效果.

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

Demo

现在,再次显示svg,flip it,并应用gradient mask.

点赞