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. 粒子滤波跟踪移动机器人(MATLAB Robotics System Toolbox)

    MathWorks从MATLAB 2015a开始推出与ROS集成的Robotics System Toolbox(机器人系统工具箱),它为自主移动机器人的研发提供现成的算法和硬件接口. 粒子滤波基本流 ...

  2. Mac Mini 2011 mid 安装Ubuntu18.06.1 Server

    在Mac mini上原来是安装的ESXi5.5, 时间比较久了, 因为内存只有8g, 跑不了几个vm, 逐渐闲置. 现在打算重新装一个Ubuntu Sever用来跑docker. 制作启动U盘 参考  ...

  3. MySQL与OLAP:分析型SQL查询最佳实践探索

    搞点多维分析,糙快猛的解决方式就是使用ROLAP(关系型OLAP)了.数据经维度建模后存储在MySQL,ROLAP引擎(比方开源的Mondrian)负责将OLAP请求转化为SQL语句提交给数据库.OL ...

  4. 【laravel5.4】安装predis

    1.服务器先安装redis-server,这是毋庸置疑的!!! 2.服务器开启redis-server,配置相关参数 3.laravel执行 : $  yourPhpPath composer.pha ...

  5. C# 正则表达式过滤危险HTML

    下面是两个过滤的方法 /// <summary> /// 此处过滤危险HTML方法 /// </summary> /// <param name="html&q ...

  6. PHPNow升级PHP版本为5.3.5的方法(转)

    PHPNow升级PHP版本为5.3.5的方法 原文:http://sharebar.org/1142.html 在WIN上有时候需要测试一些PHP程序,又不会自行独立配置环境,那么PHPNow是非常好 ...

  7. lu协程练习

    生产者和消费者问题:当协程调用yield时,从一个悬而未决的resume中返回.简单的协程练习: function receive() local status,value = coroutine.r ...

  8. apache配置中ProxyPassReverse指令的含义

    apache中的mod_proxy模块主要作用就是进行url的转发,即具有代理的功能.应用此功能,可以很方便的实现同tomcat等应用服务器的整合,甚者可以很方便的实现web集群的功能. 例如使用ap ...

  9. 使用 Cobbler 自动化和管理系统安装

    设置一个网络环境可能涉及到许多步骤,才能为开始安装做好准备.您必须: 配置服务,比如 DHCP.TFTP.DNS.HTTP.FTP 和 NFS 在 DHCP 和 TFTP 配置文件中填入各个客户端机器 ...

  10. iphone 恢复出厂设置方法

    1.下载安装并打开itunes. 2.让手机进入恢复模式: 一.先长按住电源键,出现关机选项时,请滑动关机: 二.随后再按电源键开机,屏幕会出现苹果标志,不要松开电源键: 三.接着再按住主屏 Home ...