CSS3有哪些好用的属性？

1.前言

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

nec（http://nec.netease.com/library/category/#animation）

hover.css（https://ianlunn.github.io/Hover/）

animate.css（https://daneden.github.io/animate.css/）

这三个项目的质量非常的高，建议大家去了解。

源码已经放到github上面了，大家可以去看，也欢迎大家star一下：

ec-css（https://github.com/chenhuiYj/ec-css）

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

声明:

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

span {
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            color: #333;
            background: #ccc;
            min-width: 80px;
            padding: 0 10px;
            margin: 10px;
        }

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

<span class="ech-big">big</span>
    <span class="ech-small">small</span>

css

.ech-big,.ech-small {
        transition: all .4s;
    }
    .ech-big:hover {
        transform: scale(1.2);
    }
    .ech-small:hover {
        transform: scale(.9);
    }

2-1-2形状变化

html

<span class="ech-skew-l">skew-l</span>
    <span class="ech-skew-r">skew-r</span>
    <span class="ech-skew-l-t">skew-l-t</span>
    <span class="ech-skew-r-t">skew-r-t</span>
    <span class="ech-skew-l-b">skew-l-b</span>
    <span class="ech-skew-r-b">skew-r-b</span>

css

.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{
        transition: all .4s;
    }
    .ech-skew-r-t, .ech-skew-l-t {
        transform-origin: 0 100%;
    }
    .ech-skew-r-b, .ech-skew-l-b {
        transform-origin: 100% 0;
    }
    .ech-skew-l:hover {
        transform: skew(-15deg);
    }
    .ech-skew-r:hover {
        transform: skew(15deg);
    }
    .ech-skew-l-t:hover {
        transform: skew(-15deg);
    }
    .ech-skew-r-t:hover {
        transform: skew(15deg);
    }
    .ech-skew-l-b:hover {
        transform: skew(15deg);
    }
    .ech-skew-r-b:hover {
        transform: skew(-15deg);
    }

2-1-3旋转角度变化

html

<span class="ech-grow-rotate-l">grow-rotate-l</span>
    <span class="ech-grow-rotate-r">grow-rotate-r</span>
    <span class="ech-rotate5">rotate5</span>
    <span class="ech-rotate15">rotate15</span>
    <span class="ech-rotate30">rotate30</span>
    <span class="ech-rotate60">rotate60</span>
    <span class="ech-rotate90">rotate90</span>
    <span class="ech-rotate180">rotate180</span>
    <span class="ech-rotate360">rotate360</span>
    <span class="ech-rotate-5">rotate-5</span>
    <span class="ech-rotate-15">rotate-15</span>
    <span class="ech-rotate-30">rotate-30</span>
    <span class="ech-rotate-60">rotate-60</span>
    <span class="ech-rotate-90">rotate-90</span>
    <span class="ech-rotate-180">rotate-180</span>

css

.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{
    transition: all .4s;
    }
    .ech-grow-rotate-l:hover {
        transform: scale(1.1) rotate(4deg);
    }
    .ech-grow-rotate-r:hover {
        transform: scale(1.1) rotate(-4deg);
    }
    .ech-rotate-5:hover {
        transform: rotate(-5deg);
    }
    .ech-rotate-15:hover {
        transform: rotate(-15deg);
    }
    .ech-rotate-30:hover {
        transform: rotate(-30deg);
    }
    .ech-rotate-60:hover {
        transform: rotate(-60deg);
    }
    .ech-rotate-90:hover {
        transform: rotate(-90deg);
    }
    .ech-rotate-180:hover {
        transform: rotate(-180deg);
    }
    .ech-rotate5:hover {
        transform: rotate(5deg);
    }
    .ech-rotate15:hover {
        transform: rotate(15deg);
    }
    .ech-rotate30:hover {
        transform: rotate(30deg);
    }
    .ech-rotate60:hover {
        transform: rotate(60deg);
    }
    .ech-rotate90:hover {
        transform: rotate(90deg);
    }
    .ech-rotate180:hover {
        transform: rotate(180deg);
    }
    .ech-rotate360:hover {
        transform: rotate(360deg);
    }

2-1-4位移变化

html

<span class="ech-t">up</span>
    <span class="ech-b">bottom</span>
    <span class="ech-l">left</span>
    <span class="ech-r">right</span>

css

.ech-t,.ech-bottom,.ech-top,.ech-right{
        transition: all .4s;
    }
    .ech-t:hover {
        transform: translate3d(0, -10px, 0);
    }
    .ech-b:hover {
        transform: translate3d(0, 10px, 0);
    }
    .ech-l:hover {
        transform: translate3d(-10px, 0, 0);
    }
    .ech-r:hover {
        transform: translate3d(10px, 0, 0);
    }

2-1-5边框变化

html

<span class="ech-border">border</span>
    <span class="ech-border-in">border-in</span>

css

.ech-border,.ech-border-in{
        transition: all .4s;
    }
    .ech-border:hover {
        box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
    }
    .ech-border-in:hover {
        box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
    }

2-1-6阴影变化

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

html

<span class="ech-shadow">shadow</span>
    <span class="ech-shadow-in">shadow-in</span>
    <span class="ech-shadow-write">shadow-write</span>
    <span class="ech-shadow-big">shadow-big</span>

css

.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
        transition: all .4s;
    }
    .ech-shadow:hover {
        box-shadow: 0 0 10px #333;
    }   
    .ech-shadow-in:hover {
        box-shadow: inset 0 0 10px #333;
    }
    .ech-shadow-write:hover {
        box-shadow: inset 0 0 20px #fff;
    }
    .ech-shadow-big:hover {
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
        transform: scale(1.1);
    }

2-1-7透明度变化

html

<span class="ech-fade-out">fade-out</span>
    <span class="ech-fade-in">fade-in</span>

css

.ech-fade-out,.ech-fade-in{
        transition: all .4s;
    }
    .ech-fade-out:hover {
        opacity: .6;
    }
    .ech-fade-in {
        opacity: .5;
    }
    .ech-fade-in:hover {
        opacity: 1;
    }

2-1-8圆角变化

html

<span class="ech-rectangle">rectangle</span>
    <span class="ech-radius">radius</span>

css

.ech-radius,.ech-rectangle{
        transition: all .4s;
    }
    .ech-radius {
        border-radius: 10px;
    }
    .ech-radius:hover {
        border-radius: 0;
    } 
    .ech-rectangle:hover {
        border-radius: 10px;
    }

2-2.颜色动画效果

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

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

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

html

<span class="ech-overline-l">overline-l</span>
    <span class="ech-overline-r">overline-r</span>
    <span class="ech-underline-l">underline-l</span>
    <span class="ech-underline-r">underline-r</span>
    <span class="ech-underline-c">underline-c</span>
    <span class="ech-underline-c-out">underline-c-out</span>
    <span class="ech-overline-c">overline-c</span>
    <span class="ech-overline-c-out">overline-c-out</span>

css

/*上划线和下划线变化 当前元素样式设置相对定位*/
    .ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{
        position: relative;
        transition: all .3s;
        z-index: 1;
    }

    /*初始化:after:before大小和绝对定位*/
    .ech-overline-r:before, .ech-overline-l:before, .ech-underline-l:before, .ech-underline-r:before, .ech-underline-c:before, .ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after, .ech-underline-c-out:before, .ech-overline-c-out:before {
        position: absolute;
        transition: all .3s;
        content: "";
        display: block;
        background: #09f;
        z-index: -1;
        height: 4px;
        width: 100%;
        transform: scaleX(0);
    }

    /*上划线 左右出来*/
    .ech-overline-r:before {
        top: 0;
        left: 0;
        transform-origin: 100% 50%;
    }
    .ech-overline-l:before {
        top: 0;
        right: 0;
        transform-origin: 0 50%;
    }

    /*下划线 左右出来*/
    .ech-underline-r:before {
        bottom: 0;
        left: 0;
        transform-origin: 100% 50%;

    }
    .ech-underline-l:before {
        bottom: 0;
        right: 0;
        transform-origin: 0% 50%;
    }

    /**上划线 下划线 居中进来**/
    .ech-overline-c:before {
        top: 0;
        transform-origin: 0 50%;
    }
    .ech-overline-c:after {
        top: 0;
        transform-origin: 100% 50%;
    }
    .ech-underline-c:before {
        bottom: 0;
        transform-origin: 0 50%;
    }
    .ech-underline-c:after {
        bottom: 0;
        transform-origin: 100% 50%;
    }
    .ech-overline-c:before, .ech-underline-c:before {
        left: 0;
    }
    .ech-overline-c:after, .ech-underline-c:after {
        right: 0;
    }

    /*上划线 下划线-居中出去 */
    .ech-overline-c-out:before {
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .ech-underline-c-out:before {
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*hover效果*/
    .ech-overline-c:hover:after, .ech-overline-c:hover:before, .ech-underline-c:hover:after, .ech-underline-c:hover:before {
        transform: scaleX(.51);
    }
    .ech-overline-l:hover:before, .ech-overline-r:hover:before, .ech-underline-l:hover:before, .ech-underline-r:hover:before, .ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before {
        transform: scaleX(1);
    }

2-2-2箭头动画

html

<span class="ech-arrow-l">arrow-l</span>
    <span class="ech-arrow-r">arrow-r</span>
    <span class="ech-arrow-t">arrow-t</span>
    <span class="ech-arrow-b">arrow-b</span>
    <span class="ech-arrow-l-move">arrow-l</span>
    <span class="ech-arrow-r-move">arrow-r</span>
    <span class="ech-arrow-t-move">arrow-t</span>
    <span class="ech-arrow-b-move">arrow-b</span>

css

.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{
        position: relative;
        transition: all .3s;
        z-index: 1;
    }

    /*初始化箭头样式*/
    .ech-arrow-l:before, .ech-arrow-r:before, .ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before, .ech-arrow-r-move:before, .ech-arrow-t-move:before, .ech-arrow-b-move:before {
        position: absolute;
        transition: all .3s;
        content: "";
        display: block;
        z-index: -1;
        border-style: solid;
        margin: auto;
        width: 0;
        height: 0;
    }
    .ech-arrow-l:before, .ech-arrow-l-move:before {
        left: 0;
        top: 0;
        bottom: 0;
        border-width: 10px 10px 10px 0;
        border-color: transparent #ccc transparent transparent;
    }
    .ech-arrow-r:before, .ech-arrow-r-move:before {
        right: 0;
        top: 0;
        bottom: 0;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent #ccc;
    }  
    .ech-arrow-t:before, .ech-arrow-t-move:before {
        left: 0;
        top: 0;
        right: 0;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #ccc transparent;
    }
    .ech-arrow-b:before, .ech-arrow-b-move:before {
        left: 0;
        bottom: 0;
        right: 0;
        border-width: 10px 10px 0 10px;
        border-color: #ccc transparent transparent transparent;
    }
    .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move {
        transition: transform .3s;
    }

    /*hover效果*/
    .ech-arrow-l-move:hover {
        transform: translateX(10px);
    }
    .ech-arrow-r-move:hover {
        transform: translateX(-10px);
    }
    .ech-arrow-t-move:hover {
        transform: translateY(10px);
    }
    .ech-arrow-b-move:hover {
        transform: translateY(-10px);
    }
    .ech-arrow-l-move:hover:before, .ech-arrow-l:hover:before {
        transform: translateX(-10px);
    }
    .ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before {
        transform: translateX(10px);
    }
    .ech-arrow-t-move:hover:before, .ech-arrow-t:hover:before {
        transform: translateY(-10px);
    } 
    .ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before {
        transform: translateY(10px);
    }

2-3较复杂动画###

2-1和2-2的内容，都是利用过渡实现效果，那么这一块就是利用动画来实现效果！区别就是hover的写法是增加一个动画，动画的封装，难度就在于创意。

2-3-1闪烁效果

html

<span class="ech-flash">flash</span>

css

.ech-flash:hover {
        animation: flash .5s ease;
    }
    @keyframes flash {
        0%, 50%, 100% {
            opacity: 1;
        }
        25%, 75% {
            opacity: 0;
        }
    }

2-3-2闹钟振铃效果

html

<span class="ech-shake-time">shake-time</span>

css

/*仿闹钟振铃效果*/
    .ech-shake-time:hover {
        animation: shake-time 1s ease;
    }
    @keyframes shake-time {
        0% {
            transform: scale(1);
        }
        10%, 20% {
            transform: scale(0.9) rotate(-3deg);
        }
        30%, 50%, 70%, 90% {
            transform: scale(1.1) rotate(3deg);
        }
        40%, 60%, 80% {
            transform: scale(1.1) rotate(-3deg);
        }
        100% {
            transform: scale(1) rotate(0);
        }
    }

2-3-3摇摆效果

html

<span class="ech-wobble-c">wobble-c</span>
    <span class="ech-wobble-t">wobble-t</span>
    <span class="ech-wobble-b">wobble-b</span>

css

.ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t {
        transform-origin: 0 100%;
    }
    .ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b {
        transform-origin: 100% 0;
    } 
    .ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover {
        animation: wobble-x 1s ease-in-out;
    }
    @keyframes wobble-x {
        16.65% {
            -webkit-transform: skew(-12deg);
            transform: skew(-12deg);
        }
        33.3% {
            -webkit-transform: skew(10deg);
            transform: skew(10deg);
        }
        49.95% {
            -webkit-transform: skew(-6deg);
            transform: skew(-6deg);
        }
        66.6% {
            -webkit-transform: skew(4deg);
            transform: skew(4deg);
        }
        83.25% {
            -webkit-transform: skew(-2deg);
            transform: skew(-2deg);
        }
        100% {
            -webkit-transform: skew(0);
            transform: skew(0);
        }
    }

2-3-4摇晃效果

html

<span class="ech-swing">swing</span>

css

.ech-swing:hover {
        animation: swing .5s ease alternate;
    }

    @keyframes swing {
        20% {
            transform: rotate(15deg);
        }
        40% {
            transform: rotate(-10deg);
        }
        60% {
            transform: rotate(5deg);
        }
        80% {
            transform: rotate(-5deg);
        }
        100% {
            transform: rotate(0);
        }
    }

2-3-5抖动效果

html

<span class="ech-shake">shake</span>

css

.ech-shake:hover {
        animation: shake .5s ease;
    }
    @keyframes shake {
        0%, 100% {
            transform: translateX(0);
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translateX(-10px);
        }
        20%, 40%, 60%, 80% {
            transform: translateX(10px);
        }
    }

2-3-6弹跳效果

html

<span class="ech-bounce">bounce</span>

css

.ech-bounce:hover {
        animation: bounce 1s ease;
    }
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-30px);
        }
        60% {
            transform: translateY(-15px);
        }
    }

4.未知探索

好了，说完了hover动画和预设动画，我开发的时候，发现了这样一些好玩的东西，我也准备继续研究，也建议大家玩下，说不定哪天做出了了不起的东西！如下面的栗子！

下面说的动画，不分hover动画和预设动画，大家注意

4-1.无限执行动画

一个普通的动画，加上无限执行，一般会出现很友好的效果，

但是有些时候的效果差强人意

4-2.反向动画

在4-1的基础上，加上方向执行动画，也会有不一样的效果

没加反向动画效果

加上反向动画效果

4-3.组合效果

阴影效果和其它效果的组合，(gif看不出阴影效果，哎。。)

上面的几个的栗子，css代码不变，区别是html代码，多加了一些类名。

上面几个是我在开发时候发现的栗子，这个我会继续研究，也希望大家能研究，研究出什么好玩的效果，或者动画写法，欢迎分享！

5.鸡肋选择

在写css3代码库的时候，我也发现封装css3的一个鸡肋情况。

css3的效果太过于灵活，多样，封装非常容易出现众口难调的情况，以及每个项目的效果可能出现效果差不多，但就是不一样，这样就是说封装的库并不适合用在项目上。
还有一点在于，css3效果基本上每一个项目都是有用到，并且是常用，但是平常项目要用到的css3效果最多也就10个，而且也不难，手写很快可以实现，根本没必要去引一个插件或者库。

但是最后我还是坚持写下去了，原因如下：

如果项目开发，对动画效果的要求基本不会达到非常的严格的地步，我完全可以多引一个文件，增加我的开发效率，压缩过后的文件可能只有10K左右，可以接受。
就算在项目用不上，我也可以当作是练手，学习的作用。如果以后项目需要动画效果，即使动画效果跟我封装的不一样，我也可以看着来进行修改。
就算开发的时候没使用上这个库，万一有些动画，我写过，但是忘了怎么写，也可以回头看怎么实现！
如果开发的时候，不知道放什么效果好，这个库，也能起到一定的参考作用！
现在多写几个，说不定起到一个发散思维的作用，写了这些效果，想到了另一些效果怎么写，或者想到还有什么效果可以写，这个也是非常好的一个结果和收获！

6.小结

好了，css3的代码库封装到这里就差不多了，如果你能看完全篇，你已经是勇士了，证明你很有耐心，看完马上掌握，这个对于大家来说问题不大，毕竟不是什么逻辑性强的代码。我想要的效果虽然都实现了，不过以后肯定也是要修改完善的(至少看源码的话，我自己看得都有点乱，但是一时之间又不知道该如果整理，就先放上去了)。话说回来，通过以上的案例，希望能帮到大家，最理想就是能起到发散思维的作用，就是通过我的案例，能让大家知道其它的一些动画怎么做，或者想到有什么好看动画效果。web前端这一行，最重要的就是多练，大家除了看别人的项目，博客之外，一定要多练，多写，这样进步才会更快，知识才会记得更牢。

最后，如果大家觉得我哪里写得不好或者写错了，欢迎指出。有什么好的想法，随时给您宝贵的建议我！项目我也放到github上面了！有需要的可以去看下，star下ec-css（https://github.com/chenhuiYj/ec-css）！