1.从chrome webstore下载

chrome应用商店安装地址

2.直接下载crx文件

如果无法访问到chrome的应用商城,可以选择下载app.crx文件,在chrome中打开chrome://extensions/页面,将app.crx插件拖动到扩展程序面板即可完成安装。
下载地址

3.自行构建

  • npm install -g vue-cli

  • git clone https://github.com/vace/css3-animation-generator

  • cd css3-animation-generator && npm install

  • npm run app

样式导出规则:

  1. 优先使用带有 c3前缀的class,如 <span class="c3-test">animate it</span>

  2. 如果存在class,则使用class选择器,如 <span class="fl animate">animate it</span>

  3. 如果定义了Id,则使用id选择器,如 <span id="anim1">animate it</span>

  4. 如果都不存在,则使用内部自定义的选择器查找方案

例子

css3动画制作工具的更多相关文章

  1. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  2. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  3. 关于HTML5在动画制作工具Animatron的一些问题

    Animatron是国外一款在线HTML5动画制作工具,网址:www.animatron.com 当然,想使用的话,是需要FQ的. 用animatron制作好的动画是可以下载为代码和GIF的,这时候付 ...

  4. MFC实现Gif动画制作工具

    每天来博客园逛,看里面各种好文章,发现自己已经许久没有分享点什么了. 前几天用MFC设计了一个小型的Gif动画制作工具,思路如下: 1.支持图片格式:"*.jpg","* ...

  5. SVG动画制作工具 , 从此抛弃臃肿的gif

    VG简介 只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持 ...

  6. [置顶] 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam

    由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...

  7. 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam

    由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...

  8. 简单CSS3动画制作

    本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...

  9. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

随机推荐

  1. oracle 批量删除表数据的4种方式

      1.情景展示 情景一: 删除PRIMARY_INDEX_TEST表中,MINDEX_ID字段为空的数据 情景二: 删除VIRTUAL_CARD_TEST表中的脏数据 2.解决方案 情景一的解决方案 ...

  2. 【DB2】数据库的事务日志已满。SQLSTATE=57011

    问题描述 在使用数据库的时候报错如上图,我们先使用db2 get db cfg for sample查看相关配置参数,其中sample为数据库名称 C:\Users\Thinkpad>db2 g ...

  3. Android开发之底部导航栏标准

    以下是封装的库源码: package com.example.oldtab; import java.util.ArrayList; import android.content.res.Resour ...

  4. PHP5.4 需要添加的configure参数

    ./configure --prefix=/usr/local/php --with-gd=/usr/local/gd --with-jpeg-dir=/usr/local/jpeg --with-p ...

  5. ansible2.4.x RPM急速安装

    概述: 在centos上安装ansible如果在线联网安装甚是方便,实际上大部分在内网安装隔绝外网,都是离线安装.如何急速安装软件,使我们迫切的愿望 环境: python2.6 ansible2.4. ...

  6. FTP命令字和响应码解释

    FTP命令: 命令  描述  ABOR 中断数据连接程序 ACCT <account> 系统特权帐号 ALLO <bytes>  为服务器上的文件存储器分配字节 APPE &l ...

  7. Javascript 计算字符串所占字节数

    最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的.而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16. ...

  8. IOS中文本框输入自动隐藏和自动显示

    uilabe和UIText扩展方法 +(UILabel*)LabWithFrame:(CGRect)_rect text:(NSString*)aText textColor:(UIColor*)aC ...

  9. webview中事件的用法

    封装 MBProgressHud ==================================== #import "MBProgressHUD.h" @interface ...

  10. (原+译)pytorch中保存和载入模型

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/8108466.html 参考网址: http://pytorch.org/docs/master/not ...