Css3系列——css3新特性學習筆記

時間 2019-11-13

標籤 css3 css 系列特性學習筆記欄目 CSS 简体版

原文原文鏈接

1. css3介紹

學習網址：http://css.doyoe.com/

1.1. 原則

漸進加強原則
- 例如圓角和box-shadow

2. 選擇器部分

nth-child()選擇器css
- 選擇前五個用nth-child(-n+5)
- 他的規則是符合kn+b的表達式,nth-child(5-n)是不能夠的，必須n在前面
- 數元素從1開始數，可是n是從零開始的
- 參考點
  - 參照父級的"第幾個"子元素
  - 不但參照父元素，並且「相應位置」的元素類型E必須匹配
- 實現效果
:empty選擇器能夠用做爲購物車沒有商品的時候不顯示數字圖標html
::before和::after前端
- 內容css3
  - ::before ::after 會分別在元素的最前面和最後面添加一個元素,會影響佈局
  - 而且咱們可像定義一個正常元素同樣去定義它的樣式
  - 必需要有content ，content 能夠寫入文本內容，一般給空
```
/*也能夠這樣使用*/
.main .item:after {
    content: attr(data-brief);
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 210px;
    position: absolute;
    top: 0;
    left: 0;
    color: #FFF;
    font-family: '微軟雅黑';
    font-size: 18px;
    background-color: rgba(170, 170, 170, 0);
    z-index: -1;
    transition: all 0.3s ease-in;
}
```
  - 新建立的元素是一個行內元素，在使用時一般會轉成塊元素，但並非必需要轉
- ：和::區別
  - CSS2裏僞元素是用:來表示的，可是低版本只有:after :before兩個僞元素
  - CSS3裏新增了更多的僞元元素，而且約束僞元素使用::來規範，因此在CSS3裏也就變成了 ::after ::before
  - 支持CSS3僞元素的瀏覽器，是能夠正常識雖::，假如遇到:僞元素，會自動轉成::。是爲了作一個兼容處理
- 將來開發用：仍是：：?
  - :建議採用的::不建議採用

li::before {
            content: 'itcast';
            /*display: block;*/
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        li::after {
            content: '';
            /*display: block;*/
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .add {
            display: block;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

::selection選擇器
- 須要注意的是，::selection只能定義被選擇時的background-color，color及text-shadow

3. 文本

text-shadow屬性瀏覽器
- 一個元素上能夠設置多個陰影
- 可分別設置偏移量、模糊度、顏色（可設透明度）。curl
  - 水平偏移量正值向右負值向左；
  - 垂直偏移量正值向下負值向上；
  - 模糊度是不能爲負值；
- 實現效果wordpress
- 能夠實現浮雕特效
```
body {
      background-color: gray;
      font: bold 6em "microsoft yahei";
  }

  div {
      margin: 30px;
      color: #808080;
      text-align: center;
  }

  .to {
      text-shadow: -1px -1px #FFF, 1px 1px #000;
  }

  .ao {
      text-shadow: 1px 1px 0px #FFF, -1px -1px 0px #000;
  }
```

4. 邊框

4.1. 邊框圓角：border-radius

圓形寫法和橢圓形寫法

參數寫法

兩種寫法原理圖

以後咱們若是想獲得什麼樣的圓角能夠畫上面的，而後計算百分比等
實現效果

4.2. 邊框陰影:box-shadow

用法

/*使用方法和文字陰影同樣，也能夠設置多個陰影*/
.item:nth-child(5) {
    box-shadow: 2px 2px 10px #CCC, 4px 4px 4px blue, inset 8px 8px 10px red;
}

語法說明
- 水平偏移量正值向右負值向左；
- 垂直偏移量正值向下負值向上；
- 模糊度是不能爲負值
- inset能夠設置內陰影
設置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的佈局,只是視覺上的變化。能夠設置多重邊框陰影，實現更好的效果，加強立體感
實現效果

4.3. 邊框圖片：border-image

做用：經過邊框背景圖片能夠實現自適應的邊框樣式，無需準備多張圖片。
混合寫法：border-image: url(./images/border.png) 27 stretch repeat;
多屬性寫法佈局
- border-image-source: url(./images/border.png)；引入一個圖片
- border-image-slice: 27 27 27 27；四刀裁剪
- border-image-repeat: stretch；平鋪效果
- border-image-width: 80px; 改變邊框背景的寬度

5. 盒子模型

計算盒子大小=content + padding + border
CSS3有一個新的屬性能夠改變計算盒子大小的方式,box-sizing
- box-sizing: content-box;:默認計算方式 content = width => (盒子大小=width + padding + border)
- box-sizing: border-box;:計算方式 content = width - padding - border => (盒子大小= width - padding - border + padding + border)
  - 也就是盒子大小不會改變
動畫效果post

6. 顏色

賦值方式能夠是數值或者角度

6.1. opacity

透明度能夠用opacity屬性，不過有個bug，opacity只能針對整個盒子設置透明度，子盒子及內容會繼承父盒子的透明度

6.2. transparent

transparent屬性值，不可調節透明度，始終徹底透明學習

能夠實現截取三角的效果

.inner {
  width: 0px;
  height: 0px;
  border-width:20px;
  border-style:solid;
  border-color:red transparent transparent transparent
  background: transparent;
}

6.3. RGBA模式

相較opacity，它們不具備繼承性，即不會影響子元素的透明度
Red、Green、Blue、Alpha即RGBA
取值
- R、G、B 取值範圍0~255
- background: rgba(255, 255, 255, 0.5);

6.4. HSLA模式

相較opacity，它們不具備繼承性，即不會影響子元素的透明度。
Hue、Saturation、Lightness、Alpha即HSLA
取值
- H 色調取值範圍0~360，0/360表示紅色、120表示綠色、240表示藍色
- S 飽和度取值範圍0%~100%
- L 亮度取值範圍0%~100%
- A 透明度取值範圍0~1
- 注意只能是百分號，不能是數值background-color: hsla(360, 50%, 50%, .5);

7. 漸變

7.1. 線性漸變

linear-gradient線性漸變指沿着某條直線朝一個方向產生漸變效果
必要參數：方向、起始顏色、終止色
方向說明
- 直線
  - background: linear-gradient(to right, yellow, green)
- 角度
  - background: linear-gradient(45deg, yellow, green)
  - 角度計算圖
漸進範圍說明
- 此時的百分比是相對於父盒子的百分比
- 下面的百分比是位置，若是不一樣顏色的位置相同，說明他們中間沒有漸進
```
background: linear-gradient(
      90deg,
      yellow 25%,
      green 25%,
      green 50%,
      blue 50%,
      blue 75%,
      pink 75%,
      pink 100%
  );
```
- 實現效果

賦值給background-image

瀏覽器會自動把漸變轉換爲一張圖片，那麼背景圖片涉及到的屬性，這裏就均可以用了
當指定了背景圖片尺寸的時候，百分比相對於background-size的了

代碼實現藉助透明屬性值和背景來實現的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 漸變</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #CCC;
        }

        .linear:nth-child(1) {
            width: 1000px;
            height: 100px;
            margin: 100px auto;
            background-color: #FFF;
            background-image: linear-gradient(
                135deg,
                black 25%,
                transparent 25%,
                transparent 50%,
                black 50%,
                black 75%,
                transparent 75%
            );
            /*background-repeat: no-repeat;*/
            background-size: 100px 100px;
            animation: move 1s linear infinite;

        }

        /*定義動畫序列*/
        @keyframes move {
            from {}
            to {
                background-position: 100px 0;
            }
        }
    </style>
</head>
<body>
    <div class="linear"></div>
</body>
</html>

7.2. 徑向漸變

radial-gradient徑向漸變指從一箇中心點開始沿着四周產生漸變效果
必要參數：輻射範圍即圓半徑,中心點,漸變起始色,漸變終止色
代碼

.radial {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    /*位置給英文*/
    background-image: radial-gradient(120px at left top, yellow, green);
    /*位置能夠是百分比和數值*/
    background-image: radial-gradient(120px 80px at 100% 100%, yellow, green);

    /*輻射範圍能夠是橢圓*/
    background-image: radial-gradient(120px 80px at center center, yellow, green);

    /*能夠給多個漸變色和漸變色位置*/
    background-image: radial-gradient(120px at center center, yellow, green, blue, pink);
     background-image: radial-gradient(120px at center center, yellow 25%, green 45%, blue, pink);
}

效果實現

漸變效果

球體

球體代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 漸變</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .radial-gradient {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;

            background-color: blue;

            background-image: radial-gradient(
                200px at 50px 60px,
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0.6)
            );
        }
    </style>
</head>
<body>
    <div class="radial-gradient"></div>
</body>
</html>

8. 過渡

8.1. 基礎

過渡是CSS3中具備顛覆性的特徵之一，能夠實現元素不一樣狀態間的平滑過渡（補間動畫），常常用來製做動畫效果。
得讓他具有兩種狀態才能過渡
- hover能夠作到這個效果
- 用js動態增長新的類樣式能夠作到這個效果
過渡屬性寫在A,B狀態均可以，可根據自已狀況來設置

// 進入的時候有動畫，離開的時候沒動畫，加載上面就是進入和離開的時候都有動畫
.transition {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: green;
}

.transition:hover {
    transition: all 3s;
    background-color: yellow;
}

複合和拆分寫法
- 參數之間除，過渡時間和延遲時間有前後要求，其餘沒有位置要求
- 建議寫法:transition:屬性時間延遲速度

過渡能夠實大部分屬性的過渡，但並非所有屬性，具體哪些屬性也沒有明確的說明，你們也不用記住

8.2. 幀動畫

經過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度LOGO</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .logo {
            width: 270px;
            height: 129px;
            margin: 100px auto;
            background-image: url(./baidu.png);
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div class="logo"></div>
    <script>
        var logo = document.querySelector('.logo');

        var offset = -270;
        var n = 0;

        setInterval(function () {
            n++;

            logo.style.backgroundPosition = offset * n + 'px 0px';

            if(n >= 64) n = 0;
        }, 100);
    </script>
</body>
</html>

8.3. 補間動畫

自動完成從起始狀態到終止狀態的的過渡
擴展：http://mux.alimama.com/posts/1009

9. 變換

⭐️⭐️⭐️注意在進行rocate操做的時候，座標系也會跟着發生改變，因此動畫的執行順序不同，效果是不同的⭐️⭐️⭐️

9.1. 2D變換

轉換是CSS3中具備顛覆性的特徵之一，能夠實現元素的位移、旋轉、變形、縮放，甚至支持矩陣方式，配合即將學習的過渡和動畫知識，能夠取代大量以前只能靠Flash才能夠實現的效果。
咱們能夠同時執行多個操做,transform: translate(400px, 0) rotate(360deg) scale(2)；，☆☆☆其順序會影響轉換的效果。☆☆☆
- 咱們能夠同時使用多個轉換，其格式爲：transform: translate() rotate() scale() ...等，

9.1.1. 經常使用方法

9.1.1.1. 移動 translate(x, y)

能夠改變元素的位置，x、y可爲負值；
移動位置至關於自身原來位置
軸正方向朝下
除了能夠像素值，也能夠是百分比，相對於自身的寬度或高度

9.1.1.2. 縮放 scale(x, y)

能夠對元素進行水平和垂直方向的縮放，x、y的取值可爲小數；

9.1.1.3. 旋轉 rotate(deg)

能夠對元素進行旋轉，正值爲順時針，負值爲逆時針；
當元素旋轉之後，座標軸也跟着發生的轉變
調整順序能夠解決，把旋轉放到最後

9.1.1.4. 傾斜 skew(deg, deg)

可使元素按必定的角度進行傾斜，可爲負值，第二個參數不寫默認爲0。
傾斜角度的時候通常不一樣時給兩個參數，這樣的話人腦很差想象

9.1.1.5. 矩陣matrix()

把全部的2D轉換組合到一塊兒，須要6個參數。

9.1.2. transform-origin

transform-origin能夠調整元素轉換的原點，主要用於rotate,對於transform: translate(x，y) 沒有影響。
- 撲克旋轉的原點變爲右下角

9.1.3. 其餘

效果實現

代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drop-shadows</title>    
    <style>
        body {
            font: 14px/1.5 Arial, sans-serif;
            padding: 20px 0 0;
            text-align: center;
            color: #333;
            background: #ccc;
        }

        .drop-shadow {
            position: relative;
            width: 45%;
            padding: 14px; 
            margin: 28px auto 70px; 
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
                        0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content: "";
            position: absolute; 
            z-index: -2;
            bottom: 15px;
            left: 10px;
            width: 50%;
            height: 20%;
        }

        .drop-shadow:after {                 
            right: 10px; 
            left: auto;
        }

        .round {
            border-radius: 4px;
        }

        .round:before,
        .round:after { 
            max-width: 300px;
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            transform: rotate(-3deg);
        }

        .round:after {
            transform: rotate(3deg);
        }

        .curls {
            border: 1px solid #efefef;   
            border-radius: 0 0 120px 120px / 0 0 6px 6px;
        }

        .curls:before,
        .curls:after { 
            bottom: 12px;
            max-width: 200px;
            height: 55%;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            transform: skew(-8deg) rotate(-4deg);
        } 

        .curls:after {
            transform: skew(8deg) rotate(4deg);
        }

        .perspective:before {
            left: 28px;
            bottom: 8px;
            max-width: 200px;
            height: 35%;
            box-shadow: -60px 5px 8px rgba(0, 0, 0, 0.4);
            transform: skew(50deg);
        }

        .perspective:after {
            display: none;
        }

        .raised:before {
            width: auto;
            right: 10px;
            left: 10px;
            bottom: 0;
            box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
        }


    </style>
</head>
<body>

    <div class="drop-shadow round">
        <h1>CSS drop-shadows without images</h1>
        <p>No extra markup, fluid, all modern browsers</p>
    </div>

    <div class="drop-shadow curls">
        <h1>Some curls</h1>
        <p>No extra markup, all modern browsers</p>
    </div>

    <div class="drop-shadow perspective">
        <h1>Some perspective</h1>
        <p>No extra markup, all modern browsers</p>
    </div>

    <div class="drop-shadow raised">
        <h1>Raised box</h1>
        <p>No extra markup, all modern browsers</p>
    </div>
</body>
</html>

效果實現
- 左右翻轉，其實在一張圖片上

代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 3D轉換</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #B3C04C;
        }

        .wallet {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 10s;
        }

        .wallet::before, .wallet::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-image: url(./images/bg.png);
            background-repeat: no-repeat;
        }

        .wallet::before {
            background-position: right top;
            transform: rotateY(180deg);
        }

        .wallet::after {
            background-position: left top;
            /*backface-visibility: hidden;*/
            transform: translateZ(2px);
        }

        .wallet:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="wallet"></div>
</body>
</html>

9.2. 3D變換

translateX的時候出滾動條了，因此會影響元素位置
若是想要作3D效果，有遮擋的立體感，通常要設置transform-style和perspective屬性

9.2.1. 3D座標系

通常圖形中點是座標系的原點

9.2.2. 經常使用方法

9.2.3. 透視（perspective）

9.2.3.1. 注意點

電腦顯示屏是一個2D平面，圖像之因此具備立體感（3D效果），其實只是一種視覺呈現，元素自己大小沒有改變，經過透視能夠實現此目的。
並不是任何狀況下須要透視效果

9.2.3.2. 原理圖

9.2.3.3. perspective有兩種寫法

做爲一個屬性，設置給父元素，做用於全部3D轉換的子元素
- perspective:1000px
做爲transform屬性的一個值，作用於元素自身
- 注意必需要寫在最前面，順序能夠影響效果
- transform: perspective(400px) translateZ(200px);

9.2.3.4. 實現效果

只是起到透視會產生「近大遠小」的效果，但仍是平面

9.2.4. 3D呈現（transform-style）

☆☆☆☆☆☆☆☆這個屬性必須給父盒子加，裏面的子元素必須爲變形原素,也就是子元素運用transform屬性。☆☆☆☆☆
- 這樣是把一個平面的東西變爲多個面!
取值flat：全部子元素在 2D 平面呈現。取值preserve-3d：保留3D空間
效果

9.2.5. backface-visibility

設置元素背面是否可見

9.2.6. 效果實現

立方體效果

立方體代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3D轉換</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
            margin: 100px auto;
            position: relative;
            transform: rotateY(30deg) rotateX(-30deg);
            transform-style: preserve-3d;

            animation: rotate 8s linear infinite;
        }

        .front, .back, .left, .right, .top, .bottom {
            width: 200px;
            height: 200px;
            /*關鍵點是讓幾個面重合，這樣座標系能夠統一*/
            position: absolute;
            top: 0;
            left: 0;
            /*給透明度是爲了能夠看到後面的面*/
            /*opacity: 0.5;*/
        }

        .front {
            background-color: pink;
            transform: rotateY(0) translateZ(100px);
        }

        .back {
            background-color: blue;
            transform:  translateZ(-100px);
        }

        .left {
            background-color: green;
            transform:  rotateY(90deg) translateZ(-100px);
        }

        .right {
            background-color: yellow;
            transform: rotateY(90deg) translateZ(100px);
        }

        .top {
            background-color: red;
            transform: rotateX(90deg) translateZ(100px);
        }

        .bottom {
            background-color: orange;
            transform:  rotateX(90deg) translateZ(-100px);
        }

        @keyframes rotate {
            from {
                transform: rotateX(0) rotateY(360deg);
            }

            to {
                transform: rotateX(360deg) rotateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
</body>
</html>

3D導航效果

3D導航代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 3D轉換</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: '微軟雅黑';
            background-color: #F7F7F7;
        }

        .nav {
            height: 40px;
            margin-top: 50px;
            text-align: center;
            list-style: none;
        }

        li {
            width: 120px;
            height: 40px;
            float: left;
            position: relative;

            transition: all 1s;

            transform-style: preserve-3d;
        }

        li span {
            height: 100%;
            width: 100%;
            line-height: 40px;
            position: absolute;
            left: 0;
            top: 0;
        }

        li span:nth-child(1) {
            transform: translateZ(20px);
            background: green;
        }

        li span:nth-child(2) {
            transform: rotateX(90deg) translateZ(20px);
            background: yellow;
        }

        li:hover {
            transform: rotateX(-90deg);
        }

    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <span>Web前端</span>
            <span>石國慶</span>
        </li>
        <li>
            <span>Web前端</span>
            <span>石國慶</span>
        </li>
        <li>
            <span>Web前端</span>
            <span>石國慶</span>
        </li>
        <li>
            <span>Web前端</span>
            <span>石國慶</span>
        </li>
    </ul>
</body>
</html>

10. 動畫

11. 其餘

定位：
css浮動
行內元素和塊級元素
- http://www.cnblogs.com/malinlin/p/4800683.html
- http://www.cnblogs.com/dearxinli/p/3591790.html
- http://www.jb51.net/css/68729.html
  - 行內元素中不能有塊級元素
- <>
什麼時候用marging和padding:http://www.cnblogs.com/victent/p/3969338.html
盒子模型知多少：http://www.cnblogs.com/wangfupeng1988/p/4287292.html
- margin縱向會重疊
- 兩種塌陷問題：http://www.cnblogs.com/hugejinfan/p/5901320.html
css定位：http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html
撐滿盒子的兩種辦法

擴展：兩種設置撐滿全屏的方法，下面的寫法用的比較多
width: 100%;
height: 100%;


position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;

居中的三種方法

.arms {
    width: 340px;
    background-color: #A4CA39;
    border-radius: 25px;

    方法一
    test-align:center;
    // 垂直方向兩條基線對齊
    vertual-align:center;

    方法二
    position: absolute;
    left:50%;
    top:50%;
    寬度的一半
    這樣有問題，當盒子變化的時候有問題，因此推薦你們用方法3
    margin:-170px 0 0 -170px;

   方法三
    position: absolute;
    left:50%;
    top:50%;
    寬度的一半
    /*位移時設置百分比，相對盒子的大小和原來的位置*/
    transform: translate(-50%, -50%);
}