如何把css3动画转化成gif

如何把css3动画转化成gif

我的思路是用网页截图的js类库，每隔一定时间截一下图，让后用gif.js生成gif。

1、首先看看一个动画代码：（不是什么高大上的效果，只是简单的颜色变化） @-webkit-keyframes indexframe { 0% {background-color:#000000; color:#ffffff;} 50% {background-color:#ffffff; color:#000000;} 100% {background-color:#000000; color:#ffffff;} } #index_href { -webkit-animation: indexframe 8s infinite; display:block; position:relative; top:400px; left:180px; width:200px; height:80px; border-radius:15px; text-align:center; line-height:80px; font-style:italic; font-size:24px; text-decoration:none; color:#ffffff; background-color:#000000; opacity:0.5; } 为了方便，也就写了兼容chrome的css3样式，其他的换个前缀就好，在这里就不过多的说了。 2、为这个a（id=“index_href”）添加一个伪类： 这是原本准备添加的： #index_href:hover { background-color:#ffffff; color:#000000; opacity:0.5; } 但是运行之后发现动画因为设置的是 infinite //无限循环的效果 所以当需要触发伪类的效果时，动画还是会依然进行，这时候就需要停止之前的无限循环的动画了。 用css3的思路就是重新设置一个伪类的动画，把前面的动画给覆盖了。这样的话，我们就可以把伪类要改变的东西设置为动画效果，然后直接覆盖上去就行了。代码如下： #index_href:hover { -webkit-animation:indexend 0s; color:#000000; opacity:0.5; } @-webkit-keyframes indexend { 0% {background:#000000;} 100% {background:#ffffff;} } 这里重新定义一个动画，命名为indexend，然后添加到hover伪类中去，设置动画的过渡时间为0s，这样可以达到瞬间变道动画的结束样式，以达到hover样式的直接改变。 这样就成功的实现了之前动画的停止与后来样式的变化。