亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

編寫自己的代碼庫(kù)(css3常用動(dòng)畫的實(shí)現(xiàn))

cpupro / 3197人閱讀

摘要：前言在月初的時(shí)候，發(fā)了熱身實(shí)戰(zhàn)過(guò)渡與動(dòng)畫實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無(wú)縫滾動(dòng)。的代碼庫(kù)也發(fā)過(guò)兩次，兩篇文章。之前也說(shuō)過(guò)，我寫文章的目的是授人以漁，不是授人以魚(yú)。難的是動(dòng)畫的一些編寫，這個(gè)需要?jiǎng)?chuàng)意，大家可以上網(wǎng)參考。

1.前言

在月初的時(shí)候，發(fā)了CSS3熱身實(shí)戰(zhàn)--過(guò)渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無(wú)縫滾動(dòng)）。js的代碼庫(kù)也發(fā)過(guò)兩次，兩篇文章。之前也寫了css3的熱身實(shí)戰(zhàn)，既然熱身完了，是時(shí)候開(kāi)始封裝css3的代碼庫(kù)了，相比起js的代碼庫(kù)，css3的代碼庫(kù)的邏輯性就更加簡(jiǎn)單了！可以說(shuō)只要打上注釋和一張效果圖就可以讓大家明白了其中的原理了！
我寫代碼庫(kù)的時(shí)候，動(dòng)畫效果主要是參考了三個(gè)開(kāi)源項(xiàng)目，nec，hover.css，animate.css這三個(gè)項(xiàng)目的質(zhì)量非常的高，建議大家去了解。
源碼已經(jīng)放到github上面了，大家可以去看，也歡迎大家star一下！ec-css。

我指出這三個(gè)庫(kù)并不是叫大家去拿別人的代碼，稍微修改一下，或者直接拷貝到自己的項(xiàng)目上，然后就說(shuō)是自己的項(xiàng)目。我是讓大家去看別人的代碼，學(xué)習(xí)別人的實(shí)現(xiàn)方式或者動(dòng)畫效果，然后再用自己的方式實(shí)現(xiàn)，當(dāng)然如果把別人的項(xiàng)目，增刪改查到面目全非的地步，這個(gè)我個(gè)人覺(jué)得可以說(shuō)是自己的項(xiàng)目了！強(qiáng)調(diào)一點(diǎn)，不要直接復(fù)制別人的代碼，放到自己的項(xiàng)目上，然后說(shuō)是自己開(kāi)發(fā)的，這是不尊重別人的成果，對(duì)自己的技術(shù)水平提升的幫助也較少。我寫文章，雖然也會(huì)給出代碼，但是我的目的是提供大家參考的，希望給讓大家學(xué)習(xí)到知識(shí)或者發(fā)散思維，寫出更好的作品。之前也說(shuō)過(guò)，我寫文章的目的是授人以漁，不是授人以魚(yú)。
聲明

1.下面將會(huì)看到很多個(gè)類似這樣的舉行，都是span標(biāo)簽，樣式都是給出的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.關(guān)于class命名方式，l代表left，r代表right，t代表top，b代表bottom，c代表center，m代表middle。切記

文章比較長(zhǎng)，但是說(shuō)得就是兩點(diǎn)，大家看得也應(yīng)該會(huì)很快
1.寫出一些hover動(dòng)畫和預(yù)設(shè)動(dòng)畫的運(yùn)行效果，并且貼出代碼
2.發(fā)現(xiàn)幾個(gè)動(dòng)畫組合，和加上無(wú)限動(dòng)畫，反向動(dòng)畫，會(huì)有不一樣的效果，并且繼續(xù)研究，看下能不能研究出不一樣的東西！
2.hover動(dòng)畫

說(shuō)了那么多，是時(shí)候進(jìn)入正文了，

首先是hover動(dòng)畫，關(guān)于這個(gè)概念，我解釋下，就是鼠標(biāo)移上去觸發(fā)的動(dòng)畫，就是觸發(fā)了鼠標(biāo)的hover事件時(shí)能看到的動(dòng)畫！下面，按照類型，一個(gè)一個(gè)的寫！

2-1.簡(jiǎn)單動(dòng)畫 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旋轉(zhuǎn)角度變化

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.顏色動(dòng)畫效果

這部分的動(dòng)畫主要是利用:before和:after進(jìn)行實(shí)現(xiàn)的，所以，大家如果使用的時(shí)候，切記:before和:after沒(méi)有被占用，否則會(huì)顯示不正常

2-2-1.顏色塊變化

因?yàn)檫@塊內(nèi)容很像，我就一大塊一起說(shuō)，大家看代碼的時(shí)候要留神注意。看代碼看不明白，直接在github下載，然后運(yùn)行文件，邊調(diào)試邊看效果！這樣大家就很容易明白了！

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

/*當(dāng)前元素設(shè)置相對(duì)定位*/
.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;
}
/*當(dāng)前元素的:before和:after設(shè)置絕對(duì)定位*/
.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設(shè)置絕對(duì)定位和運(yùn)動(dòng)曲線*/
.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);
}

/*水平居中進(jìn)來(lái)*/
.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);
}

/*垂直居中進(jìn)來(lái)*/
.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);
}
/*當(dāng)前元素文字顏色變化*/
.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;
}
/*垂直方向進(jìn)來(lái)的:before變化（一半）*/
.ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after {
    transform: scaleY(.51);
}
/*垂直方向進(jìn)來(lái)的: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);
}
/*水平方向進(jìn)來(lái)的:before變化（一半）*/
.ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after {
    transform: scaleX(.51);
}
/*水平方向進(jìn)來(lái)的: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.顏色上下劃線變化

這里也是一大塊一起說(shuō)，看代碼可能會(huì)更亂，所以大家看代碼的時(shí)候要更加留神注意。看代碼看不明白，直接在github下載，然后運(yùn)行文件，邊調(diào)試邊看效果！這樣大家就很容易明白了！

html

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

css

/*上劃線和下劃線變化 當(dāng)前元素樣式設(shè)置相對(duì)定位*/
.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大小和絕對(duì)定位*/
.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);
}

/*上劃線 左右出來(lái)*/
.ech-overline-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
}

.ech-overline-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
}

/*下劃線 左右出來(lái)*/
.ech-underline-r:before {
    bottom: 0;
    left: 0;
    transform-origin: 100% 50%;

}

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

/**上劃線 下劃線 居中進(jìn)來(lái)**/
.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箭頭動(dòng)畫

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較復(fù)雜動(dòng)畫

2-1和2-2的內(nèi)容，都是利用過(guò)渡實(shí)現(xiàn)效果，那么這一塊就是利用動(dòng)畫來(lái)實(shí)現(xiàn)效果！區(qū)別就是hover的寫法是增加一個(gè)動(dòng)畫，動(dòng)畫的封裝，難度就在于創(chuàng)意。

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抖動(dòng)效果

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.預(yù)設(shè)動(dòng)畫

受限于篇幅的長(zhǎng)度，我也不想分開(kāi)兩篇文章寫。關(guān)于這個(gè)預(yù)設(shè)動(dòng)畫，我就簡(jiǎn)單的說(shuō)一下，寫一下，我直接給一個(gè)大概的操作演示，和完整的代碼！反正寫法這個(gè)也是比較單一，無(wú)非就是改一個(gè)類名而已。難的是動(dòng)畫的一些編寫，這個(gè)需要?jiǎng)?chuàng)意，大家可以上網(wǎng)參考。

（不知道為什么，gif截大圖放不上來(lái)，就放了張小的，大家結(jié)果下面的jpg一起看把，就是通過(guò)下面的按鈕，展示動(dòng)畫，大家也可以在github下面下載代碼看下）

（完整代碼比較多，這里貼出，但是建議大家稍微看一下，過(guò)一下就好，因?yàn)檫@個(gè)只看代碼是會(huì)懵逼的，要在瀏覽器打開(kāi)文件，一看調(diào)試一邊看，這樣會(huì)很簡(jiǎn)單，很容易的明白）

html代碼




    
    demo

css

/*動(dòng)畫效果*/
.ec-bounce-in-l {
    animation: bounce-in-l 1s ease;
}
@keyframes bounce-in-l {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-r {
    animation: bounce-in-r 1s ease;
}
@keyframes bounce-in-r {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-b{
    animation: bounce-in-b 1s;
}
.ec-bounce-in-t{
    animation: bounce-in-t 1s;
}
@keyframes bounce-in-t {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    to {
        transform: none;
    }
}
@keyframes bounce-in-b{
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -25px, 0);
    }

    75% {
        transform: translate3d(0, 10px, 0);
    }

    90% {
        transform: translate3d(0, -5px, 0);
    }

    to {
        transform: none;
    }
}
@keyframes bounce-out-b {
    20% {
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}

.ec-bounce-out-b {
    animation: bounce-out-b 1s;
}

@keyframes bounce-out-l {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

.ec-bounce-out-l {
    animation: bounce-out-l 1s;
}

@keyframes bounce-out-r {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

.ec-bounce-out-r {
    animation: bounce-out-r 1s;
}

@keyframes bounce-out-t {
    20% {
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}

.ec-bounce-out-t {
    animation: bounce-out-t 1s;
}

/*心跳效果*/
.ec-pulse {
    animation: pulse 1s linear;
}
.ec-pulse-shrink {
    animation: pulse .5s linear;
}
@keyframes pulse {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
}
.ec-flash {
    animation: flash .5s ease;
}
/*搖擺*/
.ec-swing {
    animation: swing .5s ease;
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}
/*搖擺*/
.ec-wobble-t{
    transform-origin: 0 100%;
}

.ec-wobble-b{
    transform-origin: 100% 0;
}

.ec-wobble,.ec-wobble-t,.ec-wobble-b {
    animation: wobblex 1s ease-in-out;
}

@keyframes wobblex {
    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);
    }
}
/*閃爍*/
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
.ec-rubber-band {
    animation: rubber-band 1s;
}
.ec-rubber-band-fast {
    animation: rubber-band .5s;
}
@keyframes rubber-band {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, .95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}
/*仿鬧鐘振鈴效果*/
.ec-shake-time{
    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);
    }
}

/*彈跳變化*/
.ec-bounce{
    animation: bounce 1s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/*震動(dòng)*/
.ec-shake {
    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);
    }
}
/*透明度進(jìn)入*/
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ec-fade-in {
    animation: fade-in 1s;
}

@keyframes ec-fade-in-b {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-b {
    animation: ec-fade-in-b 1s;
}

@keyframes ec-fade-in-l {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-l {
    animation: ec-fade-in-l 1s;
}

@keyframes ec-fade-in-r {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-r {
    animation: ec-fade-in-r 1s;
}

@keyframes ec-fade-in-t {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-t {
    animation: ec-fade-in-t 1s;
}

@keyframes ec-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.ec-fade-out {
    animation: ec-fade-out 1s;
}

@keyframes ec-fade-out-b {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.ec-fade-out-b {
    animation: ec-fade-out-b 1s;
}

@keyframes ec-fade-out-l {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

.ec-fade-out-l {
    animation: ec-fade-out-l 1s;
}


@keyframes ec-fade-out-r {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

.ec-fade-out-r {
    animation: ec-fade-out-r 1s;
}

@keyframes ec-fade-out-t {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.ec-fade-out-t {
    animation: ec-fade-out-t 1s;
}
/*旋轉(zhuǎn)進(jìn)出*/
@keyframes rotate-in{
    0%{opacity:0;transform:rotate(-200deg);}
    100%{opacity:1;transform:rotate(0);}
}
.ec-rotate-in {
    animation: rotate-in 1s;
}
@keyframes rotate-in-lt{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lt {
    animation: rotate-in-lt 1s;
}
@keyframes rotate-in-lb{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lb {
    animation: rotate-in-lb 1s;
}
@keyframes rotate-in-rt{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rt {
    animation: rotate-in-rt 1s;
}
@keyframes rotate-in-rb{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rb {
    animation: rotate-in-rb 1s;
}

.ec-rotate-out {
    animation: rotate-out 1s;
}
@keyframes rotate-out{
    0%{transform-origin:center center;transform:rotate(0);opacity:1;}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.ec-rotate-out-lt {
    animation: rotate-out-lt 1s;
}
@keyframes rotate-out-lt{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.ec-rotate-out-lb {
    animation: rotate-out-lb 1s;
}
@keyframes rotate-out-lb{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rt {
    animation: rotate-out-rt 1s;
}
@keyframes rotate-out-rt{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rb {
    animation: rotate-out-rb 1s;
}
@keyframes rotate-out-rb{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/*翻轉(zhuǎn)進(jìn)出*/
@keyframes flip-in-x {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.ec-flip-in-x {
    animation: flip-in-x 1s;
}

@keyframes flip-in-y {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.ec-flip-in-y {
    animation: flip-in-y 1s;
}

@keyframes flip-out-x {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.ec-flip-out-x {
    animation: flip-out-x 1s;
}

@keyframes flip-out-y {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.ec-flip-out-y {
    animation: flip-out-y 1s;
}

@keyframes light-speed-in {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.ec-light-speed-in {
    animation: light-speed-in 1s ease-out;
}

@keyframes light-speed-out {
    from {
        opacity: 1;
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.ec-light-speed-out {
    animation: light-speed-out ease-in 1s;
}
/*無(wú)限次數(shù)執(zhí)行動(dòng)畫*/
.ec-infinite{
    animation-iteration-count: infinite;
}

.ec-alternate {
    animation-direction: alternate;
}
4.未知探索

好了，說(shuō)完了hover動(dòng)畫和預(yù)設(shè)動(dòng)畫，我開(kāi)發(fā)的時(shí)候，發(fā)現(xiàn)了這樣一些好玩的東西，我也準(zhǔn)備繼續(xù)研究，也建議大家玩下，說(shuō)不定哪天做出了了不起的東西！如下面的栗子！

下面說(shuō)的動(dòng)畫，不分hover動(dòng)畫和預(yù)設(shè)動(dòng)畫，大家注意
4-1.無(wú)限執(zhí)行動(dòng)畫

一個(gè)普通的動(dòng)畫，加上無(wú)限執(zhí)行，一般會(huì)出現(xiàn)很友好的效果，

但是有些時(shí)候的效果差強(qiáng)人意

4-2.反向動(dòng)畫

在4-1的基礎(chǔ)上，加上方向執(zhí)行動(dòng)畫，也會(huì)有不一樣的效果

沒(méi)加反向動(dòng)畫效果

加上反向動(dòng)畫效果

4-3.組合效果

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

上面的幾個(gè)的栗子
css代碼不變，區(qū)別是html代碼，多加了一些類名

上面幾個(gè)是我在開(kāi)發(fā)時(shí)候發(fā)現(xiàn)的栗子，這個(gè)我會(huì)繼續(xù)研究，也希望大家能研究，研究出什么好玩的效果，或者動(dòng)畫寫法，歡迎分享！

5.雞肋選擇

在寫css3代碼庫(kù)的時(shí)候，我也發(fā)現(xiàn)封裝css3的一個(gè)雞肋情況。

1.css3的效果太過(guò)于靈活，多樣，封裝非常容易出現(xiàn)眾口難調(diào)的情況，以及每個(gè)項(xiàng)目的效果可能出現(xiàn)效果差不多，但就是不一樣，這樣就是說(shuō)封裝的庫(kù)并不適合用在項(xiàng)目上。

2.還有一點(diǎn)在于，css3效果基本上每一個(gè)項(xiàng)目都是有用到，并且是常用，但是平常項(xiàng)目要用到的css3效果最多也就10個(gè)，而且也不難，手寫很快可以實(shí)現(xiàn)，根本沒(méi)必要去引一個(gè)插件或者庫(kù)。

但是最后我還是堅(jiān)持寫下去了，原因如下

1.如果項(xiàng)目開(kāi)發(fā)，對(duì)動(dòng)畫效果的要求基本不會(huì)達(dá)到非常的嚴(yán)格的地步，我完全可以多引一個(gè)文件，增加我的開(kāi)發(fā)效率，壓縮過(guò)后的文件可能只有10K左右，可以接受。

2.就算在項(xiàng)目用不上，我也可以當(dāng)作是練手，學(xué)習(xí)的作用。如果以后項(xiàng)目需要?jiǎng)赢嬓Ч词箘?dòng)畫效果跟我封裝的不一樣，我也可以看著來(lái)進(jìn)行修改。

3.就算開(kāi)發(fā)的時(shí)候沒(méi)使用上這個(gè)庫(kù)，萬(wàn)一有些動(dòng)畫，我寫過(guò)，但是忘了怎么寫，也可以回頭看怎么實(shí)現(xiàn)！

4.如果開(kāi)發(fā)的時(shí)候，不知道放什么效果好，這個(gè)庫(kù)，也能起到一定的參考作用！

5.現(xiàn)在多寫幾個(gè)，說(shuō)不定起到一個(gè)發(fā)散思維的作用，寫了這些效果，想到了另一些效果怎么寫，或者想到還有什么效果可以寫，這個(gè)也是非常好的一個(gè)結(jié)果和收獲！

6.小結(jié)

好了，css3的代碼庫(kù)封裝到這里就差不多了，如果你能看完全篇，你已經(jīng)是勇士了，證明你很有耐心，看完馬上掌握，這個(gè)對(duì)于大家來(lái)說(shuō)問(wèn)題不大，畢竟不是什么邏輯性強(qiáng)的代碼。我想要的效果雖然都實(shí)現(xiàn)了，不過(guò)以后肯定也是要修改完善的(至少看源碼的話，我自己看得都有點(diǎn)亂，但是一時(shí)之間又不知道該如果整理，就先放上去了)。話說(shuō)回來(lái)，通過(guò)以上的案例，希望能幫到大家，最理想就是能起到發(fā)散思維的作用，就是通過(guò)我的案例，能讓大家知道其它的一些動(dòng)畫怎么做，或者想到有什么好看動(dòng)畫效果。web前端這一行，最重要的就是多練，大家除了看別人的項(xiàng)目，博客之外，一定要多練，多寫，這樣進(jìn)步才會(huì)更快，知識(shí)才會(huì)記得更牢。
最后，如果大家覺(jué)得我哪里寫得不好或者寫錯(cuò)了，歡迎指出。有什么好的想法，隨時(shí)給您寶貴的建議我！項(xiàng)目我也放到github上面了！有需要的可以去看下，star下ec-css！

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書閣

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112414.html

相關(guān)文章

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

  • GitHub 值得收藏的前端項(xiàng)目[每月更新...]

    摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁(yè)的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來(lái)，大家一起學(xué)習(xí)，本篇文章會(huì)持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...

    maxmin 評(píng)論0 收藏0

  • 【譯】編寫更好的CSS必備的40個(gè)工具

    摘要：一個(gè)叫的人用純重繪并模擬了種不同的移動(dòng)設(shè)備包括可以給你的網(wǎng)站添加不相關(guān)的獨(dú)立組件的一個(gè)庫(kù)。每一個(gè)組件都是針對(duì)移動(dòng)設(shè)備定制的，并且它有很多你在傳統(tǒng)的框架中看不到的功能。如果你用開(kāi)發(fā)移動(dòng)優(yōu)先的網(wǎng)站，并想要網(wǎng)站正常運(yùn)行在低版本的上，可以考慮。 眾所周知，CSS是非常棒的，它使網(wǎng)站看起來(lái)很漂亮，可以為網(wǎng)站添加動(dòng)畫，并讓呈現(xiàn)和內(nèi)容分離。去了解CSS的一切是非常難做到的，它只會(huì)變得更加困難,因?yàn)槲?..

    moven_j 評(píng)論0 收藏0

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語(yǔ)法來(lái)快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計(jì)怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript框架設(shè)計(jì)》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語(yǔ)言精粹（修訂版）》《JavaScript設(shè)計(jì)模式》《J...

    LiangJ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<