怎么实现微信聊天时的气泡图

html-css019

怎么实现微信聊天时的气泡图,第1张

1.canvas，绘制路径，然后再clip图片,本文暂不描述 2.另一种就是利用css3的新属性clip-path属性，绘制出要切割的路径，然后再给clip-path属性赋值,火狐和IE未实现此属性

在w3school上面查到一下，CSS3中的动画由animation和@keyframes 结合实现出来的。以往项目已来，一直做的是单个动画，现在讲解一下两个动画效果如何组合在一起

首先了解一下animation的所有属性 W3school是这样定义的：

然后我们用@keyframes 规则来创建两个我们要执行的动画

接下来我们把写好的两个效果捆绑在“div”元素上 ， 如下：

这样效果就完成了。

【PS】这里并没有写兼容，说一下浏览器兼容。