CSS3 入門詳解（一）

時間  2019-11-08
標籤 css3 css 入門 詳解 欄目 CSS 简体版
原文   原文鏈接

image

前言

如同人類的的進化同樣， CSS3是 CSS2的「進化」版本，在 CSS2基礎上，加強或新增了許多特性，彌補了 CSS2的衆多不足之處，使得 Web開發變得更爲高效和便捷。

1.選擇器

CSS3新增了許多靈活查找元素的方法，極大的提升了查找元素的效率和精準度。 CSS3選擇器與 jQuery中所提供的絕大部分選擇器兼容。

1.1 屬性選擇器

屬性選擇器就是經過屬性來選擇元素。
選擇器 含義
[attr] 存在attr屬性便可
[attr=val] 屬性值徹底等於val
[attr*=val] 屬性值裏包含val字符而且在「任意」位置
[attr^=val] 屬性值裏包含val字符而且在「開始」位置
[attr$=val] 屬性值裏包含val字符而且在「結束」位置

一、[attr]javascript

<style>
    /* 全部擁有class屬性的標籤，添加color樣式 */
    [class]{
        color: #333;
    }
</style>

二、[attr=val]css

<style>
    /* 全部擁有class屬性全等於「one」的標籤，添加color樣式 */
    [class = "one"]{
        color: #333;
    }
</style>

三、[attr*=val]html

<style>
    /* class屬性的值裏面包含「one」的標籤，添加color樣式 */
    [attr*="one"]{
        color: #333;
    }
</style>

四、[attr^=val]java

<style>
    /* class屬性的值以「one」開始的標籤，添加color樣式 */
    [attr ^= "one"]{
        color: #333;
    }
</style>

五、[attr$=val]css3

<style>
    /* class屬性的值以「one」結束的標籤，添加color樣式 */
    [attr $= "one"]{
        color: #333;
    }
</style>

1.2 僞類選擇器

除了之前介紹的的 :link、 :active、 :visited、 :hover， CSS3又新增了其它的僞類選擇器。

一、結構（位置）僞類數組

選擇器 含義
:first-child 其父元素的第1個子元素
:last-child 其父元素的最後1個子元素
:nth-child(n) 其父元素的第n個子元素
:nth-last-child(n) 其父元素的第n個子元素（倒着數）

二、空僞類瀏覽器

:empty選中沒有任何子節點的元素 
<style>
   div:empty {   /* 沒有子元素的div元素 */
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<!-- css 樣式不起做用 -->
<div class="one">阿斯蒂芬</div>   

<!-- css樣式不起做用 -->
<div>
    <p></p>
</div>

<!-- css樣式生效 -->
<div></div>

三、目標僞類wordpress

:target結合錨點進行使用，處於當前錨點的元素會被選中； 
<style type="text/css">
    /* 使用錨連接指向當前標籤的時候 */
    .one:target {
        background-color: pink;
        font-size: 30px;
    }
</style>

<a href="#hh">找笑臉去</a>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p id="hh" class="one">阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>
<p>阿斯頓發撒旦法撒打發放大法的撒雙方都</p>

四、排除僞類佈局

:not(selector)除 selector（任意選擇器）外的元素會被選中； 
<style>
    /* 除了類名是「.not」的div元素 */
    div:not(.one) {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<!-- css樣式不生效 -->
<div class="one"></div>

<!-- css樣式生效 -->
<p></p>

<!-- css樣式生效 -->
<div></div>

1.3 僞元素選擇器

  • 一、::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
  • 二、::first-line 文本第一行；
  • 三、::selection 可改變選中文本的樣式；
  • 四、::before和::after

示例代碼：僞元素實現橫豎分割線學習

<style type="text/css">
    * {
         margin: 0;
         padding: 0;
         list-style: none;
    }
    .box {
         width: 300px;
         height: 200px;
         background-color: pink;
         margin: 50px auto;
    }
    .box li {
         width: 100px;
         height: 100px;
         float: left;
         background-color: #555;
         position: relative;
         overflow: hidden;
    }

    li:before {
         content: "";
         display: block;
         width: 90px;
         height: 1px;
         background-color: #ccc;
         position: absolute;
         top: 97px;
         left: 5px;
    }
    li:after {
         content: "";
         display: block;
         width: 1px;
         height: 90px;
         background-color: #ccc;
         position: absolute;
         left: 0px;
         top: 4px;
    }
    li:nth-child(1):after,li:nth-child(4):after {
         display: none;
    }

    li:nth-last-child(-n+3):before {
         display: none;
    }
</style>

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

效果圖：

image

:after、 :before在舊版本里是僞元素， CSS3的規範裏「 :」用來表示僞類，「 ::」用來表示僞元素，可是在高版本瀏覽器下 :after、 :before會被自動識別爲 ::after、 ::before，這樣作的目的是用來作兼容處理。

2. 顏色

新增了 RGBA、 HSLA模式，其中的 A表示透明度，便可以設置顏色值的透明度，相較 opacity，它們不具備繼承性，即不會影響子元素的透明度。

2.1 RGBA

Red、 Green、 Blue、 Alpha即 RGBA， R、 G、 B取值範圍 0~255。 
<style>
    #box{
        width:100px;
        height:100px;
        background: rgba(200,200,200,.5);
    }
</style>

<div id="box"></div>

2.2 HSLA

  • H 色調 取值範圍0~360，0/360表示紅色、120表示綠色、240表示藍色
  • S 飽和度 取值範圍0%~100%
  • L 亮度 取值範圍0%~100%
  • A 透明度 取值範圍0~1 
<style>
    #box{
        width:100px;
        height:100px;
        background: hsla(200,50%,50%,.5);
    }
</style>

<div id="box"></div>

2.3 關於 CSS 的透明度

Alpha和 opacity的區別主要就是， opacity具備繼承性，父盒子設置該屬性，下面全部的子元素都會繼承該屬性。

transparent不可調節透明度，始終徹底透明。

3. 文本陰影

text-shadow，可分別設置偏移量、模糊度、顏色（可設透明度）。

如：

text-shadow: 2px 2px 2px #CCC;
  • 一、水平偏移量 正值向右 負值向左；
  • 二、垂直偏移量 正值向下 負值向上；
  • 三、模糊度是不能爲負值；
  • 四、陰影顏色。

示例代碼：文字浮雕

<style>
     html,body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          background-color: #999;
          font-size: 50px;
          text-align: center;
          line-height: 260px;
          color: #999;
     }
        
    .one {
         text-shadow: -1px -1px 1px #fff,1px 1px 1px #000;
    }

    .two {
         text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
    }
</style>

<div class="one">我是凸起文字</div>
<div class="two">我是凹下去的文字</div>

效果圖：

image

4. 盒模型

CSS3中能夠經過 box-sizing來指定盒模型，便可指定爲 content-box、 border-box，這樣咱們計算盒子大小的方式就發生了改變。

能夠分紅兩種狀況：

  • 一、box-sizing: border-box盒子大小爲width
  • 二、box-sizing: content-box盒子大小爲width + padding + border

注：上面的標註的width指的是CSS屬性裏設置的width: length，content的值是會自動調整的。

示例代碼：

<style type="text/css">
     .box {
          width: 316px;
          height: 170px;
          float: left;
          margin-left: 20px;
          box-sizing: border-box;
     }
     .box img {
          width: 100%;
          height: 100%;
     }

     .box:hover {
          border: 10px solid #00eeff;
     }
</style>

<div class="box">
   <img src="1.jpg" alt="">
</div>

<div class="box">
   <img src="1.jpg" alt="">
</div>

效果圖：

image

能夠看出經過設置盒子模型後，雖然.box設置了邊框，可是整個box的盒子大小沒有改變。

5. 邊框

邊框中的邊框圓角、邊框陰影屬性，應用十分普遍，兼容性也相對較好，具備符合漸進加強原則的特徵。

5.1 邊框圓角

經過 border-radius屬性，設置邊框圓角，圓角處理時，腦中要造成圓、圓心、橫軸、縱軸的概念，正圓是橢圓的一種特殊狀況。

image

爲了方便表述，咱們將四個角標記成1、2、3、4，如2表明右上角，CSS裏提供了border-radius來設置這些角橫縱軸半徑值。

分別設置橫縱軸半徑，以「/」進行分隔，遵循「1，2，3，4」規則，「/」前面的1~4個用來設置橫軸半徑（分別對應橫軸1、2、3、4位置），「/」後面1~4個參數用來設置縱軸半徑（分別對應縱軸1、2、3、4位置 ）。

<style type="text/css">
    .box {
        margin: 50px auto;
        width: 300px;
        height: 500px;
        border: 1px solid #ccc;
        border-radius: 10px 20px 50px 70px / 10px 20px 50px 70px;
    }
</style>

<div class="box"></div>

效果圖：

通常狀況下，咱們用不到這麼複雜的，除非特殊需求的時候。

image

支持簡寫模式，具體以下：

  • 一、border-radius: 10px;表示四個角的橫縱軸半徑都爲10px；
  • 二、border-radius: 10px 5px;表示1和3角橫縱軸半徑都爲10px，2和4角橫縱軸半徑爲5px；
  • 三、border-radius: 10px 5px 8px;表示1角模縱軸半徑都爲10px，2和4角橫縱軸半徑都爲8px，3角的橫縱軸半徑都爲8px；
  • 四、border-radius: 10px 8px 6px 4px;表示1角橫縱軸半徑都爲10px，表示2角橫縱軸半徑都爲8px，表示3角橫縱軸半徑都爲6px，表示4角橫縱軸半徑都爲6px；

橢圓的畫法：

<style type="text/css">
    .box {
        margin: 50px auto;
        width: 300px;
        height: 500px;
        border: 1px solid #ccc;
        /* 當盒子長寬不一致時，圓角屬性 分別設置寬度的一半，以及長度的一半，便是橢圓 */
        /* 或者直接 border-radius:50%; */
        border-radius: 150px 250px;
    }
</style>

<div class="box"></div>

image

若是不想計算，直接設百分比：「50%」。

正圓的畫法：

<style type="text/css">
    .box {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        /* 當盒子長寬相等時，圓角屬性分別設置寬度的一半，以及長度的一半，便是正圓 */
        /* 或者直接 border-radius:50%; */
        border-radius: 100px;
    }
</style>

<div class="box"></div>

image

示例代碼：邊框圓角合集

<style>
    * {
          margin: 0;
          padding: 0;
          list-style: none;
          background-color: wheat;
          overflow: hidden;
     }
    
     .box {
          width: 980px;
          height: 400px;
          background-color: #fff;
          margin: 50px auto;
     }
    
     .box li {
          float: left;
          width: 193px;
          height: 193px;
          background-color: #fff;
          margin:5px;
          box-shadow: 2px 3px 5px #aaa;
     }
    
     li:first-child:after {
          content: "";
          height: 130px;
          width: 130px;
          margin: 30px auto;
          display: block;
          border: 1px solid orangered;
          border-radius: 50%;
     }
     li:nth-child(2):after {
          content: "";
          display: block;
          height: 130px;
          width: 130px;
          border: 1px solid orangered;
          margin: 30px auto;
          border-radius: 65px 65px 0px 0px;
     }
    
     li:nth-child(3):after {
          content: "";
          display: block;
          width: 130px;
          height: 65px;
          border: 1px solid orangered;
          margin: 50px auto;
          border-radius: 65px 65px 0px 0px;
     }
    
     li:nth-child(4):after {
          content: "";
          display: block;
          width: 130px;
          height: 130px;
          border: 1px solid orangered;
          margin: 20px auto;
          border-radius: 65px 0px 0px 0px;
     }
    
     li:nth-child(5):after {
          content: "";
          width: 130px;
          height: 65px;
          display: block;
          border: 1px solid orangered;
          border-radius: 50%;
          margin: 50px auto;
     }
     li:nth-child(6):after{
          content: "";
          height: 130px;
          width: 65px;
          display: block;
          border: 1px solid orangered;
          border-radius: 50%;
          margin: 20px auto;
     }
    
     li:nth-child(7):after {
          content: "";
          height: 130px;
          width: 130px;
          display: block;
          border: 1px solid orangered;
          margin: 20px auto;
          border-radius: 135px 0px 0px 0px;
     }
    
     li:nth-child(8):after {
          content: "";
          width: 135px;
          height: 30px;
          display: block;
          margin: 30px auto;
          border: 1px solid orangered;
          border-radius: 65px 65px 0px 0px / 30px 30px 0px 0px;
     }
</style>

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

效果圖：

image

5.2 邊框陰影

box-shadow，與文字陰影相似，可分別設置盒子陰影偏移量、模糊度、顏色（可設透明度）。

如：

box-shadow: 5px 5px 5px #CCC
  • 一、水平偏移量 正值向右 負值向左；
  • 二、垂直偏移量 正值向下 負值向上；
  • 三、模糊度是不能爲負值；
  • 四、inset能夠設置內陰影；

注：設置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的佈局。能夠設置多重邊框陰影，實現更好的效果，加強立體感，符合漸進加強，實際開發中能夠大膽使用。

示例代碼：

<style>
    .box {
        width: 200px;
        height: 200px;
        margin: 50px auto;
        border: 1px dashed #000;
        box-shadow: 2px 3px 4px rgba(0, 247, 255, 0.452),inset 5px 6px 7px rgba(255, 0, 140, 0.562);
    }
</style>

<div class="box"></div>

效果圖：

image

咱們經過上圖能夠看到，虛線是盒子的位置，粉色陰影是inset屬性設置的，因此是內陰影，淺藍色是直接設置的外陰影，效果一目瞭然。

6. 背景

背景在 CSS3中也獲得很大程度的加強，好比背景圖片尺寸、背景裁切區域、背景定位參照點、多重背景等。

6.1 background-size

經過 background-size設置背景圖片的尺寸，就像咱們設置 img的尺寸同樣，在移動 Web開發中作屏幕適配應用很是普遍。

其參數設置以下：

  • 能夠設置長度單位(px)或百分比（設置百分比時，參照盒子的寬高）
  • 設置爲cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，若有溢出部分則會被隱藏。
  • 設置爲contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。

6.2 background-origin

經過 background-origin能夠設置背景圖片定位( background-position)的參照原點。

其參數設置以下：

  • border-box以邊框作爲參考原點；
  • padding-box之內邊距作爲參考原點；
  • content-box之內容區作爲參考點；

示例代碼：

<style type="text/css">
    .box1,.box2,.box3 {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin: 50px 30px;
        border: 10px dashed aquamarine;
        padding: 10px;
        background-image: url(bg.jpg);
        background-repeat: no-repeat;
    }
    .box1{
        background-origin: padding-box;
    }
    .box2{
        background-origin: content-box;
    }
    .box3{
        background-origin: border-box;
    }
</style>


<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

效果圖：

image

6.3 background-clip

經過 background-clip，能夠設置對背景區域進行裁切，即改變背景區域的大小。

其參數設置以下：

  • border-box裁切邊框之內爲背景區域；
  • padding-box裁切內邊距之內爲背景區域；
  • content-box裁切內容區作爲背景區域；

image

6.4 多背景

以逗號分隔能夠設置多背景，可用於自適應佈局。在一個盒子裏能夠設置多個背景圖片，經過背景定位的功能將兩張圖片組裝起來。

示例代碼：

<style type="text/css">
    .box {
        width: 320px;
        height: 410px;
        margin: 50px auto;
        background: url(head.jpg) no-repeat left top,
                      url(foot.jpg) no-repeat left bottom; 
        background-size: contain;
        background-color: #ccc;
    }
</style>

<div class="box"></div>

效果圖：

image

從效果圖中咱們能夠看到，在盒子裏面設置了兩張背景圖，分別是上面一部分，下面一部分。這裏故意給盒子高度拉長了一點，而且設置了一個灰色的背景，爲的就是你們可以清楚的看到上下兩部分的背景圖。

7. 漸變

漸變是 CSS3當中比較豐富多彩的一個特性，經過漸變咱們能夠實現許多炫麗的效果，有效的減小圖片的使用數量，而且具備很強的適應性和可擴展性。

7.1 線性漸變

linear-gradient線性漸變指沿着某條直線朝一個方向產生漸變效果。

一、必要的元素：

藉助 Photoshop總結得出線性漸變的必要元素
  • a、方向
  • b、起始色
  • c、終止色
  • d、漸變距離

二、關於方向

經過具體的方位詞指定
  • to left
  • to right
  • to top
  • to bottom
經過角度改變漸變的方向
  • 0°，從下往上漸變
  • 90°，從左向右漸變

示例代碼：

<style type="text/css">
    .box {
        width: 400px;
        height: 150px;
        margin: 100px auto;
        /* 線性漸變 */
        background-image: linear-gradient(
            /*漸變的方向*/
            45deg,
            /*漸變開始的顏色*/
            #88f5ea,
            /*漸變結束的顏色*/
            #d36be7
        );
    }
</style>

<div class="box"></div>

效果圖：

image

三、漸變範圍

若是不設置範圍，默認漸變的範圍是父盒子的寬度，若是經過 background-size設置寬度的話，漸變範圍即爲設置的寬度。 
<style>
    .box {
        width: 500px;
        height: 100px;
        margin: 100px auto;
        background-image: linear-gradient(
            135deg,
            yellow 20%,
            black 20%,
            black 40%,
            yellow 40%,
            yellow 60%,
            black 60%,
            black 80%,
            yellow 80%,
            yellow 
        );
        background-size: 66px 100px;
    }
</style>

<div class="box"></div>

效果圖：

image

7.2 徑向漸變

radial-gradient徑向漸變指從一箇中心點開始沿着四周產生漸變效果。

一、必要的元素：

  • a、輻射範圍即圓半徑
  • b、中心點 即圓的中心
  • c、漸變起始色
  • d、漸變終止色
  • e、漸變範圍

二、關於中心點

中心位置參照的是盒子的左上角，例如： 
<style>
    #div{
        width:200px;
        height:200px;
        background: radial-gradient(
            /* 100px是漸變輻射的範圍 0 0 指的是圓心在盒子的左上角 */
            100px at 0 0,
            /*漸變起始色*/
            orange,
            /*漸變終止色*/
            #ff4500
        )
    }
</style>

<div id="box"></div>

image

示例代碼：鏡像漸變畫個球

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    html,body {
        width: 100%;
        height: 100%;
        background-color: #ccc;
    }

    .box {
         width: 400px;
         height: 400px;
         background-color: #fff;
         margin: 50px auto;
         border-radius: 50%;

         background-image: radial-gradient(
               300px at 100px 100px,
               rgba(0,0,0,.1),
               rgba(0,0,0,.8)
         );
    }
</style>

<div class="box"></div>

效果圖：

image

8. 過渡

過渡是 CSS3中具備顛覆性的特徵之一，能夠實現元素不一樣狀態間的平滑過渡（補間動畫），常常用來製做動畫效果。

8.1 幀動畫

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

image

示例代碼：

<!--
    baidu.png這個背景圖由64張圖片橫向組成，咱們經過動態改變圖片的位置，實現動畫效果
-->
<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>

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

效果圖：

image

這裏不作詳細瞭解，主要是爲了區分與補間動畫的區別。

8.2 補間動畫

自動完成從起始狀態到終止狀態的的過渡。

語法：transition

當前元素只要有「屬性」發生變化時，能夠平滑的進行過渡，並不只僅侷限於 hover狀態。
  • transition-property設置過渡屬性
/*設置哪些屬性要參加到動畫效果中*/
transition-property: all;
  • transition-duration設置動畫過渡執行時間
transition-duration: 2s;
  • transition-timing-function設置過渡速度類型
transition-timing-function:linear; 

/* ease| ease-in | ease-out | ease-in-out | linear; */
  • transition-delay設置過渡延時
/*1s後，過渡動畫開始過渡*/
transition-delay: 1s;

連寫：

/*          屬性  執行時間 延時時間 過渡類型*/
transition: all   2s       1s       linear;

示例代碼：

<style type="text/css">
    .box {
        width: 250px;
        height: 250px;
        background-color: pink;
        margin: 100px auto;
        transition: all 2s 1s linear;
    }
    
    .box:hover {
        width: 200px;
        height: 200px;
        border-radius:50%;
        background-color: rgb(25, 221, 247);
    }
</style>

<div class="box"></div>

效果圖：

image

咱們能夠看到，觸發hover事件的時候延遲1s後開始執行動畫。

示例代碼：過渡的實際應用

<style type="text/css">
    html,body {
         margin: 0;
         padding: 0;
         width: 100%;
         height: 100%;
    }

    .box {
         width: 100%;
         height: 100%;
         background-color: #eee;
    }

    .l_box {
         float: left;
         width: 234px;
         height: 300px;
         margin: 100px 50px;
         cursor: pointer;
         transition: all 0.5s linear;
    }

    .l_box:hover {
        box-shadow: -2px -2px 20px #777;
        margin-top: 90px;
    }

    .r_box {
         width: 234px;
         height: 300px;
         float: left;
         margin: 100px 0px;
         background-color: #fff;
         text-align: center;
         position: relative;
    }

    .cover {
        position: absolute;
        bottom: 0;
        height: 0px;
        width: 234px;
        background-color: orange;
        transition: all 1s linear;
    }

    .r_box:hover .cover {
        height: 100px;
    }
</style>

<div class="box">
    <div class="l_box">
        <img src="img/1.jpg" alt="">
    </div>
    <div class="r_box">
        <img src="img/2.jpg" alt="">
        <div class="cover"></div>
    </div>
</div>

效果圖：

image

9. 2D轉換

轉換（ transform）是 CSS3中具備顛覆性的特徵之一，能夠實現元素的位移、旋轉、變形、縮放，甚至支持矩陣方式，配合即將學習的過渡和動畫知識，能夠取代大量以前只能靠 Flash才能夠實現的效果。

9.1 位移

CSS3中，經過 translate屬性對元素進行位移。

移動translate(x, y)能夠改變元素的位置，x、y可爲負值；

  • a、移動位置至關於自身原來位置
  • b、y軸正方向朝下
  • c、除了能夠像素值，也能夠是百分比，相對於自身的寬度或高度
transform: translate(100px, 30px);

示例代碼

<style type="text/css">
    .line {
        height: 200px;
        background-color: pink;
    }
    
    .box {
        width: 100px;
        height: 100px;
        background-color: rgb(30, 230, 245);
        transition: all 1s linear;
    }
    
    .line:hover .box {
        /* 位移 */
        transform: translate(100px, 30px);
    }
</style>

<div class="line">
    <div class="box"></div>
</div>

效果圖：

image

咱們能夠看到，鼠標移上去以後，藍色盒子，分別向左和向下移動了一段距離。

9.2 縮放

縮放 scale(x, y)能夠對元素進行水平和垂直方向的縮放， x、 y的取值可爲小數； 
/*寬和高都放大1倍*/
transform: scale(1.5);

示例代碼：

<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px auto;
        transition: all 2s linear;
    }

    .box:hover {
        /* 縮放 */
        transform: scale(0.5);
    }
</style>

<div class="box"></div>

效果圖：

image

9.3 旋轉

旋轉 rotate( deg)能夠對元素進行旋轉，正值爲順時針，負值爲逆時針；
  • a、當元素旋轉之後，座標軸也跟着發生的轉變
  • b、調整順序能夠解決，把旋轉放到最後
/* 順時針旋轉 90度 */
transform: rotate(90deg);

示例代碼：

<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background-color: #0df3cd;
        margin: 100px auto;
        transition: all 2s linear;
    }
    
    .box:hover {
        transform: rotate(-90deg);
    }
</style>

<div class="box"></div>

效果圖：

image

旋轉原點：

默認狀況下，旋轉是按照元素的中心點旋轉的，可是咱們能夠手動設置元素旋轉的中心點。 
transform-origin: 30px 40px;

示例代碼：

<style type="text/css">
    .box {
        width: 150px;
        height: 150px;
        background-color: cyan;
        margin: 100px auto;
        transition: all 1s linear;
        /* 設置旋轉原點位置 */
        /* transform-origin: left top; */
        transform-origin: 30px 40px;
    }
    
    .box:hover {
        transform: rotate(90deg);
    }
</style>

<div class="box"></div>

效果圖：

image

示例代碼：撲克牌

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .box {
         width: 310px;
         height: 438px;
         border: 1px solid #ccc;
         margin: 50px auto;
         position: relative;
    }

    .box img {
         position: absolute;
         transform-origin:bottom;
         transition: all 2s linear;
    }

    .box:hover img:nth-child(1) {
         transform: rotate(10deg);
    }
    .box:hover img:nth-child(2) {
         transform: rotate(20deg);
    }
    .box:hover img:nth-child(3) {
         transform: rotate(30deg);
    }
    .box:hover img:nth-child(4) {
         transform: rotate(40deg);
    }
    .box:hover img:nth-child(5) {
         transform: rotate(50deg);
    }
    .box:hover img:nth-child(6) {
         transform: rotate(60deg);
    }
</style>


<div class="box">
      <img src="img/pk1.png" alt="">
      <img src="img/pk1.png" alt="">
      <img src="img/pk1.png" alt="">
      <img src="img/pk1.png" alt="">
      <img src="img/pk1.png" alt="">
      <img src="img/pk1.png" alt="">
</div>

效果圖：

image

9.4 傾斜

傾斜 skew(deg, deg)可使元素按必定的角度進行傾斜，可爲負值，第二個參數不寫默認爲 0。 
transform: skew(30deg,30deg);

示例代碼：

<style type="text/css">
    .box {
        width: 150px;
        height: 150px;
        background-color: cyan;
        margin: 100px auto;
        transition: all 2s linear;
    }
    
    .box:hover {
        /* 傾斜 */
        transform: skew(30deg, 30deg);
    }
</style>

<div class="box"></div>

效果圖：

image

9.5 矩陣

矩陣 matrix()把全部的 2D轉換組合到一塊兒，須要 6個參數。 transform-origin能夠調整元素轉換的原點，可是對於 transform: translate(x，y)沒有影響。咱們能夠同時使用多個轉換，其格式爲： transform: translate() rotate() scale() ...等，其順序會影轉換的效果。

詳細可參見

10. 3D 轉換

10.1 3D 座標軸

用 X、 Y、 Z分別表示空間的 3個維度，三條軸互相垂直。以下圖：

image

網格狀的正方形，能夠想象成是咱們的電腦桌面2D平面。

在 3D 轉換中，前面 2D 轉換的屬性在這均可以使用：

  • 位移
transform:translate(100px,100px,100px);
  • 旋轉
transform:rotate(30deg,30deg,30deg);
  • 縮放
transform:scale(2,0.5,0.5);
  • 傾斜
transform:skew(30deg,30deg,30deg);

在3D轉換中，必定要加上一個透視屬性，才能在電腦2D平面中顯示出3D的效果，透視屬性請看下章。

10.2 透視（perspective）

電腦顯示屏是一個 2D平面，圖像之因此具備立體感（ 3D效果），其實只是一種視覺呈現，經過透視能夠實現此目的。 perspective經過透視產生的 3D效果，只是視覺呈現而已，並非真正的 3d立體的盒子；就是 近大遠小的效果。

透視的概念其實很簡單，就是「近大遠小」。

image

舉個例子：

在 2D轉換的時候，咱們知道一個 translate屬性，他分別能夠設置向左向右或者向上向下平移，可是卻不能向裏面或外面平移。 
<style>
    .box{
        width: 550px;
        height: 150px;
        margin: 100px auto;
        padding: 6px;
        border: 1px dashed #ccc;
    }
    .box li{
        float: left;
        width: 150px;
        height: 150px;
        padding: 0;
        list-style: none;
        margin-right: 50px;
        transition: all 0.5s linear;
        
    }
    .box li:first-child{
        background: salmon;
    }
    .box li:nth-child(2){
        background: deepskyblue;
    }
    .box li:last-child{
        background: khaki;
        margin-right: 0px;
    }
    /* 第一個盒子向X軸的負方向移動100px */
    .box li:first-child:hover{
        transform: translateX(-100px);
    }
    /* 第二個盒子向Y軸的正方向移動100px */
    .box li:nth-child(2):hover{
        transform: translateY(100px);
    }
    /* 第三個盒子Z軸的負方向移動100px */
    .box li:last-child:hover{
        transform: translateZ(-100px);
    }
</style>

<ul class="box">
    <li></li>
    <li></li>
    <li></li>
</ul>

效果圖：

image

沒有加透視屬性的時候，由於z軸是垂直電腦平面射出來的，translateZ是看不出效果的。

如何設置透視屬性？

給當前元素的直接父元素添加 perspective: 800px;透視屬性，注意這個值能夠是隨意的，可是最佳展示距離是 600px~1000px。 
<style>
    .box{
        width: 550px;
        height: 150px;
        margin: 100px auto;
        padding: 6px;
        border: 1px dashed #ccc;
        /* 給變換的 li 的直接父元素 ul 添加透視屬性 perspective */
        perspective: 800px;
    }
    .box li{
        float: left;
        width: 150px;
        height: 150px;
        padding: 0;
        list-style: none;
        margin-right: 50px;
        transition: all 0.5s linear;
        
    }
    .box li:first-child{
        background: salmon;
    }
    .box li:nth-child(2){
        background: deepskyblue;
    }
    .box li:last-child{
        background: khaki;
        margin-right: 0px;
    }
    /* 第一個盒子向X軸的負方向移動100px */
    .box li:first-child:hover{
        transform: translateX(-100px);
    }
    /* 第二個盒子向Y軸的正方向移動100px */
    .box li:nth-child(2):hover{
        transform: translateY(100px);
    }
    /* 第三個盒子Z軸的負方向移動100px */
    .box li:last-child:hover{
        transform: translateZ(-100px);
    }
</style>

<ul class="box">
    <li></li>
    <li></li>
    <li></li>
</ul>

效果圖：

image

如圖所示，在ul加上透視屬性後，第三個盒子向着z軸的負方向移動了100px。

透視能夠將一個2D平面，在轉換的過程中，呈現3D效果。（沒有perspective，便「沒有」Z軸）並不是任何狀況下都須要透視效果。

10.3 3D呈現（transform-style）

什麼是 3D呈現呢？不要與前面的透視搞混，透視只能使一個物體呈現近大遠小的狀態，不能呈現出一個立體感的東西，好比我在頁面上用六個面組成一個正方形，經過透視你可能只能改變他的遠近距離，並不能讓他看起來像個立體的盒子，因此這裏須要用到另外一個屬性： transform-style。 
transform-style: preserve-3d | flat
  • flat：全部子元素在2D平面呈現
  • preserve-3d：保留3D空間

必須設置在父元素身上而且父元素有轉換（就是有變形）而且子元素也得有轉換（變形）才能看獲得效果。

一、示例代碼：正方體

<style type="text/css">
    * {
         margin: 0;
         padding: 0;

    }

    .box {
         width: 200px;
         height: 200px;
         margin: 150px auto;

         position: relative;
        
         /* 透視 */
         /* perspective: 1000px; */

         /* 轉爲立方體 */
         transform-style: preserve-3d;

         transform: rotateY(45deg) rotateX(30deg);
    }

    .box>div {
         position: absolute;
         width: 100%;
         height: 100%;
    }

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

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

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

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

    .before {
        background-color: red;
        transform: translateZ(150px);
    }

    .back {
        background-color: greenyellow;
        transform: translateZ(-150px);
    }

</style>

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="before"></div>
    <div class="back"></div>
</div>

效果圖：

image

二、示例代碼：3D 導航

<style type="text/css">
    
     * {
          margin: 0;
          padding: 0;
          list-style: none;
     }

     nav {
          width: 600px;
          height: 60px;
          line-height: 60px;
          margin: 200px auto;
     }

     li {
          height: 60px;
          width: 150px;
          float: left;
          position: relative;
          transform-style: preserve-3d;
          transition: all 0.5s ease-in;
     }

     span {
          position: absolute;
          width: 150px;
          height: 60px;
          display: block;
         color: #fff;
          text-align: center;
     }

     span:first-child{
          background-color: #ff287a;
         transform: rotateX(90deg) translateZ(30px);
     }

     span:last-child{
         transform: translateZ(30px);
         background-color: #00bdab;
     }

     li:hover {
          transform: rotateX(-90deg);
     }
</style>

<nav>
    <ul>
        <li>
            <span>Home</span>
            <span>主頁</span>
        </li>
        <li>
            <span>Menu</span>
            <span>菜單</span>
        </li>
        <li>
            <span>Admin</span>
            <span>管理</span>
        </li>
        <li>
            <span>About</span>
            <span>關於咱們</span>
        </li>
    </ul>
</nav>

效果圖：

image

10.4 3D呈現案例：3D輪播圖

一、普通版 3D 輪播圖

實現思路：

  • 經過CSS3中transform-style: preserve-3d的概念，將視圖設置成3D展現模式；
  • 四張圖片，分別設置其繞着X軸旋轉的角度，分別對應四個立體面；
  • 將旋轉好的圖片沿着Z軸平移盒子寬度的一半；
  • 定義一個全局變量num，用來記錄按鈕點擊的次數，噹噹按動按鈕的時候，讓ul旋轉num*90°；

示例代碼：

<style>
    * {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    
    .box {
        width: 960px;
        height: 540px;
        /* border: 5px solid #999; */
        margin: 150px auto;
    }
    
    .box ul {
        width: 960px;
        height: 540px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform .6s;
    }
    
    .box ul li {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    img {
        width: 100%;
        height: 100%;
    }
    
    .box ul li:nth-child(1) {
        transform: rotateX(90deg) translateZ(270px);
    }
    
    .box ul li:nth-child(2) {
        transform: rotateX(-90deg) translateZ(270px);
    }
    
    .box ul li:nth-child(3) {
        transform: rotateX(180deg) translateZ(270px);
    }
    
    .box ul li:nth-child(4) {
        transform: translateZ(270px);
    }
    
    .btn {
        width: 1080px;
        margin: 0 auto;
        position: relative;
        height: 0px;
        top: -470px;
    }
    
    .btn button {
        width: 40px;
        height: 80px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
        border: none;
        outline: none;
        font: 900 24px/80px '宋體';
        color: #fff;
    }
    
    .btn button:frist-child {
        float: left;
    }
    
    .btn button:last-child {
        /* border-radius: 0 10px 10px 0; */
        float: right;
    }
</style>

<div class="box">
    <ul>
        <li><img src="./imgs/1.jpg" alt=""></li>
        <li><img src="./imgs/2.jpg" alt=""></li>
        <li><img src="./imgs/3.jpg" alt=""></li>
        <li><img src="./imgs/4.jpg" alt=""></li>
    </ul>
</div>
<div class="btn">
    <button>&lt;</button>
    <button>&gt;</button>
</div>

<script type="text/javascript">
    var btn = document.querySelectorAll('button');
    var box = document.querySelector('.box');
    var _ul = box.querySelector('ul');
    var num = 0;

    // btn 獲取到的是一個僞數組
    btn[1].onclick = function () {
        num++;
        _ul.style.transform = 'rotateX(' + num * 90 + 'deg)'
    }

    btn[0].onclick = function () {
        num--;
        _ul.style.transform = 'rotateX(' + num * 90 + 'deg)';
    }
</script>

效果圖：

image

二、切割版 3D 輪播圖

實現思路：

  • 結構上將以前定義好的ul重複四次；
  • 設定延時，整個動畫執行時間是0.8s，設定每個ul延遲執行0.2s，即第一個延時0s，第二個延時0.2s，第三個延時0.4s，第四個延時0.6s；
  • 其他步驟同上，着重強調的是，相對於上面的案例，本案例給按鈕加了限制，監聽第一次全部的ul旋轉結束以後，按鈕才能再一次被點擊。

示例代碼：

<style>
    * {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    
    .box {
        width: 960px;
        height: 540px;
        margin: 150px auto;
        display: flex;
    }
    
    .box ul {
        width: 960px;
        height: 540px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform .8s;
    }
    
    .box ul li {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }
    
    img {
        width: 960px;
        height: 540px;
    }
    
    /* 設定延時 */
    .box ul:nth-child(1) {
      transition-delay:0s;
    }
    .box ul:nth-child(2) {
      transition-delay:.2s;
    }
    .box ul:nth-child(3) {
      transition-delay:.4s;
    }
    .box ul:nth-child(4) {
      transition-delay:.6s;
    }
    
    /* 拼湊圖片 */
    .box ul:nth-child(2) img {
      margin-left: -240px;
    }
    .box ul:nth-child(3) img {
      margin-left: -480px;
    }
    .box ul:nth-child(4) img {
      margin-left: -720px;
    }
    
    .box ul li:nth-child(1) {
        transform: rotateX(90deg) translateZ(270px);
    }
    
    .box ul li:nth-child(2) {
        transform: rotateX(-90deg) translateZ(270px);
    }
    
    .box ul li:nth-child(3) {
        transform: rotateX(180deg) translateZ(270px);
    }
    
    .box ul li:nth-child(4) {
        transform: translateZ(270px);
    }
    
    .btn {
        width: 1080px;
        margin: 0 auto;
        position: relative;
        height: 0px;
        top: -470px;
    }
    
    .btn button {
        width: 40px;
        height: 80px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
        border: none;
        outline: none;
        font: 900 24px/80px '宋體';
        color: #fff;
    }
    
    .btn button:frist-child {
        float: left;
    }
    
    .btn button:last-child {
        /* border-radius: 0 10px 10px 0; */
        float: right;
    }
</style>


<div class="box">
<ul>
  <li><img src="./imgs/1.jpg" alt=""></li>
  <li><img src="./imgs/2.jpg" alt=""></li>
  <li><img src="./imgs/3.jpg" alt=""></li>
  <li><img src="./imgs/4.jpg" alt=""></li>
</ul>

<ul>
  <li><img src="./imgs/1.jpg" alt=""></li>
  <li><img src="./imgs/2.jpg" alt=""></li>
  <li><img src="./imgs/3.jpg" alt=""></li>
  <li><img src="./imgs/4.jpg" alt=""></li>
</ul>

<ul>
  <li><img src="./imgs/1.jpg" alt=""></li>
  <li><img src="./imgs/2.jpg" alt=""></li>
  <li><img src="./imgs/3.jpg" alt=""></li>
  <li><img src="./imgs/4.jpg" alt=""></li>
</ul>

<ul>
  <li><img src="./imgs/1.jpg" alt=""></li>
  <li><img src="./imgs/2.jpg" alt=""></li>
  <li><img src="./imgs/3.jpg" alt=""></li>
  <li><img src="./imgs/4.jpg" alt=""></li>
</ul>
</div>
<div class="btn">
<button>&lt;</button>
<button>&gt;</button>
</div>

<script type="text/javascript">
    var btn = document.querySelectorAll('button');
    var box = document.querySelector('.box');
    var _ul = box.querySelectorAll('ul');
    var num = 0;
    var flag = true;
    // btn 獲取到的是一個僞數組    
    btn[1].onclick = function () {
      if (flag) {
        flag = false;
        num++;
        for (var i = 0; i < _ul.length; i++) {
          _ul[i].style.transform = 'rotateX(' + num * 90 + 'deg)';
    
        }
        // 監聽最後一個transition事件結束的時候 將flag 置爲 true 防止重複點擊
        _ul[_ul.length - 1].addEventListener('transitionend', function () {
          flag = true;
        })
      }
    }
    btn[0].onclick = function () {
      if (flag) {
        flag = false;
        num--;
        for (var i = 0; i < _ul.length; i++) {
          _ul[i].style.transform = 'rotateX(' + num * 90 + 'deg)';
    
        }
        _ul[_ul.length - 1].addEventListener('transitionend', function () {
          flag = true;
        })
      }
    
    }
</script>

效果圖：

image

10.5 backface-visibility

backface-visibility屬性定義當元素不面向屏幕時是否可見。

若是在旋轉元素不但願看到其背面時，該屬性頗有用。有兩個屬性：

  • 一、visible背面是可見的
  • 二、hidden背面是不可見的
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程