快速给页面加上炫酷 css3 动画的 chrome 插件。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3286 days ago, the information mentioned may be changed or developed.

快速给页面加上炫酷 css3 动画的 chrome 插件

使用

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

样式导出规则：

优先使用带有 c3前缀的 class，如 animate it
如果存在 class，则使用 class 选择器，如 animate it
如果定义了 Id，则使用 id 选择器，如 animate it
如果都不存在，则使用内部自定义的选择器查找方案

例子

Remark

Supplement 1 · Apr 28, 2017

这是第一版本，因为部分脚本中使用的呢 javascript 的`Set`，所以大家尽量升级 chrome 到比较新的版本。本人测试使用的是 360 最新版本和 chrome50+都可以正常使用！导出的动画可能需要加前缀才可以兼容所有浏览器，推荐大家使用 autoprefix，或者使用在线版本的 http://autoprefixer.github.io/，后期考虑加入这个功能。

10 replies • 2017-05-01 18:36:03 +08:00