CSS3基礎入門03

時間 2019-11-20

標籤 css3 css 基礎入門欄目 CSS 简体版

原文原文鏈接

目錄css

CSS3 基礎入門03

CSS3 基礎入門03

線性漸變

在css3當中，經過漸變屬性實現以前只能經過圖片實現的漸變效果。漸變分爲線性漸變和徑向漸變以及重複漸變三種。線性漸變的模式主要是顏色從一個方向過渡到另一個方向，而徑向漸變則是以一個點爲基點(圓心)，以點向四周進行漸變。漸變形狀爲一個圓，重複漸變則分爲重複線性漸變和重複徑向漸變，是對於前面兩種漸變的一種重複模式。html

語法：jquery

linear-gradient:point| angle color percentage

point表示方向，angle表示角度。
color表示顏色，通常分爲起始顏色、過渡顏色和結束顏色。
percentage表示百分比，通常表示顏色漸變過程當中的百分比。

下面是一個簡單的漸變效果的實現：css3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>線性漸變</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: linear-gradient(red,yellow);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

經過上面的代碼，咱們能夠實現顏色從red到yellow的一個漸變效果。可是須要注意的是，經過漸變設置顏色其實至關於設置了background-image也就是背景圖片。固然也能夠採用background簡寫屬性來設置漸變。git

在上面的代碼中，顏色默認的漸變方向是從上到下，這一點須要注意。github

多個顏色的線性漸變:
咱們也能夠設置多個顏色的漸變，例如從紅色到藍色再到黃色，能夠直接在linear-gradient屬性值當中設置red blue 和yellow.
demo：web

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>線性漸變</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: linear-gradient(red,blue,yellow);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

改變線性漸變方向:
咱們能夠經過在顏色值的前面添加方向關鍵詞來調整顏色漸變的起始方向。
demo:瀏覽器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>線性漸變</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: linear-gradient(to left,red,blue,yellow);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

在上面的案例當中，咱們在顏色的前面添加了表示方向的關鍵詞to left，表示線性漸變從右到左。ide

固然咱們也能夠直接設置爲left，可是由於兼容性的問題，咱們就必須設置瀏覽器前綴。函數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>線性漸變</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: -webkit-linear-gradient(left,red,blue,yellow);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

當咱們將漸變方向關鍵詞變爲left，則正好與上面的demo漸變方向相反，表示從左向右。

並不推薦使用這種方式，由於咱們還要考慮到兼容性的問題。

其餘的方向關鍵詞設置:
咱們能夠將經常使用的方向關鍵詞進行組合使用。

to left 從右向左
to right 從左向右 
to bottom 從上向下
to top 從下到上
to left top 從右下到左上
to right top 從左下到右上
to left bottom 從右上到左下
to right bottom 從左上到右下

經過角度angle來設置方向：
咱們除了經過關鍵詞來設置漸變方向之外，還能夠經過具體的角度值來設置漸變方向。

在css當中，deg表示角度。

demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>線性漸變</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: linear-gradient(0deg,red,blue);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

在上面的例子中，咱們將方向值變成了角度值，一樣也能夠實現漸變方向的改變。
須要注意的是，角度值爲正則方向爲順時針的變化,角度值爲負則方向爲逆時針的變化，下面的demo中，經過JavaScript來查看角度分別爲正和負時漸變顏色的變化。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>線性漸變</title>
    <style>
        #box {
            width: 400px;
            height: 400px;
            background-image: linear-gradient(0deg,red,blue);
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn1">正角度</button>
    <button id="btn2">負角度</button>
</body>
<script>
    let oBox  = document.querySelector("#box");
    let oBtn1 = document.querySelector("#btn1");
    let oBtn2 = document.querySelector("#btn2");
    let num = 0;
    oBtn1.onclick = function () {
        setInterval(function(){
            num = num +1; 
            box.style.backgroundImage = `linear-gradient(${num}deg,red,blue)`;
        },30)
    }
    oBtn2.onclick = function () {
        setInterval(function(){
            num = num  - 1; 
            box.style.backgroundImage = `linear-gradient(${num}deg,red,blue)`;
        },30)
    }
</script>
</html>

在上面的示例代碼中，咱們點擊正角度按鈕就可讓元素按照角度值爲正進行變換。點擊負角度按鈕可讓元素按照角度值爲負進行變換。從而證明咱們上面所說的問題。

線性漸變百分比的設置：
咱們能夠給每一個顏色後面加上一個百分比，從而讓漸變的過程受到咱們的把控。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>線性漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: linear-gradient(red 30%,blue 60%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

咱們在上面的代碼中，咱們在每一個顏色的後面加入了百分比。
上面的代碼的含義是，從0%到30%爲純紅色，從30%到60%爲紅色到藍色的漸變，而60%到100%則表示純藍色。

根據上面的解釋，若是咱們想要在一個盒子造成一半爲純紅色，一半爲純藍色的背景，該怎麼實現呢？
其實很是簡單，只須要讓中間漸變的過程爲0便可。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>線性漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: linear-gradient(red 50%,blue 50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

例如上面的例子，咱們將從0%到50%設置爲純紅色，從50%到50%設置爲紅色到藍色的漸變，從50%到100%設置爲純藍色，便可實現咱們上面的需求。

盒子當中實現四個顏色平均分配：
咱們能夠根據上面所學來完成一下小練習，例如，咱們但願在一個盒子中存在紅綠藍黃四個顏色，而且並不存在漸變的效果，四個顏色皆爲純色而且平均分配，該怎麼作呢？

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>線性漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: linear-gradient(red 25%, green 25%,green 50%,blue 50%, blue 75%,yellow 75%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在漸變中咱們不只僅能夠設置百分比來表示顏色變換的過程，也能夠設置length具體值。

關於IE的線性漸變:
在IE瀏覽器中，咱們能夠實現兩個顏色之間的漸變效果，語法格式以下：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

startColorstr表示起始顏色
endColorstr 表示結束顏色
GradientType 值爲1表示從左向右值爲0表示從上向下

徑向漸變

不一樣於上面咱們說的線性漸變，徑向漸變有些相似於放射性的，從點放射到四周。

語法：

background: radial-gradient(center, shape size, start-color, ..., last-color);

雖然上面的語法看上去有些複雜，可是用法上起始與線性漸變非常相似，下面咱們來看下具體的使用。

最簡單的徑向漸變:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: radial-gradient(red,yellow);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

上面的代碼將會在box這個元素中造成一個漸變效果，呈現的形狀爲一個正圓。圓心開始爲紅色，從圓心開始逐漸的向四周過渡。

設置形狀：
徑向漸變的形狀是一個圓，在徑向漸變中，能夠設置正圓circle和橢圓ellipse。默認狀況下爲正圓。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: radial-gradient(ellipse,red,blue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

設置多個顏色：
在徑向漸變中一樣能夠設置多個顏色。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: radial-gradient(red,blue,pink);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

設置徑向漸變的方向:
在徑向漸變中設置漸變方向，須要注意，不能採用to + 方向這種形式，而是應該直接設置方向關鍵詞，而且添加瀏覽器前綴。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(left,red,blue,pink);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

設置徑向漸變的起始位置:
在徑向漸變中，咱們沒有辦法設置具體的角度值，咱們能夠經過length設置圓心的位置，從而改變徑向漸變的起始位置。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(140px 300px,red,blue,pink);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

設置顏色漸變百分比:
徑向漸變中一樣能夠設置顏色漸變的百分比，用以把控漸變的過程。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(red 20%, blue 30%, lightblue 50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

徑向漸變中顏色百分比的原理和線性漸變相同。

設置徑向漸變的橫向半徑和縱向半徑：
徑向漸變中咱們能夠設置圓形的座標，從而實現更改漸變的位置。咱們在上面說到，徑向漸變還能夠更改徑向漸變的形狀，能夠設置爲正圓和橢圓。當咱們設置圓的形狀時，除了經過關鍵詞，還能夠經過具體的length來進行設置。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(100px 100px,200px 300px,red,lightblue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

100px 100px表示圓心座標，200px 300px表示橫半徑和縱半徑。

經過關鍵詞來設置徑向漸變圓的大小：
在徑向漸變中存在幾個關鍵詞，經過這些關鍵詞能夠設置徑向漸變圓的大小。
關鍵詞以下:

closest-side：最近邊； 
farthest-side：最遠邊； 
closest-corner：最近角； 
farthest-corner：最遠角

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(100px 100px ,closest-side,blue,lightblue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

重複漸變

當咱們在一個元素中須要將漸變進行重複時，可使用重複漸變。重複漸變又分爲重複線性漸變和重複徑向漸變，用法很簡單，只是在漸變屬性的前面添加repeating便可。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>徑向漸變</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-repeating-radial-gradient(100px 100px ,closest-side,blue,lightblue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS3 過渡

在css3中，經過過渡，可讓元素的動畫變化放緩，從而具備更好的觀感效果。

語法：

transition: property duration timing-function delay;

transition爲過渡效果的簡寫屬性，這個屬性具體能夠拆分爲下面幾個屬性：

transition-property 規定應用過分的css屬性名稱
transition-duration 定義過渡效果須要時間
transition-timing-function 規定過渡效果的時間曲線，默認是「ease」
transition-delay   延遲

參與過渡的屬性：
想要具體設置參與過渡的具體屬性，能夠經過transition-property,具體的值以下：

transition-property:none | all | property(css屬性名稱，用逗號進行分隔)

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>過渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition-property: width,height;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

設置過渡時間：
經過transition-duration能夠設置過渡所需的時間。單位是 s|ms。

咱們能夠把上面的代碼繼續完善一下。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>過渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition-property: width,height;
            transition-duration: 2s;
        }
        .box:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

設置過渡的速度時間曲線：
經過transition-timing-function能夠設置過渡效果的時間曲線：

cubic-bezier (n,n,n,n)  貝塞爾曲線
linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）
ease   規定慢速開始，而後變快，而後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))
ease-in    規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）
ease-out  慢速結束過渡效果 等於 cubic-bezier(0,0,0.58,1)
ease-in-out     規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）

關於`貝塞爾曲線，能夠參考下面的網址：http://cubic-bezier.com/#.17,.67,.94,.18

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>過渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition-property: width,height;
            transition-duration: 2s;
            transition-timing-function: ease-in-out;
        }
        .box:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

設置延遲時間:
在x秒或者x毫秒後執行效果。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>過渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition-property: width,height;
            transition-duration: 2s;
            transition-timing-function: ease-in-out;
            transition-delay: 1s;
        }
        .box:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

咱們在開發的時候，推薦儘量的使用簡寫屬性。

給不一樣的樣式設置不一樣的執行時間和延遲時間:
咱們能夠單獨的給不一樣的樣式分別設置執行時間和延遲時間。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>過渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: width 2s 1s,height 2s 2s,background-color 3s 1s;
        }
        .box:hover {
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS Banner點擊切換
demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner廣告css代碼實現</title>
    <style>
        body, figure {
            margin: 0;
        }

        img {
            width:100%;
            height: 700px;
        }

        figcaption {
            display: block;
            font-weight: bold;
            padding: 1em 0;
        }

        .gallery {
            position: relative;
        }

        .gallery > .item {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            text-align: center;
            -webkit-transition: opacity .5s;
            -o-transition: opacity .5s;
            transition: opacity .5s;
        }

        .gallery > .item:first-of-type {
            position: static;
            opacity: 1;
        }

        .gallery > .controls {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
        }

        .gallery > .control-operator {
            display: none;
        }

        .gallery .control-button {
            display: inline-block;
            margin: 0 .02em;
            font-size: 3em;
            text-align: center;
            text-decoration: none;
            -webkit-transition: color .1s;
            -o-transition: color .1s;
            transition: color .1s;
        }

        .gallery > .control-operator:target ~ .item {
            opacity: 0;
        }

        .gallery > .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
            opacity: 1;
        }
        .gallery > .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
            opacity: 1;
        }
        .gallery > .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
            opacity: 1;
        }

        /* a 按鈕的樣式 */
        .gallery .control-button {
            color: #ccc;
            color: rgba(255, 255, 255, 0.4);
        }

        .gallery .control-button:first-of-type {
            color: white;
            color: rgba(255, 255, 255, 0.8);
        }

        .gallery .control-button:hover {
            color: white;
            color: rgba(255, 255, 255, 0.8);
        }

        .gallery .control-operator:target ~ .controls .control-button {
            color: #ccc;
            color: rgba(255, 255, 255, 0.4);
        }

        .gallery .control-operator:target ~ .controls .control-button:hover {
            color: white;
            color: rgba(255, 255, 255, .8);
        }

        /* 被選中時 設置<a>.</a>顏色爲 rgba(255,255,255,.8) */
        .gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
        .gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
        .gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3) {
            color: white;
            color: rgba(255, 255, 255, 0.8);
        }
    </style>
</head>
<body>
    <div class="gallery">
        <!--control-operator 用來控制，不顯示-->
        <div id="gallery-1" class="control-operator"></div>
        <div id="gallery-2" class="control-operator"></div>
        <div id="gallery-3" class="control-operator"></div>


        <figure class="item">
            <figcaption>壁紙1</figcaption>
            <img src="./images/b1.jpg" alt="">
        </figure>

        <figure class="item">
            <figcaption>壁紙2</figcaption>
            <img src="./images/b2.jpg" alt="">
        </figure>

        <figure class="item">
            <figcaption>壁紙3</figcaption>
            <img src="./images/b3.jpg" alt="">
        </figure>

        <div class="controls">
            <a href="#gallery-1" class="control-button">○</a>
            <a href="#gallery-2" class="control-button">○</a>
            <a href="#gallery-3" class="control-button">○</a>
        </div>
    </div>
</body>
</html>

CSS3 2D

css3中新增長了2D效果和3D效果，咱們能夠經過相關的屬性設置從而實現不少以前只能經過JavaScript實現的效果。

相關屬性:

transform  2D /3D 轉換屬性
transform-origin 更改元素旋轉基點

2D變換方法:

translate(x,y)   沿着x y 移動元素/ translateX(n)  translateY(n)    
scale(x,y)  縮放  更改元素的寬度和高度 ,將寬度改成原來的x倍，高度改成原來的y倍 / scaleX(n) 更改寬度  scaleY(n)  更改高度
rotate(angle)  旋轉 
skew(x-angle,y-angle)  定義2D 傾斜轉換 沿着x軸和y軸  / skewX(angle) 沿着x軸轉換  skewY(angle) 沿着y軸

2D效果主要針對的是頁面當中的x軸和y軸進行的一系列的元素變化。

位移：

經過translate屬性可讓元素沿着x軸和y軸進行位移。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2d</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:200px auto;
        }
        .test {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
        }
        .box:hover .test {
            transform: translate(300px,100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="test"></div>
    </div>
</body>
</html>

縮放：

經過scale屬性能夠對元素進行縮放操做。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2d</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:200px auto;
        }
        .test {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
        }
        .box:hover .test {
            transform: scale(2);
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="test"></div>
    </div>
    
</body>
</html>

須要注意的是，縮放的值爲寬度或者高度的倍數。

旋轉:
經過rotate屬性可讓元素進行旋轉。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2d</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:200px auto;
        }
        .test {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
        }
        .box:hover .test {
            transform: rotate(360deg);
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="test"></div>
    </div>
    
</body>
</html>

若是更改元素的旋轉基點，元素的旋轉位置將會發生變化。

傾斜:
經過skew可讓元素沿着x軸或者y軸進行傾斜。
skew語法有些特殊：

transform:skew(<angle> [,<angle>]);

包含兩個參數值，分別表示X軸和Y軸傾斜的角度，若是第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜。
skewX(<angle>);表示只在X軸(水平方向)傾斜。

skewY(<angle>);表示只在Y軸(垂直方向)傾斜。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main {
            width: 500px;
            height: 500px;
            border:3px solid red;
            margin:100px auto;
            padding:30px;
        }
        .box,.son {
            width: 300px;
            height: 300px;
        }
        .box {
            border:1px solid blue;
        }
        .son {
            border:1px solid lightblue;
            transform: skew(30deg);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

造成效果以下：

下面是傾斜Y軸：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main {
            width: 500px;
            height: 500px;
            border:3px solid red;
            margin:100px auto;
            padding:30px;
        }
        .box,.son {
            width: 300px;
            height: 300px;
        }
        .box {
            border:1px solid blue;
        }
        .son {
            border:1px solid lightblue;
            transform: skewY(30deg);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

基點的改變對於元素變幻的影響：
經過transform-origin能夠更改元素的基點，元素的基點一旦發生更改以後，就會產生不同的效果。

例如，旋轉roate，默認基點是元素的正中心，可是一旦改變基點以後旋轉就會發生改變。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:100px auto;
        }
        .test {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
            transform-origin: left top;
        }
        .box:hover .test {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="test"></div>
    </div> 
</body>
</html>

圖片切換:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }
        .t_image {
            transition: all 1s ease-in-out;
            cursor: pointer;
        }
        .t_image_top {
            position: absolute;
            transform: scale(0,0);
        }
        .img_box:hover .t_image_top {
            transform: scale(1,1);
            transform-origin: top right;
        }
        .img_box:hover .t_image_bottom {
            transform: scale(0,0);
            transform-origin:bottom left;
        }
    </style>
</head>
<body>
    <div class="img_box">
        <img src="photo3.jpg" alt="" class="t_image t_image_top">
        <img src="photo4.jpg" alt="" class="t_image t_image_bottom">
    </div>
</body>
</html>

Banner圖切換:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner</title>
    <style>
        #content {
            width: 800px;
            margin:30px auto;
            position: relative;
        }

        input[type="radio"]{
            display: none;
        }
        input[type="radio"]~img {
            width: 800px;
            height: 500px;
            position: absolute;
            top:0;
            left:0;
            opacity: 0;
            transform: scale(1.1);
            transition: all 1s ;
        }

        input:checked + label + img {
           opacity: 1;
            transform: scale(1.0);
        }

        input:checked + label img {
            border: 8px solid lightblue;
            opacity: 1.0;
            transition: all 1s;
        }

        label {
            display: inline-block;
            width: 134px;
            margin:5px 8px;

        }
        label img {
            opacity: 0.5;
            width:134px;
            height: 75px;
            margin-top:500px;
            border:8px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="content">
        <input type="radio" name="carousel" id="list1" checked>
        <label for="list1">
            <img src="./images/photo1.jpg" alt="">
        </label>
        <img src="./images/photo1.jpg" alt="">

        <input type="radio" name="carousel" id="list2" >
        <label for="list2">
            <!--小圖片-->
            <img src="./images/photo2.jpg" alt="">
        </label>
        <!--大圖片-->
        <img src="./images/photo2.jpg" alt="">

        <input type="radio" name="carousel" id="list3" >
        <label for="list3">
            <img src="./images/photo3.jpg" alt="">
        </label>
        <img src="./images/photo3.jpg" alt="">

        <input type="radio" name="carousel" id="list4" >
        <label for="list4">
            <img src="./images/photo4.jpg" alt="">
        </label>
        <img src="./images/photo4.jpg" alt="">

        <input type="radio" name="carousel" id="list5" >
        <label for="list5">
            <img src="./images/photo5.jpg" alt="">
        </label>
        <img src="./images/photo5.jpg" alt="">


    </div>
</body>
</html>

CSS3 3D

相關屬性:

transform    2d/3d轉換
transform-origin   更改基點
transform-style    開啓3D空間
perspective    視距
perspective-origin   景深基點
backface-visibibility   背面隱藏

3D變換方法:

translate3d(x,y,z)  /  translateX  translateY  translateZ
scale3d(x,y,z)  /  scaleX  scaleY  scaleZ
rotate3d(x,y,angle)  / rotateX(angle) rotateY(angle)  rotateZ(angle)

關於Z軸：
在2D中，咱們說，網頁的變換主要圍繞x軸和y軸，而到了CSS3 3D,則相對於以前，多了一個Z軸。
Z軸表示垂直於網頁的一個座標軸，經過Z軸，可以構建網頁當中的3D效果。

視距:
觀察者沿着平行於Z軸的視線與屏幕之間的距離即爲視距的距離，簡稱視距。

視距要設置在父元素的身上，纔會有效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            /*必定要設置在父元素的身上*/
            perspective: 300px;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
        }

        section:hover div {
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

開啓3D空間:
正常狀況下，咱們是沒有辦法建立3D空間的，咱們須要經過屬性transform-style屬性來開啓3D空間。

transform-style: flat|preserve-3d;

當屬性等於preserve-3d時，便可開啓3D空間。

例以下面的案例，在開啓3D空間和不開啓3D空間徹底是兩個效果。
demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            width: 600px;
            height: 400px;
            border: 2px solid lightcoral;
            margin: 200px auto;
            background-color: lightblue;
            /*關閉3d空間*/
            /*transform-style: preserve-3d;*/
            perspective: 400px;
            transition: 2s;
        }

        section div {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            transition: 2s;
        }
        section:hover {
            transform:rotateY(85deg);
        }
        section:hover div {
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

效果以下:

而若是開啓了3d空間，效果以下:

關於Z軸的操做:

在上面的案例中，咱們使用了一個屬性，translateZ()表示元素在Z軸上的距離。而除了translateZ之外，還有rotateZ() ，用來表示元素在Z軸上的旋轉。
demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            width: 600px;
            height: 400px;
            border: 2px solid lightcoral;
            margin: 200px auto;
            background-color: lightblue;
            /*關閉3d空間*/
            transform-style: preserve-3d;
            perspective: 400px;
            transition: 5s;
        }

        section div {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            transition: 2s;
        }
        section:hover {
            transform:rotateY(85deg);
        }
        section:hover div {
            transform: translateZ(100px) rotateZ(1800deg);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

scaleZ()表示元素在Z軸上的放大比例。須要注意的是單獨使用可能沒有效果，須要搭配其餘屬性一塊兒使用。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .stage {
            width: 300px;
            height: 300px;
            float: left;
            margin:15px;
            position: relative;
            background: url("./img/bg.jpg") repeat center center;
            perspective: 1200px;
        }

        .container {
            position: absolute;
            top:20%;
            left:50%;
            transform-style: preserve-3d;

        }

        .container img {
            position: absolute;
            margin-left:-70px;
            margin-right:-100px;
        }

        .container img:nth-child(1) {
            z-index:1;
            opacity: .6;
        }

    

        .s1 img:nth-child(2) {
            z-index: 2;
            transform: scaleZ(5) rotateX(45deg);
        }

        .s2 img:nth-child(2) {
            z-index: 2;
            transform: scaleZ(0.25) rotateX(45deg);
        }
    </style>
</head>
<body>
<div class="stage s1">
    <div class="container">
        <img src="./img/k2.png" alt="" width="140" height="200">
        <img src="./img/k2.png" alt="" width="140" height="200">
    </div>
</div>

<div class="stage s2">
    <div class="container">
        <img src="./img/k2.png" alt="" width="140" height="200">
        <img src="./img/k2.png" alt="" width="140" height="200">
    </div>
</div>

</body>
</html>

translate3d、roate3d、scale3d

一、rotate3d

rotate3d(x,y,z,a)

x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，若是其值爲正值，元素順時針旋轉，反之元素逆時針旋轉。

二、scale3d()

CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數，當scale3d()中X軸和Y軸同時爲1，即scale3d(1,1,sz)，其效果等同於scaleZ(sz)。經過使用3D縮放函數，可讓元素在Z軸上按比例縮放。默認值爲１，當值大於１時，元素放大，反之小於１大於0.01時，元素縮小。

scale3d(sx,sy,sz)

sx：橫向縮放比例；
sy：縱向縮放比例；
sz：Z軸縮放比例；

注：scaleZ()和scale3d()函數單獨使用時沒有任何效果，須要配合其餘的變形函數一塊兒使用纔會有效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid lightseagreen;
            perspective: 300px;
            transform-style: preserve-3d;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: lime;
            transition: 8s;
        }
        section:hover div {
            transform:rotateX(720deg) scale3d(1.2,2.1,3);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

三、translate3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .stage {
            width: 300px;
            height: 300px;
            float: left;
            margin:15px;
            position: relative;
            background: url("./img/bg.jpg") repeat center center;
            perspective: 1200px;
        }

        .container {
            position: absolute;
            top:20%;
            left:50%;
            transform-style: preserve-3d;

        }

        .container img {
            position: absolute;
            margin-left:-70px;
            margin-right:-100px;
        }

        .container img:nth-child(1) {
            z-index:1;
            opacity: .6;
        }

        .s1 img:nth-child(2) {
            z-index:2;
            transform:translate3d(30px,30px,200px);
        }


        .s2 img:nth-child(2) {
            z-index: 2;
            transform: translate3d(30px,30px,-200px);
        }



    </style>
</head>
<body>
<div class="stage s1">
    <div class="container">
        <img src="./img/k2.png" alt="" width="70" height="100">
        <img src="./img/k2.png" alt="" width="70" height="100">
    </div>
</div>

<div class="stage s2">
    <div class="container">
        <img src="./img/k2.png" alt="" width="70" height="100">
        <img src="./img/k2.png" alt="" width="70" height="100">
    </div>
</div>


</body>
</html>

正方體:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>正方體</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        ul,li{list-style: none;}
        ul {
            width: 200px;
            height: 200px;
            margin:100px auto;
            position: relative;
            transition: 6s;
            transform-style: preserve-3d;
        }
        ul li {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            color:white;
            font-size:40px;
            position: absolute;
        }
        ul li:nth-child(1) {
            transform:rotateX(0deg) translateZ(100px);
            background: rgba(255,0,0,.6);
        }
        ul li:nth-child(2) {
            transform:rotateX(-90deg) translateZ(100px);
            background: rgba(0,255,0,.6);
        }
        ul li:nth-child(3) {
            transform:rotateX(-180deg) translateZ(100px);
            background: rgba(0,0,255,.6);
        }
        ul li:nth-child(4) {
            transform:rotateX(-270deg) translateZ(100px);
            background: rgba(0,255,255,.6);
        }
        ul li:nth-child(5) {
            transform:rotateY(90deg) translateZ(100px);
            background: rgba(255,0,255,.6);
        }
        ul li:nth-child(6) {
            transform:rotateY(-90deg) translateZ(100px);
            background: rgba(23,0,23,.6);
        }
        ul:hover {
            transform: rotateX(360deg) rotateY(360deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>第一個盒子</li>
        <li>第二個盒子</li>
        <li>第三個盒子</li>
        <li>第四個盒子</li>
        <li>第五個盒子</li>
        <li>第六個盒子</li>
    </ul>
</body>
</html>

CSS3 動畫

經過animation動畫屬性，css能夠實現很是實用的動畫效果。

相關屬性:

Animation是一個簡寫屬性，包含如下內容：
一、Animation-name    調用關鍵幀
二、Animation-duration   設置完成時間
三、Animation-timing-function   動畫的速度曲線
四、Animation –delay          延遲
五、Animation-iteration-count   動畫應該播放的次數
    N  設置播放次數    infinite   無限次播放  
六、Animation-direction       規定是否該輪流反向播放動畫
    Normal   alternate   動畫應該輪流反向播放
七、Animation-play-state      暫停/運行
  Paused  暫停
  Running  運行
八、Animation-fill-mode   規定動畫在播放以前或者以後，其動畫效果是否可見
  None  不改變默認
  Forwards  當動畫完成後保持最後一個屬性值
  Backwards  在Animation –delay指定的一段時間以內，在動畫顯示以前，應用開始屬性值。
  Both  向前和向後填充模式都被應用。

簡寫語法:

Animation: name duration timing-function delay iteration -count direction

關鍵幀:

@keyframes name {
    0% {code ...}
    10% {code ...}
    20% {code ...}
}

也能夠經過from和to來設置:
@keyframes name {
    from {}
    to {}
}

心跳:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Red Heart</title>
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background: #ffa5a5;
            background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);
        }

        .chest {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            position: relative;
        }

        .heart {
            position: absolute;
            z-index: 2;
            background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
            animation: beat 0.7s ease 0s infinite normal;
        }

        .heart.center {
            background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
        }

        .heart.top {
            z-index: 3;
        }

        .side {
            top: 100px;
            width: 220px;
            height: 220px;
            border-radius: 220px;
        }

        .center {
            width: 210px;
            height: 210px;
            bottom: 100px;
            left: 145px;
            font-size: 0;
            text-indent: -9999px;
        }

        .left {
            left: 62px;
        }

        .right {
            right: 62px;
        }


        @keyframes beat {
            0% {
                transform: scale(1) rotate(225deg);
                box-shadow:0 0 40px #d5093c;
            }

            50% {
                transform: scale(1.1) rotate(225deg);
                box-shadow:0 0 70px #d5093c;
            }

            100% {
                transform: scale(1) rotate(225deg);
                box-shadow:0 0 40px #d5093c;
            }
        }
    </style>
</head>
<body>
    <div class="chest">
        <div class="heart left side top"></div>
        <div class="heart center">&hearts;</div>
        <div class="heart right side"></div>
    </div>
</body>
</html>

animate 動畫庫

經過animate動畫庫能夠實現一些動畫效果。

網址:https://daneden.github.io/animate.css/

使用方法:

在代碼中引入animate.css，而且將相應的類名設置給不一樣的元素。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>執行</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        .box {
            width: 500px;
            margin:200px auto;
        }
    </style>
</head>
<body>

    <div class="animated jello box">
        昨天我碰到一個帥哥，長相驚人，貌比潘安，憑顏值能夠征服全世界的那種
        <br>，咱們兩個默默對視了很長時間，終於，我離開了他的視線，放下了鏡子。
    </div>

</body>
</html>

能夠經過下面的代碼來查看不一樣的效果：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        * {
            margin:0;
            padding:0;
        }
        .box {
            width: 400px;
            height: 400px;
            border:1px solid lightcyan;
            background-color: lightblue;
            margin:120px auto;
            font-size: 50px;
            line-height: 400px;
            text-align: center;
        }
        p  {
            width: 440px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 500px;
            font-size:30px;
        }
        label {
            display: block;
        }
        input {
            width: 98%;
            height: 50px;
            font-size:30px;
        }
        button {
            width: 200px;
            height: 50px;
            font-weight: bold;
            position: fixed;
            bottom:120px;
            left: 620px;
        }
    </style>
</head>
<body>


    <div class="box">
        <div class="animated test">hello,world!</div>
    </div>

    <p>
        <label for="list">
            請輸入動畫效果名稱:
        </label>

        <input type="text" placeholder="動畫名稱" id="list" >

    </p>
    <button onclick="fn1()">執行動畫</button>
</body>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
    let fn1 = ()=> {
        let oInput = $('#list').val();
        $(".test").addClass(oInput).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){
            $('.test').removeClass(oInput);
        });
    }
</script>
</html>