编写自己的代码库

1.前言

在月初的时候，发了CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）。js的代码库也发过两次，两篇文章。之前也写了css3的热身实战，既然热身完了，是时候开始封装css3的代码库了，相比起js的代码库，css3的代码库的逻辑性就更加简单了！可以说只要打上注释和一张效果图就可以让大家明白了其中的原理了！

我写代码库的时候，动画效果主要是参考了三个开源项目，nec，hover.css，animate.css这三个项目的质量非常的高，建议大家去了解。

源码已经放到github上面了，大家可以去看，也欢迎大家star一下！ec-css。

我指出这三个库并不是叫大家去拿别人的代码，稍微修改一下，或者直接拷贝到自己的项目上，然后就说是自己的项目。我是让大家去看别人的代码，学习别人的实现方式或者动画效果，然后再用自己的方式实现，当然如果把别人的项目，增删改查到面目全非的地步，这个我个人觉得可以说是自己的项目了！强调一点，不要直接复制别人的代码，放到自己的项目上，然后说是自己开发的，这是不尊重别人的成果，对自己的技术水平提升的帮助也较少。我写文章，虽然也会给出代码，但是我的目的是提供大家参考的，希望给让大家学习到知识或者发散思维，写出更好的作品。之前也说过，。

声明

1.下面将会看到很多个类似这样的举行，都是span标签，样式都是给出的css

2.关于class命名方式，l代表left，r代表right，t代表top，b代表bottom，c代表center，m代表middle。切记

文章比较长，但是说得就是两点，大家看得也应该会很快

1.写出一些hover动画和预设动画的运行效果，并且贴出代码

2.发现几个动画组合，和加上无限动画，反向动画，会有不一样的效果，并且继续研究，看下能不能研究出不一样的东西！

2.hover动画

说了那么多，是时候进入正文了，

首先是hover动画，关于这个概念，我解释下，就是鼠标移上去触发的动画，就是触发了鼠标的hover事件时能看到的动画！下面，按照类型，一个一个的写！

2-1.简单动画2-1-1大小变化

html

css

2-1-2形状变化

html

css

2-1-3旋转角度变化

html

css

2-1-4位移变化

html

css

2-1-5边框变化

html

css

2-1-6阴影变化

(gif图看得效果太难看了，大家可以去github下载看)

html

css

2-1-7透明度变化

html

css

2-1-8圆角变化

html

css

2-2.颜色动画效果

这部分的动画主要是利用:before和:after进行实现的，所以，大家如果使用的时候，切记:before和:after没有被占用，否则会显示不正常

2-2-1.颜色块变化

因为这块内容很像，我就一大块一起说，大家看代码的时候要留神注意。看代码看不明白，直接在github下载，然后运行文件，边调试边看效果！这样大家就很容易明白了！

html

css

2-2-2.颜色上下划线变化

这里也是一大块一起说，看代码可能会更乱，所以大家看代码的时候要更加留神注意。看代码看不明白，直接在github下载，然后运行文件，边调试边看效果！这样大家就很容易明白了！

html

css

2-2-3箭头动画

html

css

2-3-1闪烁效果

html

css

2-3-2闹钟振铃效果

html

css

2-3-3摇摆效果

html

css

2-3-4摇晃效果

html

css

2-3-5抖动效果

html

css

2-3-6弹跳效果

html

css

3.预设动画

受限于篇幅的长度，我也不想分开两篇文章写。关于这个预设动画，我就简单的说一下，写一下，我直接给一个大概的操作演示，和完整的代码！反正写法这个也是比较单一，无非就是改一个类名而已。难的是动画的一些编写，这个需要创意，大家可以上网参考。

不贴出，需要浏览请移步到github，在浏览器打开文件，一看调试一边看，这样会很简单，很容易的明白）