You don't know CSS

codeXiu發表於2019-02-28
CSS

最近在看一些關於css的書籍，發現css能實現好多絢麗的效果，今天我想分享給大家。 我想先說明一下，以下所有效果都是基於以下程式碼實現的。

  • HTML
<div class="color"></div>
複製程式碼
  • CSS
    • linear-gradient
    • repeating-linear-gradient
    • radial-gradient
    • repeating-radial-gradient
  1. 顏色均分
  • 效果
    You don't know CSS
  • 程式碼
.color {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to left, #193 50%, #751 0); //0 代表上一個數，就是50%
}
複製程式碼

如果想實現橫著的平分只要改變漸變的方向就行了。 2. 重複顏色均分

  • 效果

You don't know CSS

  • 程式碼
.color {
    background-image: linear-gradient(to left, #a16 50%, #ac1 0); 
    background-size: 40px 100%; //指定背景大小，就是兩條線一共多寬
}
複製程式碼

3.傾斜顏色均分

  • 效果

You don't know CSS

  • 程式碼
.color {
    background-image: linear-gradient(45deg, #a16 50%, #ac1 0);
}
複製程式碼

4.傾斜重複顏色均分

  • 效果
    You don't know CSS
  • 錯誤程式碼

有人可能覺得跟上個平均顏色一樣，改變大小就可以，我們試一下。

.color {
    background-image: linear-gradient(45deg, #a16 50%, #ac1 0);
    background-size: 30px 30px;
}
複製程式碼

實現之後是這樣的效果，有人可能覺得挺好看，但不是我們要實現的效果。

You don't know CSS

  • 失敗的原因

    • 因為我們改變了內部漸變的角度而沒有改變整體的漸變的角度。

  • 程式碼

.color {
    background-image:  //顏色交替重複
    linear-gradient(
        45deg, 
        #a16 25%,
        #ac1 0, 
        #ac1 50%, 
        #a16 0, 
        #a16 75%,
        #ac1 0
    );
    background-size: 40px 40px; //大小隨意指定
}
複製程式碼
  1. 小網格
  • 效果
    You don't know CSS
  • 程式碼
.color {
    background-image: 
    linear-gradient( 90deg, #a16 10px, transparent 0), //豎向條紋
    linear-gradient( #ac1 10px, transparent 0); //橫向條紋
    background-size: 20px 20px; 
}
複製程式碼
  • 換個顏色
    You don't know CSS
    是不是感覺有些png圖片或透明那一類的效果。
  1. 網格線
  • 效果
    You don't know CSS
  • 程式碼
.color {
    background-image: 
    linear-gradient( 90deg, black 1px, transparent 0), //橫向1px的黑線和透明線
    linear-gradient( black 1px, transparent 0);//縱向1px的黑線和透明線
    background-size: 20px 20px; //格子大小
}
複製程式碼
  • 如果我們加上一個背景
    You don't know CSS
  • 把格子改小
    You don't know CSS
  1. 波點
  • 效果
    You don't know CSS
  • 程式碼
.color {
    background-image: 
    radial-gradient( black 10px, transparent 0);
    background-size: 40px 40px;
}
複製程式碼
  • 加上背景換個顏色
    You don't know CSS
.color {
    background-color: #631;
    background-image: 
    radial-gradient( pink 10px, transparent 0);
    background-size: 40px 40px;
} 
複製程式碼
  1. 隨機背景顏色
  • 效果

You don't know CSS

  • 程式碼
.color {
    background-image: 
    linear-gradient(90deg, #b51 15px, transparent 0),
    linear-gradient(90deg, #ac1 25px, transparent 0),
    linear-gradient(90deg, #a16 45px, transparent 0);
    background-size: 45px 100%;
}
複製程式碼

這還不夠隨機。

  • 我們改變背景的大小
.color {
    background-image: 
    linear-gradient(90deg, #b51 15px, transparent 0),
    linear-gradient(90deg, #ac1 25px, transparent 0),
    linear-gradient(90deg, #a16 45px, transparent 0);
    background-size: 75px 100%, 63px 100%, 45px 100%;
}
複製程式碼

You don't know CSS
這樣有點隨機，如果我們想讓看著更像隨機的我們就要加大我們背景的大小，來達到看似隨機的效果。其實還有另一個方法來增加隨機。

  • 我們試著改變下數值。
    • 理論就是：“蟬原則”
    • 通過質數來增加隨機的真實性，就是最好選擇的數字是互質的，為了讓最小公倍數最大化。
  • 為了看起來更明顯我加大了容器的寬度
    You don't know CSS
.color {
    background-color: #6516;
    background-image: 
    linear-gradient(90deg, #b51 13px, transparent 0),
    linear-gradient(90deg, #ac1 23px, transparent 0),
    linear-gradient(90deg, #a16 43px, transparent 0);
    background-size: 41px 100%, 61px 100%, 83px 100%; //所有數值都是質數
}
複製程式碼
  1. 信封邊框
  • 效果
    You don't know CSS
  • 程式碼
.color {
    border: 10px solid transparent; //顯示的大小
    background: 
    linear-gradient(white, white) padding-box, //背景全白設定padding-box，顯示出邊框的顏色
    repeating-linear-gradient(-45deg, 
        red 0, red 12.5%, 
        transparent 0, transparent 25%,
        #58a 0, #58a 37.5%, 
        transparent 0, transparent 50%  // 按照紅 透明 藍 透明 重複
    ) 0 / 6em 6em; //條紋大小
}
複製程式碼
  1. 螞蟻行軍
  • 效果
    You don't know CSS
  • 程式碼
@keyframes moving{
    to {
        background-position: 100%; 
    }
}
.color {
    border: 1px solid transparent; //顯示大小
    background: 
    linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, 
        black 0, black 25%,  
        white 0, white 50% //黑白交替
    ) 0 / .6em .6em; //線條大小
    animation: moving 20s infinite;
}
複製程式碼
  • 總結：
    • 我以前認為CSS是用來改變佈局、樣式之類的但沒想到CSS(3)可以實現這麼多炫酷的效果。
    • 通過把它分享出來也讓我加深了對它的印象和學習的興趣。
    • 這幾個例子只是眾多中的幾個，還有好多我們沒有發現的技巧沒有被我們發現，希望我們可以更加深入的瞭解，希望我們能共同進步，共同學習。 如果覺得寫的不錯的或對CSS更加感興趣的大佬們，還可以去看看我的You don't know css(2)

相關文章