---
tags: Advanced CSS
---

# header

>警告：因為正在練習emmet，所以內文很多部分都故意用emmet打法XD

## 背景部分


先上code

.header{
    height: 95vh;
    background-image:
    linear-gradient(to right,rgba(126, 213, 111, 0.808),rgba(85, 197, 122, 0.801)),
    url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    clip-path: polygon(0 0, 100% 0, 100% 75vh,0 100%);
}

## 雙層圖片放置(上層為透明漸層)
主要用**bgi 線性漸層,圖片**，這樣漸層就會在上方，圖片會在下方，再調整漸層的透明度就大功告成了！

### linear-gradient
細講參數(圖片漸層方向,第一個顏色(R,G,B,透明度),第二個顏色(R,G,B,透明度))
圖片漸層方向可以是to left , to right , to top , to bottom

>其他部分：
- h設定 95vh = 95% view height，會跟隨瀏覽器大小，維持95%高度(5%留白)
- bgsz:cv 圖片才會整張喔！
- bgp設定t，即使瀏覽器大小改變，圖的上方會固定著

## 下方切三角形
有看到圖片下方是一個特殊造型嗎，這邊利用到多邊形角度設定，利用這個其實可以做出多種造型！

### clip-path: polygon(0 0, 100% 0, 100% 75vh,0 100%)
>**XY軸概念：非常無敵重要**
>在解釋這個屬性前要先了解CSS的 X軸 Y軸概念，可以參考圖片，紅色是X軸，跟小時候的數學課一樣是從左到右；但藍色這個Y軸就要特別注意，是**從上到下**喔，越往下數字越大！而他的起始點是左上角我寫0這邊，他的(X Y)就是(0 0)！
(其實軸線應該貼齊上平面與左平面更正確！)

參數分別是四個角度的x y，一個一個看喔(左上開始順時針繞一圈)
- 0左上，0 0因為是起始點沒問題
- 1右上，我們希望x軸衝到底，所以設定100%，而Y軸不動所以0
- 2右下，X軸一樣衝到底，但Y軸不要到底要留一些，所以扣25vh，我們設定75vh
- 3左下，X跟起始點切齊0，Y衝到底所以設定100%

### 另一種平行四邊形的做法是skewY


.section-features{
    padding: 20rem 0;
    background-image: linear-gradient(
    to right,rgba($color-primary-light, 0.808),
    rgba($color-primary-dark, 0.801)),url(../img/nat-4.jpg);
    background-size: cover;
    
    transform: skewY(-7deg);
    
    & > *{//選擇.section-features的直接下層(第一個)(.col)
        transform: skewY(7deg);

    }
}

>正角度是順時針旋轉，逆角度就是逆時針(如此例)
特別的是要記得選擇第一個直接下層往回扭轉，否則內容也會跟著轉喔！

## 文字與按鈕框
HTML code

<div class="text-box">
            <h1 class="heading-primary">
                <span class="heading-primary-main">Outdoors</span>
                <span class="heading-primary-sub">is where life happens</span>
            </h1>

            <a href="#" class="btn btn-white btn-animated">Discover our tours</a>

</div>

CSS先設定text-box讓文字與按鈕能擺在中間

.text-box{
    position: absolute; /* 父層記得要加pos:r */
    top: 45%;  /* %數以header的高度為基準 */
    left: 50%; /* %數以header的寬度為基準 */
    transform: translate(-50%,-50%); /* %數以text-box的寬高為基準 */
    text-align: center;
}

整體位置先用絕對位置pos:a、t從上推45%、l從左推50%，讓他處在中間偏上的位置(因為下面切了三角形，這樣看起來更置中)
但推完之後奇怪的事發生了：怎麼這麼歪啦XD

但其實他已經照你的要求推好了喔，只是他正常的定位點是左上角，因此我們要用到trf:t

### transform: translate(-50%,-50%)
參數放上要移動的(X軸距離,Y軸距離)，注意這邊會是以text-box本身的寬高來算%數喔，我們往左邊拉一半(50%)回來，也往上拉一半(50%)回來，就成功把整個text-box拉回中間了！
>別忘記剛剛提到的X Y軸概念，注意這邊因為都是往X Y軸的反方向拉，所以要帶負號喔！

## 標題文字左右位移動畫
文字

.heading-primary{
    color: #fff;
    text-transform: uppercase;
    backface-visibility: hidden; /* 加了才不會有奇怪的抖抖 */
    margin-bottom: 60px;
}

.heading-primary-main{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

.heading-primary-sub{
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 17.4px;
    animation: moveInRight 1s ease-out;
}

使用到的動畫效果

@keyframes moveInLeft{
    0%{
        opacity: 0;
        transform: translateX(-100px);
    }
    80%{
        transform: translateX(10px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveInRight{
    0%{
        opacity: 0;
        transform: translateX(100px);
    }
    80%{
        transform: translateX(-10px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

### @keyframes 動畫
內部設定：
- 0%起始狀態：op0完全透明、trf:tx位移
- 80%狀態：稍微移超過
- 100%狀態：op1出現、回到原點

### trf位移
trf:tx做x軸的位移
trf:ty做y軸的位移

## 按鈕動畫效果

.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s; /* 加transform的持續時間 */
    position: relative;
}

### 進場效果

@keyframes moveInBottom{
    0%{
        opacity: 0;
        transform: translateY(30px); /* 這個動畫需要在本身指定持續時間 */
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
.btn-animated{
    animation: moveInBottom .5s ease-out .75s;
    animation-fill-mode: backwards; /* 加上這行就可以讓他在開始前也不會先出現 */
}

### 滑動與按下效果

.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,.2) ;
        /* x變量 y變量 陰影寬度 顏色 */
}

.btn:active{
    transform:translateY(-1px);
    box-shadow:0 5px 10px rgba(0,0,0,.2) ;
}

滑動(hover)時往上提起，按下(active)後往下，加上陰影創造按下按鈕效果

>有用到transform的都要記得在本身加trs:all 持續時間

.btn::after{
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s; /* 加transform的持續時間 */
}

.btn-white::after{
    background-color: #fff;
}

.btn:hover::after{
    transform: scaleX(1.4) scaleY(1.6); /* 這個動畫需要在本身指定持續時間 */
    opacity: 0;
}

### .btn::after
在按鈕後加一顆他的分身，z設定-1讓他在後面

## about用的按鈕
 

>箭頭符號這裡找：[Css-tricks](https://css-tricks.com/snippets/html/glyphs/)

.btn-text{
    &:link,
    &:visited{
        font-size: $default-font-size;
        color:$color-primary;
        display: inline-block;
        text-decoration: none;
        border-bottom: 1px solid $color-primary;
        padding: 3px;
    }

    &:hover{
        background-color: $color-primary;
        color:white;
        box-shadow: 0 1rem 2rem rgba(black,0.15);
        transform: translateY(-2px);
    }

    &:active{
        box-shadow: 0 .5rem 1rem rgba(black,0.15);
        transform: translateY(0px);
    }
}