【前端】【html5/css3】前端學習之路（四）（CSS3動畫/CSS3伸縮布局/CSS3背景）

一、動畫【  animation  】

動畫是CSS3中具有颠覆性的特征之一，可通過設定多個節點來精确控制一個或一組動畫，常用來實作複雜的動畫效果。

文法格式：

animation:動畫名稱 花費時間 運動曲線  何時開始  播放次數  是否反方向;

以上的幾項，除了 名字，動畫時間，延時  有嚴格順序要求之外，其他順序随意。

 直接用案例了解吧。

案例一（基本了解）

.animationtest {
            width: 300px;
            height: 300px;
            background-color: pink;
            float: left;
            /*animation:動畫名稱 花費時間 運動曲線  何時開始  播放次數  是否反方向;*/
            /*動畫名稱:要和keyframe的動畫名稱相同,才可以對應上*/
            /*播放次數:可以任意寫數字次數,如果想要無限次播放則使用infinite*/
            /*是否反方向:不回放可以不填也可以填normal,如果想要回放則可以用alternate*/
            animation: move 4s ease 0s infinite normal;
        }
        .animationtest2 {
            width: 200px;
            height: 200px;
            float: left;
            background-color: skyblue;
            animation: move2 4s infinite alternate;
        }
        /*keyframes有兩種設定方式,一種是簡單分為兩步,也就是  form>to 兩步,也可以利用 0%>100% 為區間進行詳細的動畫區分*/
        @keyframes move {
            from {
                width: 500px;
                height: 300px;
            }
            to {
                width: 700px;
                height: 500px;
                background-color: blue;
            }

        }
        @keyframes move2 {
            20% {
                width: 250px;
                height: 200px;
                background-color: red;
            }
            50% {
                width: 300px;
                height: 300px;
                background-color: greenyellow;
            }
            70% {
                width: 500px;
                height: 500px;
                background-color: pink;

            }
            100% {
                width: 100px;
                height: 100px;
                background-color: deeppink;
                
            }
        }
           

<div class="animationtest">

    </div>
    <div class="animationtest2">

    </div>
           

以上能夠了解animation的主要作用，接下來做兩個案例。

案例二（心髒跳動案例）

效果：

圖檔：

代碼： 

div {
            width: 400px;
            margin: 100px auto;
        }
        img {
            width: 400px;
            height: 100%;
            /*animation:動畫名稱 花費時間 運動曲線  何時開始  播放次數  是否反方向;*/
            animation: heartbeat 1s ease-out infinite;
        }
        @keyframes heartbeat {
            30% {
                transform: scale(1);
            }
            60% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
           

<div>
    <img src="images/heart.jpg" alt="">
</div>
           

案例三（大海波濤）

效果：

圖檔：

代碼：

* {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 100%;
            background-color: lightseagreen;
            /*删除掉多餘部分,使得左下兩條滾動條不顯示*/
            overflow: hidden;
        }
        .sun {
            width: 80px;
            height: 80px;
            margin: 60px 60px;
            position: relative;
        }
        .sun::before, .sun::after  {
            content: '';
            width: 40px;
            height: 40px;
            background-color: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            animation: sun 2s linear infinite;
        }
        .sun::after {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, .7);
            border-radius: 50%;
            animation: sun 2s linear 0.5s infinite;
        }
        img {
            width: 100%;
            height: auto;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .img1 {
            animation: move linear 2s infinite alternate;
        }
        .img2 {
            animation: move linear 2s infinite 1s alternate;
        }
        @keyframes move {
            0% {
                bottom: 0;
            }

            50% {
                bottom: -50px;
            }

            100% {
                bottom: 0;
            }
        }
        @keyframes sun {
            0% {
                transform: translate(-50%, -50%) scale(1);
                box-shadow: 0 0 16px rgba(255,255,255,0.7);
            }

            50% {
                transform: translate(-50%, -50%) scale(1.1);
                box-shadow: 0 0 30px rgba(255,255,255,0.7);
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
                box-shadow: 0 0 16px rgba(255,255,255,0.7);
            }
        }
           

<div class="sun"></div>
    <img src="images/wave1.png" class="img2" alt="">
    <img src="images/wave2.png" class="img1" alt="">
           

二、CSS3伸縮布局

CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，适應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。

1.基本使用方式

在原先的CSS中，如果我們要将一個盒子均分成三等份，那麼我們會這麼分：

section {
         /*注意,伸縮布局父盒子也要用百分比來設定寬度*/
         width: 80%;
        height: 200px;
        margin: 100px auto;
}        
div {
     /*如果是CSS3要将三個盒子分成三等份,一般是用以下方式：*/
     width: 33.33%;
     height: 100%;
     float: left;
}
           

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
           

這樣雖然可以均分三個盒子，但是三個盒子的伸縮性非常差，如果頁面産生變化，比如縮小或者擴大，盒子是無法跟随頁面的大小進行伸縮的，此時我們就可以用伸縮布局了。

section {
            /*注意,伸縮布局父盒子也要用百分比來設定寬度*/
            width: 80%;
            height: 200px;
            margin: 100px auto;

            /*在CSS3中，我們引入一個新的伸縮布局*/
            display: flex;
            /*伸縮布局的寬是不定的，我們伸縮頁面，其寬度也會伸縮，但是會一直保持在三等份*/
}
div {
    height: 100%;
    /*flex指的是每一個div各占一份，也就是三個DIV均分為三等份*/
    flex: 1;
}
div:first-child {
    background-color: pink;
}
 div:nth-child(2) {
    background-color: red;
}
div:nth-child(3) {
    background-color: blue;
}
           

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
           

效果：

 随頁面大小而伸縮：

我們也可以各自給盒子添加份數，如：

section {
            /*注意,伸縮布局父盒子也要用百分比來設定寬度*/
            width: 80%;
            height: 200px;
            margin: 100px auto;

            /*在CSS3中，我們引入一個新的伸縮布局*/
            display: flex;
            /*伸縮布局的寬是不定的，我們伸縮頁面，其寬度也會伸縮，但是會一直保持在三等份*/
}
div {
    height: 100%;
    /*flex指的是每一個div各占一份，也就是三個DIV均分為三等份*/
    flex: 1;
}
div:first-child {
    background-color: pink;
    /*第一個div占兩份,第二個div占一份，第三個div占兩份,那麼盒子就會變成5份*/
    flex: 2;
}
div:nth-child(2) {
    background-color: red;
}
div:nth-child(3) {
    background-color: blue;
    flex: 2;
}
           

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
           

效果：

 2.其他屬性

（1）伸縮方向（flex-direction）

伸縮方向用來控制伸縮布局的方向，行伸縮或者列伸縮。

屬性有：

flex-direction: row                行伸縮，預設屬性。

flex-direction: column          列伸縮。

flex-direction: row-reverse   掉轉盒子順序，原先為1 2 3 ，掉轉後順序為3  2  1。

flex-direction: column-reverse  同上。 

我們可以為小盒子添加寬度使其固定寬度不再伸縮。

但是在添加強定寬度時，注意自己不能有份數，其他盒子則必須要有份數。

section {
            /*注意,伸縮布局父盒子也要用百分比來設定寬度*/
            width: 80%;
            height: 200px;
            margin: 100px auto;

            /*在CSS3中，我們引入一個新的伸縮布局*/
            display: flex;
            /*伸縮布局的寬是不定的，我們伸縮頁面，其寬度也會伸縮，但是會一直保持在三等份*/
            /*如果我們想要其垂直伸縮分等份，那麼我們可以用*/
            flex-direction: column;
            /*相對應的水準等份是row，不過預設就是row，是以不需要再設定*/
            /*還有另外兩個屬性 row-reverse 和 column-reverse ，它會将我們的子盒子的順序調轉過來，也就是說如果你使用了row-reverse，那麼1 2 3排列的三個盒子就會變成3 2 1 排列。*/
}
div {
    height: 100%;
    /*flex指的是每一個div各占一份，也就是三個DIV均分為三等份*/
    flex: 1;
}
div:first-child {
    background-color: pink;
}
div:nth-child(2) {
    background-color: red;
}
div:nth-child(3) {
    background-color: blue;
}
           

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
           

效果：

（2）伸縮極限寬度（max-width/min-width）

控制外盒子的最大/最小伸縮寬度。

section {
            /*注意,伸縮布局父盒子也要用百分比來設定寬度*/
            width: 80%;
            height: 200px;
            margin: 100px auto;

            /*在CSS3中，我們引入一個新的伸縮布局*/
            display: flex;
            /*伸縮布局的寬是不定的，我們伸縮頁面，其寬度也會伸縮，但是會一直保持在三等份*/
            
            /*我們還可以為父盒子設定最大寬度和最小寬度*/
            /*max-width*/
            min-width: 500px;
            /*這樣父盒子縮小到500px就會固定下來，不再縮小*/
}
div {
    height: 100%;
    /*flex指的是每一個div各占一份，也就是三個DIV均分為三等份*/
    flex: 1;
}
div:first-child {
    background-color: pink;
}
div:nth-child(2) {
    background-color: red;
}
div:nth-child(3) {
    background-color: blue;
}
           

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
           

 效果：

可以看到盒子縮小到一定大小就固定住，不再縮小了。 

三、CSS3文字陰影

格式：

text-shadow:水準位置 垂直位置 模糊距離 陰影顔色;

前兩項必寫，後兩項可以選寫。

四、CSS3背景運用

1.背景漸變（了解即可）

就是顔色漸變，但是相容性非常差，很不常用。

格式：

background:-webkit-linear-gradient(漸變的起始位置， 起始顔色， 結束顔色)；

background:-webkit-linear-gradient(漸變的起始位置， 顔色 位置， 顔色位置....)；

2.CSS3背景縮放

通過background-size來設定背景圖檔的尺寸，就像設定img的尺寸一樣，在移動Web開發中做螢幕适配非常廣泛。

因為移動web開發一半都要适用不同系統，比如最主流的IOS和Android，并且螢幕的像素也是需要考慮的因素，是以一般移動Web開發中所用的精靈圖會比較大，分辨率比較高，是以就需要用到背景縮放，具體應用可看下方攜程網案例。

格式：

（1）可以設定長度機關（px）或百分比（設百分比時以盒子的寬高為參照）。

效果：

（2）可以設定為cover。

設定為cover時，會自動調整縮放比例，保證背景填滿一整個盒子，如有溢出部分則會被隐藏，也就是高跨到極緻。cover是最常用的。

效果：

（3）可以設定為contain。

設定為contain時，會自動調整縮放比例，保證圖檔始終完整顯示在背景區域，也就是寬跨到極緻。 

效果：

3.多背景

以逗号隔開可以設定多背景。

• 一個元素可以設定多重背景圖像。
• 每組屬性使用逗号分隔。
• 如果設定多重背景圖之間存在交集（即重疊關系），則前面的背景圖會覆寫在後面的背景圖上。

格式：

background: url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,  url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

案例（泡泡浮動效果）：

效果：

圖檔：

 代碼：

div {
            width: 300px;
            height: 80px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;

            background: url("images/paopao.png") no-repeat top left,url("images/paopao.png") no-repeat right bottom;
            /*多背景顔色寫在後面，以防被疊加*/
            background-color: skyblue;
            -webkit-transition: all 3s;
            -moz-transition: all 3s;
            -ms-transition: all 3s;
            -o-transition: all 3s;
            transition: all 3s;
        }
        div:hover {
            background-position: right bottom, top left;
        }
           

<div></div>
           

五、綜合案例（攜程網）

效果：

圖檔：

代碼：

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
            max-width: 540px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
            background-color: #F2F2F2;
        }
        header {
            height: 108px;
        }
        header img {
            height: 100%;
            width: auto;
        }
        nav {
            width: 100%;
            margin-top: 4px;
        }
        nav a {
            text-decoration: none;
            color: #F2F2F2;
            text-shadow: 1px 1px 1.5px rgba(0, 0, 0, .6);
            /*text-shadow:水準位置 垂直位置 模糊距離 陰影顔色;*/
        }
        .row {
            height: 88px;
            display: flex;
            background-color: #FA6055;
            border: 1px solid #F2F2F2;
            border-radius: 8px;
            overflow: hidden;
        }
        .flight {
            background-color: #4B91ED;
        }
        .travel {
            background-color: #36C3A7;
        }
        .row div {
            height: 100%;
            border-right: 1px solid #F2F2F2;
            flex: 1;
        }
        .row div:nth-child(3) {
            border: 0;
        }
        .row div a {
            width: 100%;
            height: 100%;
            display: block;
        }
        .row div em {
            text-align: center;
            line-height: 45px;
            font-style: normal;
            display: block;
            height: 45px;
        }
        .row div i {
            display: block;
            margin: -10px auto;
            width: 43px;
            height: 43px;
            background: url("images/ctrip.png") no-repeat 0 -127px;
            -webkit-background-size: 104px;
            background-size: 104px;
        }
        .row div .flight-icon {
            background-position: 0 -288px;
        }
        .row div .travel-icon {
            background-position: 0 -178px;
        }
        .row-d{
            display: flex;
            flex-direction: column;
        }
        .row-d a {
            text-align: center;
            line-height: 44px;
            flex: 1;
        }
        .row-d a:first-child {
            border-bottom: 1px solid #F2F2F2;
        }
           

<header>
        <img src="images/banner.jpg" alt="">
    </header>
    <nav>
        <div class="row">
            <div>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
                    <em>酒店</em>
                    <i></i>
                </a>
            </div>
            <div class="row-d">
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >海外酒店</a>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >特價酒店</a>
            </div>
            <div class="row-d">
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >團購</a>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >民宿 客棧</a>
            </div>
        </div>
        <div class="row flight">
            <div>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
                    <em>機票</em>
                    <i class="flight-icon"></i>
                </a>
            </div>
            <div class="row-d">
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >火車票</a>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >特價機票</a>
            </div>
            <div class="row-d">
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >汽車票 船票</a>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >專車 租車</a>
            </div>
        </div>
        <div class="row travel">
            <div>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
                    <em>旅遊</em>
                    <i class="travel-icon"></i>
                </a>
            </div>
            <div class="row-d">
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >門票</a>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >目的地攻略</a>
            </div>
            <div class="row-d">
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >郵輪旅行</a>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >定制旅行</a>
            </div>
        </div>
    </nav>