资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/编写自己的代码库(css3常用动画的实现)

编写自己的代码库(css3常用动画的实现)

cpupro / 3170人阅读

摘要：前言在月初的时候，发了热身实战过渡与动画实现炫酷下拉，手风琴，无缝滚动。的代码库也发过两次，两篇文章。之前也说过，我写文章的目的是授人以渔，不是授人以鱼。难的是动画的一些编写，这个需要创意，大家可以上网参考。

1.前言

在月初的时候，发了CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）。js的代码库也发过两次，两篇文章。之前也写了css3的热身实战，既然热身完了，是时候开始封装css3的代码库了，相比起js的代码库，css3的代码库的逻辑性就更加简单了！可以说只要打上注释和一张效果图就可以让大家明白了其中的原理了！
我写代码库的时候，动画效果主要是参考了三个开源项目，nec，hover.css，animate.css这三个项目的质量非常的高，建议大家去了解。
源码已经放到github上面了，大家可以去看，也欢迎大家star一下！ec-css。

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

1.下面将会看到很多个类似这样的举行，都是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

big
small

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

skew-l
skew-r
skew-l-t
skew-r-t
skew-l-b
skew-r-b

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

grow-rotate-l
grow-rotate-r
rotate5
rotate15
rotate30
rotate60
rotate90
rotate180
rotate360
rotate-5
rotate-15
rotate-30
rotate-60
rotate-90
rotate-180

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

up
bottom
left
right

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

border
border-in

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

shadow
shadow-in
shadow-write
shadow-big

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

fade-out
fade-in

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

rectangle
radius

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

fade
fade-t
fade-b
fade-l
fade-r
bounce-t
bounce-b
bounce-l
bounce-r
fade-c-out
fade-c-in
fade-m-out
fade-m-in

css

/*当前元素设置相对定位*/
.ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l {
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*当前元素的:before和:after设置绝对定位*/
.ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*弹跳元素:before和:after设置绝对定位和运动曲线*/
.ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before {
    transition: all .3s;
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
    position: absolute;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/*背景颜色和文字变化*/
.ech-fade:before {
    top: 0;
    left: 0;
    transform: scaleX(1);
    opacity: 0;
}

.ech-fade:hover:before {
    opacity: 1;
}

/*颜色从左至右变化*/
.ech-fade-l:before, .ech-bounce-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/*颜色从右至左变化*/
.ech-fade-r:before, .ech-bounce-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}

/*颜色从上往下变化*/
.ech-fade-t:before, .ech-bounce-t:before {
    bottom: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
/*颜色从下往上变化*/
.ech-fade-b:before, .ech-bounce-b:before {
    top: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}

/*颜色垂直居中出去*/
.ech-fade-m-out:before {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleY(0);
}

/*水平居中出去*/
.ech-fade-c-out:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleX(0);
}

.ech-fade-c-out:hover:before {
    transform: scaleX(1);
}

/*水平居中进来*/
.ech-fade-c-in:before {
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}

.ech-fade-c-in:after {
    top: 0;
    right: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}

/*垂直居中进来*/
.ech-fade-m-in:before {
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}

.ech-fade-m-in:after {
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*当前元素文字颜色变化*/
.ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover {
    color: #fff;
}
/*垂直方向进来的:before变化（一半）*/
.ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after {
    transform: scaleY(.51);
}
/*垂直方向进来的:before变化*/
.ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before {
    transform: scaleY(1);
}
/*水平方向进来的:before变化（一半）*/
.ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after {
    transform: scaleX(.51);
}
/*水平方向进来的:before变化*/
.ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before {
    transform: scaleX(1);
}
2-2-2.颜色上下划线变化

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

html

overline-l
overline-r
underline-l
underline-r
underline-c
underline-c-out
overline-c
overline-c-out

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-3箭头动画

html

arrow-l
arrow-r
arrow-t
arrow-b
arrow-l
arrow-r
arrow-t
arrow-b

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

flash

css

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

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
2-3-2闹钟振铃效果

html

shake-time

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

wobble-c
wobble-t
wobble-b

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

swing

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

shake

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

bounce

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);
    }
}
3.预设动画

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

（不知道为什么，gif截大图放不上来，就放了张小的，大家结果下面的jpg一起看把，就是通过下面的按钮，展示动画，大家也可以在github下面下载代码看下）

（完整代码比较多，这里贴出，但是建议大家稍微看一下，过一下就好，因为这个只看代码是会懵逼的，要在浏览器打开文件，一看调试一边看，这样会很简单，很容易的明白）

html代码

  2.     
  3.     demo
  4.     
  5.     
  6.     
  8.     
  11.     infinite
  12.     alternate
  13.     stop
  16.     bounce
  17.     bounce-in-b
  18.     bounce-in-l
  19.     bounce-in-t
  20.     bounce-in-r
  21.     bounce-out-b
  22.     bounce-out-l
  23.     bounce-out-t
  24.     bounce-out-r
  25.     
  26.     wobble
  27.     wobble-t
  28.     wobble-b
  29.     
  30.     fade-in
  31.     fade-in-t
  32.     fade-in-b
  33.     fade-in-l
  34.     fade-in-r
  35.     fade-out
  36.     fade-out-t
  37.     fade-out-b
  38.     fade-out-l
  39.     fade-out-r
  40.     
  41.     rotate-in
  42.     rotate-in-rb
  43.     rotate-in-rt
  44.     rotate-in-lb
  45.     rotate-in-lt
  46.     rotate-out
  47.     rotate-out-rb
  48.     rotate-out-rt
  49.     rotate-out-lb
  50.     rotate-out-lt
  51.     
  52.     flip-in-x
  53.     flip-in-y
  54.     flip-out-x
  55.     flip-out-y
  56.     
  57.     light-speed-in
  58.     light-speed-out
  59.     
  60.     shake-time
  61.     flash
  62.     rubber-band
  63.     rubber-band-fast
  64.     swing
  65.     shake
  66.     pulse-shrink
  67.     pulse

css

</>code
  1. /*动画效果*/
  2. .ec-bounce-in-l {
  3.     animation: bounce-in-l 1s ease;
  4. }
  5. @keyframes bounce-in-l {
  6.     0%, 60%, 75%, 90%, to {
  7.         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  8.     }
  9.     0% {
  10.         opacity: 0;
  11.         transform: translate3d(-3000px, 0, 0)
  12.     }
  13.     60% {
  14.         opacity: 1;
  15.         transform: translate3d(25px, 0, 0)
  16.     }
  17.     75% {
  18.         transform: translate3d(-10px, 0, 0)
  19.     }
  20.     90% {
  21.         transform: translate3d(5px, 0, 0)
  22.     }
  23.     to {
  24.         -webkit-transform: none;
  25.         transform: none
  26.     }
  27. }
  28. .ec-bounce-in-r {
  29.     animation: bounce-in-r 1s ease;
  30. }
  31. @keyframes bounce-in-r {
  32.     0%, 60%, 75%, 90%, to {
  33.         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  34.     }
  35.     0% {
  36.         opacity: 0;
  37.         transform: translate3d(3000px, 0, 0)
  38.     }
  39.     60% {
  40.         opacity: 1;
  41.         transform: translate3d(-25px, 0, 0)
  42.     }
  43.     75% {
  44.         transform: translate3d(10px, 0, 0)
  45.     }
  46.     90% {
  47.         transform: translate3d(-5px, 0, 0)
  48.     }
  49.     to {
  50.         -webkit-transform: none;
  51.         transform: none
  52.     }
  53. }
  54. .ec-bounce-in-b{
  55.     animation: bounce-in-b 1s;
  56. }
  57. .ec-bounce-in-t{
  58.     animation: bounce-in-t 1s;
  59. }
  60. @keyframes bounce-in-t {
  61.     from, 60%, 75%, 90%, to {
  62.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  63.     }
  64.     0% {
  65.         opacity: 0;
  66.         transform: translate3d(0, -3000px, 0);
  67.     }
  68.     60% {
  69.         opacity: 1;
  70.         transform: translate3d(0, 25px, 0);
  71.     }
  72.     75% {
  73.         transform: translate3d(0, -10px, 0);
  74.     }
  75.     90% {
  76.         transform: translate3d(0, 5px, 0);
  77.     }
  78.     to {
  79.         transform: none;
  80.     }
  81. }
  82. @keyframes bounce-in-b{
  83.     from, 60%, 75%, 90%, to {
  84.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  85.     }
  86.     0% {
  87.         opacity: 0;
  88.         transform: translate3d(0, 3000px, 0);
  89.     }
  90.     60% {
  91.         opacity: 1;
  92.         transform: translate3d(0, -25px, 0);
  93.     }
  94.     75% {
  95.         transform: translate3d(0, 10px, 0);
  96.     }
  97.     90% {
  98.         transform: translate3d(0, -5px, 0);
  99.     }
  100.     to {
  101.         transform: none;
  102.     }
  103. }
  104. @keyframes bounce-out-b {
  105.     20% {
  106.         transform: translate3d(0, 10px, 0);
  107.     }
  108.     40%, 45% {
  109.         opacity: 1;
  110.         transform: translate3d(0, -20px, 0);
  111.     }
  112.     to {
  113.         opacity: 0;
  114.         transform: translate3d(0, 2000px, 0);
  115.     }
  116. }
  117. .ec-bounce-out-b {
  118.     animation: bounce-out-b 1s;
  119. }
  120. @keyframes bounce-out-l {
  121.     20% {
  122.         opacity: 1;
  123.         transform: translate3d(20px, 0, 0);
  124.     }
  125.     to {
  126.         opacity: 0;
  127.         transform: translate3d(-2000px, 0, 0);
  128.     }
  129. }
  130. .ec-bounce-out-l {
  131.     animation: bounce-out-l 1s;
  132. }
  133. @keyframes bounce-out-r {
  134.     20% {
  135.         opacity: 1;
  136.         transform: translate3d(-20px, 0, 0);
  137.     }
  138.     to {
  139.         opacity: 0;
  140.         transform: translate3d(2000px, 0, 0);
  141.     }
  142. }
  143. .ec-bounce-out-r {
  144.     animation: bounce-out-r 1s;
  145. }
  146. @keyframes bounce-out-t {
  147.     20% {
  148.         transform: translate3d(0, -10px, 0);
  149.     }
  150.     40%, 45% {
  151.         opacity: 1;
  152.         transform: translate3d(0, 20px, 0);
  153.     }
  154.     to {
  155.         opacity: 0;
  156.         transform: translate3d(0, -2000px, 0);
  157.     }
  158. }
  159. .ec-bounce-out-t {
  160.     animation: bounce-out-t 1s;
  161. }
  162. /*心跳效果*/
  163. .ec-pulse {
  164.     animation: pulse 1s linear;
  165. }
  166. .ec-pulse-shrink {
  167.     animation: pulse .5s linear;
  168. }
  169. @keyframes pulse {
  170.     25% {
  171.         transform: scale(1.1);
  172.     }
  173.     75% {
  174.         transform: scale(0.9);
  175.     }
  176. }
  177. .ec-flash {
  178.     animation: flash .5s ease;
  179. }
  180. /*摇摆*/
  181. .ec-swing {
  182.     animation: swing .5s ease;
  183. }
  184. @keyframes swing {
  185.     20% {
  186.         transform: rotate(15deg);
  187.     }
  188.     40% {
  189.         transform: rotate(-10deg);
  190.     }
  191.     60% {
  192.         transform: rotate(5deg);
  193.     }
  194.     80% {
  195.         transform: rotate(-5deg);
  196.     }
  197.     100% {
  198.         transform: rotate(0);
  199.     }
  200. }
  201. /*摇摆*/
  202. .ec-wobble-t{
  203.     transform-origin: 0 100%;
  204. }
  205. .ec-wobble-b{
  206.     transform-origin: 100% 0;
  207. }
  208. .ec-wobble,.ec-wobble-t,.ec-wobble-b {
  209.     animation: wobblex 1s ease-in-out;
  210. }
  211. @keyframes wobblex {
  212.     16.65% {
  213.         -webkit-transform: skew(-12deg);
  214.         transform: skew(-12deg);
  215.     }
  216.     33.3% {
  217.         -webkit-transform: skew(10deg);
  218.         transform: skew(10deg);
  219.     }
  220.     49.95% {
  221.         -webkit-transform: skew(-6deg);
  222.         transform: skew(-6deg);
  223.     }
  224.     66.6% {
  225.         -webkit-transform: skew(4deg);
  226.         transform: skew(4deg);
  227.     }
  228.     83.25% {
  229.         -webkit-transform: skew(-2deg);
  230.         transform: skew(-2deg);
  231.     }
  232.     100% {
  233.         -webkit-transform: skew(0);
  234.         transform: skew(0);
  235.     }
  236. }
  237. /*闪烁*/
  238. @keyframes flash {
  239.     0%, 50%, 100% {
  240.         opacity: 1;
  241.     }
  242.     25%, 75% {
  243.         opacity: 0;
  244.     }
  245. }
  246. .ec-rubber-band {
  247.     animation: rubber-band 1s;
  248. }
  249. .ec-rubber-band-fast {
  250.     animation: rubber-band .5s;
  251. }
  252. @keyframes rubber-band {
  253.     from {
  254.         transform: scale3d(1, 1, 1);
  255.     }
  256.     30% {
  257.         transform: scale3d(1.25, 0.75, 1);
  258.     }
  259.     40% {
  260.         transform: scale3d(0.75, 1.25, 1);
  261.     }
  262.     50% {
  263.         transform: scale3d(1.15, 0.85, 1);
  264.     }
  265.     65% {
  266.         transform: scale3d(.95, 1.05, 1);
  267.     }
  268.     75% {
  269.         transform: scale3d(1.05, .95, 1);
  270.     }
  271.     to {
  272.         transform: scale3d(1, 1, 1);
  273.     }
  274. }
  275. /*仿闹钟振铃效果*/
  276. .ec-shake-time{
  277.     animation: shake-time 1s ease;
  278. }
  279. @keyframes shake-time {
  280.     0% {
  281.         transform: scale(1);
  282.     }
  283.     10%, 20% {
  284.         transform: scale(0.9) rotate(-3deg);
  285.     }
  286.     30%, 50%, 70%, 90% {
  287.         transform: scale(1.1) rotate(3deg);
  288.     }
  289.     40%, 60%, 80% {
  290.         transform: scale(1.1) rotate(-3deg);
  291.     }
  292.     100% {
  293.         transform: scale(1) rotate(0);
  294.     }
  295. }
  296. /*弹跳变化*/
  297. .ec-bounce{
  298.     animation: bounce 1s ease;
  299. }
  300. @keyframes bounce {
  301.     0%, 20%, 50%, 80%, 100% {
  302.         transform: translateY(0);
  303.     }
  304.     40% {
  305.         transform: translateY(-30px);
  306.     }
  307.     60% {
  308.         transform: translateY(-15px);
  309.     }
  310. }
  311. /*震动*/
  312. .ec-shake {
  313.     animation: shake .5s ease;
  314. }
  315. @keyframes shake {
  316.     0%, 100% {
  317.         transform: translateX(0);
  318.     }
  319.     10%, 30%, 50%, 70%, 90% {
  320.         transform: translateX(-10px);
  321.     }
  322.     20%, 40%, 60%, 80% {
  323.         transform: translateX(10px);
  324.     }
  325. }
  326. /*透明度进入*/
  327. @keyframes fade-in {
  328.     from {
  329.         opacity: 0;
  330.     }
  331.     to {
  332.         opacity: 1;
  333.     }
  334. }
  335. .ec-fade-in {
  336.     animation: fade-in 1s;
  337. }
  338. @keyframes ec-fade-in-b {
  339.     from {
  340.         opacity: 0;
  341.         transform: translate3d(0, -100%, 0);
  342.     }
  343.     to {
  344.         opacity: 1;
  345.         transform: none;
  346.     }
  347. }
  348. .ec-fade-in-b {
  349.     animation: ec-fade-in-b 1s;
  350. }
  351. @keyframes ec-fade-in-l {
  352.     from {
  353.         opacity: 0;
  354.         transform: translate3d(-100%, 0, 0);
  355.     }
  356.     to {
  357.         opacity: 1;
  358.         transform: none;
  359.     }
  360. }
  361. .ec-fade-in-l {
  362.     animation: ec-fade-in-l 1s;
  363. }
  364. @keyframes ec-fade-in-r {
  365.     from {
  366.         opacity: 0;
  367.         transform: translate3d(100%, 0, 0);
  368.     }
  369.     to {
  370.         opacity: 1;
  371.         transform: none;
  372.     }
  373. }
  374. .ec-fade-in-r {
  375.     animation: ec-fade-in-r 1s;
  376. }
  377. @keyframes ec-fade-in-t {
  378.     from {
  379.         opacity: 0;
  380.         transform: translate3d(0, 100%, 0);
  381.     }
  382.     to {
  383.         opacity: 1;
  384.         transform: none;
  385.     }
  386. }
  387. .ec-fade-in-t {
  388.     animation: ec-fade-in-t 1s;
  389. }
  390. @keyframes ec-fade-out {
  391.     from {
  392.         opacity: 1;
  393.     }
  394.     to {
  395.         opacity: 0;
  396.     }
  397. }
  398. .ec-fade-out {
  399.     animation: ec-fade-out 1s;
  400. }
  401. @keyframes ec-fade-out-b {
  402.     from {
  403.         opacity: 1;
  404.     }
  405.     to {
  406.         opacity: 0;
  407.         transform: translate3d(0, 100%, 0);
  408.     }
  409. }
  410. .ec-fade-out-b {
  411.     animation: ec-fade-out-b 1s;
  412. }
  413. @keyframes ec-fade-out-l {
  414.     from {
  415.         opacity: 1;
  416.     }
  417.     to {
  418.         opacity: 0;
  419.         transform: translate3d(-100%, 0, 0);
  420.     }
  421. }
  422. .ec-fade-out-l {
  423.     animation: ec-fade-out-l 1s;
  424. }
  425. @keyframes ec-fade-out-r {
  426.     from {
  427.         opacity: 1;
  428.     }
  429.     to {
  430.         opacity: 0;
  431.         transform: translate3d(100%, 0, 0);
  432.     }
  433. }
  434. .ec-fade-out-r {
  435.     animation: ec-fade-out-r 1s;
  436. }
  437. @keyframes ec-fade-out-t {
  438.     from {
  439.         opacity: 1;
  440.     }
  441.     to {
  442.         opacity: 0;
  443.         transform: translate3d(0, -100%, 0);
  444.     }
  445. }
  446. .ec-fade-out-t {
  447.     animation: ec-fade-out-t 1s;
  448. }
  449. /*旋转进出*/
  450. @keyframes rotate-in{
  451.     0%{opacity:0;transform:rotate(-200deg);}
  452.     100%{opacity:1;transform:rotate(0);}
  453. }
  454. .ec-rotate-in {
  455.     animation: rotate-in 1s;
  456. }
  457. @keyframes rotate-in-lt{
  458.     0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
  459.     100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
  460. }
  461. .ec-rotate-in-lt {
  462.     animation: rotate-in-lt 1s;
  463. }
  464. @keyframes rotate-in-lb{
  465.     0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
  466.     100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
  467. }
  468. .ec-rotate-in-lb {
  469.     animation: rotate-in-lb 1s;
  470. }
  471. @keyframes rotate-in-rt{
  472.     0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
  473.     100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
  474. }
  475. .ec-rotate-in-rt {
  476.     animation: rotate-in-rt 1s;
  477. }
  478. @keyframes rotate-in-rb{
  479.     0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
  480.     100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
  481. }
  482. .ec-rotate-in-rb {
  483.     animation: rotate-in-rb 1s;
  484. }
  485. .ec-rotate-out {
  486.     animation: rotate-out 1s;
  487. }
  488. @keyframes rotate-out{
  489.     0%{transform-origin:center center;transform:rotate(0);opacity:1;}
  490.     100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
  491. }
  492. .ec-rotate-out-lt {
  493.     animation: rotate-out-lt 1s;
  494. }
  495. @keyframes rotate-out-lt{
  496.     0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
  497.     100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
  498. }
  499. .ec-rotate-out-lb {
  500.     animation: rotate-out-lb 1s;
  501. }
  502. @keyframes rotate-out-lb{
  503.     0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
  504.     100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
  505. }
  506. .ec-rotate-out-rt {
  507.     animation: rotate-out-rt 1s;
  508. }
  509. @keyframes rotate-out-rt{
  510.     0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
  511.     100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
  512. }
  513. .ec-rotate-out-rb {
  514.     animation: rotate-out-rb 1s;
  515. }
  516. @keyframes rotate-out-rb{
  517.     0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
  518.     100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
  519. }
  520. /*翻转进出*/
  521. @keyframes flip-in-x {
  522.     from {
  523.         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  524.         animation-timing-function: ease-in;
  525.         opacity: 0;
  526.     }
  527.     40% {
  528.         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  529.         animation-timing-function: ease-in;
  530.     }
  531.     60% {
  532.         transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  533.         opacity: 1;
  534.     }
  535.     80% {
  536.         transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  537.     }
  538.     to {
  539.         transform: perspective(400px);
  540.     }
  541. }
  542. .ec-flip-in-x {
  543.     animation: flip-in-x 1s;
  544. }
  545. @keyframes flip-in-y {
  546.     from {
  547.         transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  548.         animation-timing-function: ease-in;
  549.         opacity: 0;
  550.     }
  551.     40% {
  552.         transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  553.         animation-timing-function: ease-in;
  554.     }
  555.     60% {
  556.         transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  557.         opacity: 1;
  558.     }
  559.     80% {
  560.         transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  561.     }
  562.     to {
  563.         transform: perspective(400px);
  564.     }
  565. }
  566. .ec-flip-in-y {
  567.     animation: flip-in-y 1s;
  568. }
  569. @keyframes flip-out-x {
  570.     from {
  571.         transform: perspective(400px);
  572.     }
  573.     30% {
  574.         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  575.         opacity: 1;
  576.     }
  577.     to {
  578.         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  579.         opacity: 0;
  580.     }
  581. }
  582. .ec-flip-out-x {
  583.     animation: flip-out-x 1s;
  584. }
  585. @keyframes flip-out-y {
  586.     from {
  587.         transform: perspective(400px);
  588.     }
  589.     30% {
  590.         transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  591.         opacity: 1;
  592.     }
  593.     to {
  594.         transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  595.         opacity: 0;
  596.     }
  597. }
  598. .ec-flip-out-y {
  599.     animation: flip-out-y 1s;
  600. }
  601. @keyframes light-speed-in {
  602.     from {
  603.         transform: translate3d(100%, 0, 0) skewX(-30deg);
  604.         opacity: 0;
  605.     }
  606.     60% {
  607.         transform: skewX(20deg);
  608.         opacity: 1;
  609.     }
  610.     80% {
  611.         transform: skewX(-5deg);
  612.         opacity: 1;
  613.     }
  614.     to {
  615.         transform: none;
  616.         opacity: 1;
  617.     }
  618. }
  619. .ec-light-speed-in {
  620.     animation: light-speed-in 1s ease-out;
  621. }
  622. @keyframes light-speed-out {
  623.     from {
  624.         opacity: 1;
  625.     }
  626.     to {
  627.         transform: translate3d(100%, 0, 0) skewX(30deg);
  628.         opacity: 0;
  629.     }
  630. }
  631. .ec-light-speed-out {
  632.     animation: light-speed-out ease-in 1s;
  633. }
  634. /*无限次数执行动画*/
  635. .ec-infinite{
  636.     animation-iteration-count: infinite;
  637. }
  638. .ec-alternate {
  639.     animation-direction: alternate;
  640. }
4.未知探索

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

</>code
  1. 下面说的动画，不分hover动画和预设动画，大家注意
4-1.无限执行动画

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

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

4-2.反向动画

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

没加反向动画效果

加上反向动画效果

4-3.组合效果

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

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

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

5.鸡肋选择

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

1.css3的效果太过于灵活，多样，封装非常容易出现众口难调的情况，以及每个项目的效果可能出现效果差不多，但就是不一样，这样就是说封装的库并不适合用在项目上。

2.还有一点在于，css3效果基本上每一个项目都是有用到，并且是常用，但是平常项目要用到的css3效果最多也就10个，而且也不难，手写很快可以实现，根本没必要去引一个插件或者库。

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

1.如果项目开发，对动画效果的要求基本不会达到非常的严格的地步，我完全可以多引一个文件，增加我的开发效率，压缩过后的文件可能只有10K左右，可以接受。

2.就算在项目用不上，我也可以当作是练手，学习的作用。如果以后项目需要动画效果，即使动画效果跟我封装的不一样，我也可以看着来进行修改。

3.就算开发的时候没使用上这个库，万一有些动画，我写过，但是忘了怎么写，也可以回头看怎么实现！

4.如果开发的时候，不知道放什么效果好，这个库，也能起到一定的参考作用！

5.现在多写几个，说不定起到一个发散思维的作用，写了这些效果，想到了另一些效果怎么写，或者想到还有什么效果可以写，这个也是非常好的一个结果和收获！

6.小结

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

-------------------------华丽的分割线--------------------
想了解更多，关注关注我的微信公众号：守候书阁

云服务器 GPU云服务器 自己编写的小程序 php的常用函数库 编写漂亮的代码 php的常用代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112414.html

相关文章

  • 个人分享--web前端学习资源分享

    摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

    sherlock221 评论0 收藏0

  • GitHub 值得收藏的前端项目[每月更新...]

    摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目 整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

    maxmin 评论0 收藏0

  • 【译】编写更好的CSS必备的40个工具

    摘要：一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的，并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站，并想要网站正常运行在低版本的上，可以考虑。 众所周知，CSS是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解CSS的一切是非常难做到的，它只会变得更加困难,因为我...

    moven_j 评论0 收藏0

  • 前端技术 博客文章、书籍 积累

    摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

    LiangJ 评论0 收藏0

发表评论

登陆后可评论

0条评论

cpupro

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<