CSS动画集合可直接生成动画代码 – AniCollection

短命女 2022-08-07 11:42 117阅读 0赞

CSS动画实现比JS简单很多，但是对于新手来说还是很多代码的，而且还要不停的刷新来计算动画效果，不过没关系，今天小编为大家分享一个可以在线生成CSS动画的工具：AniCollection，而且他们的动画数量很多，能满足一般需要求了。

PS：类似工具还有[《在图形界面上制作CSS3动画：cssanimate》][CSS3_cssanimate]

[![143921h8xo9sb8o98hobg8.png][]][143921h8xo9sb8o98hobg8.png]

目前AniCollection上有很多不错的动画特效，比较适用于鼠标HOVER或点击事件，当然最主要的是能直接在线生成，太方便了。

使用方法

STEP 1: 选择你要的动画效果，点击“眼睛”图标。

[![143949wlxh63nfjj7nlfhf.png][]][143949wlxh63nfjj7nlfhf.png]

STEP 2: 然后在下面通过下面TAG选项框，把CSS和HTML的代码复制到你的网页上即可。

[![144012ssl6llebawgg1k71.png][]][144012ssl6llebawgg1k71.png]

此外你还要以用jQuery来控制动画，请点击jQuery tab查看。

前端工具名称：AniCollection

官方[网站][Link 1]：[http://anicollection.github.io][http_anicollection.github.io]

[CSS3_cssanimate]: http://www.html5cn.org/article-7829-1.html
[143921h8xo9sb8o98hobg8.png]: http://www.html5cn.org/data/attachment/portal/201503/30/143921h8xo9sb8o98hobg8.png
[143949wlxh63nfjj7nlfhf.png]: http://www.html5cn.org/data/attachment/portal/201503/30/143949wlxh63nfjj7nlfhf.png
[144012ssl6llebawgg1k71.png]: http://www.html5cn.org/data/attachment/portal/201503/30/144012ssl6llebawgg1k71.png
[Link 1]: http://www.html5cn.org/
[http_anicollection.github.io]: http://anicollection.github.io/

发表评论取消回复

表情：

评论列表（有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

文章目录一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例一、CSS3 动画简介

我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 91 阅读

相关 CSS动画

效果图： ![20210420183258301.gif][] 实现效果描述: 子元素相对父元素水平垂直居中并重复循环放大缩小实现代码： <!DOCTYPE

Dear 丶/ 2023年01月14日 12:58/ 0 赞/ 106 阅读

相关 css 动画

上下滑动 html <div class="kaiqi">点击开启</div> css .kaiqi { color: ffffff;

川长思鸟来/ 2022年11月05日 05:24/ 0 赞/ 97 阅读

相关 css动画

在CSS中主要通过@keyframes和animation来实现的： @keyframes制定了一个元素的css样式变化的方式，也就是通过css央视的逐步改变，让它动起来，也

怼烎@/ 2022年10月29日 13:20/ 0 赞/ 296 阅读

相关 CSS动画集合可直接生成动画代码 – AniCollection

CSS动画实现比JS简单很多，但是对于新手来说还是很多代码的，而且还要不停的刷新来计算动画效果，不过没关系，今天小编为大家分享一个可以在线生成CSS动画的工具：AniColle

短命女/ 2022年08月07日 11:42/ 0 赞/ 118 阅读

相关 CSS动画

CSS3 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3 @keyframes

Bertha 。/ 2022年06月07日 02:51/ 0 赞/ 183 阅读

相关 css动画

纯CSS3实现的8种Loading动画效果<div class="load1" > <div class="loader">加载中</div>

系统管理员/ 2022年06月05日 08:42/ 0 赞/ 156 阅读

相关 css动画

动画移动时间 animation: move 13s; 一直移动,无限循环 animation-iteration-count: infinite; 从A移动到

叁歲伎倆/ 2022年06月05日 00:53/ 0 赞/ 175 阅读

相关 CSS动画

摘自阮一峰老师的博客 [http://www.ruanyifeng.com/blog/2014/02/css\_transition\_and\_animation.html]

喜欢ヅ旅行/ 2022年05月10日 00:54/ 0 赞/ 159 阅读

相关 CSS-动画

前言本文主要内容：过渡：transition 2D 转换 transform（scale，translate，rotate）

冷不防/ 2022年05月03日 09:30/ 0 赞/ 159 阅读