CSS3有哪些好用的屬性？

阿新 • • 發佈：2022-05-03

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）！

CSS3有哪些好用的屬性？

1.前言

2.hover動畫

2-1.簡單動畫

2-1-1大小變化

2-1-2形狀變化

2-1-3旋轉角度變化

2-1-4位移變化

2-1-5邊框變化

2-1-6陰影變化

2-1-7透明度變化

2-1-8圓角變化

2-2.顏色動畫效果

2-2-1.顏色上下劃線變化

2-2-2箭頭動畫

2-3較複雜動畫###

2-3-1閃爍效果

2-3-2鬧鐘振鈴效果

2-3-3搖擺效果

2-3-4搖晃效果

2-3-5抖動效果

4-1.無限執行動畫

4-2.反向動畫

4-3.組合效果

5.雞肋選擇

6.小結

相關推薦