0%

Amos金魚都能懂的切版教學影片-csscoke NO011

成品

  • 基本網頁的架構
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <body>
    <!-- 大區塊 wrap -->
    <div class="wrap">
    <!-- 區塊一 -->
    <div class="item">
    <div class="icon">

    </div>
    <div class="txt">
    <h3></h3>
    <p></p>
    </div>
    </div>
    <!-- 區塊二 -->
    <div class="item">
    <div class="icon">

    </div>


    <div class="txt">
    <h3></h3>
    <p></p>
    </div>
    </div>
    <!-- 區塊三 -->
    <div class="item">
    <div class="icon">

    </div>
    <div class="txt">
    <h3></h3>
    <p></p>
    </div>
    </div>

    </div>



    </body>

wrap 的處理

1
2
3
4
5
6
7
.wrap {
display: flex;
max-width: 1200px;
margin: auto;


}

三個item的處理

  • 方框的角是圓弧border-radius: 5px;參考
  • 方框背後有陰影box-shadow參考
1
2
3
4
5
6
7
8
9
10
11
.item {

width: 340px;
align-items: center;
text-align: center;
margin: 10px 15px;
padding: 10px;
border: 5px solid #F8D0CD;
border-radius: 5px;
box-shadow: 2px 2px 10px 1px #F8D0CD;
}

破格

  • 設置margin凸出去,就設置負的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.item .icon {
width: 150px;
height: 150px;
/* 將整個div放中間,不是用text-align */
margin: -75px auto 0;
background-color: blue;
font-size: 85px;
color: #f5afac;
line-height: 150px;
/* line-height可以用來做單航文字的垂直居中 */
line-height: 150px;
/* **** */
position: relative;
border-radius: 50%;

}
  • 先是方形的,後來加了radious

在icon前加一個物件,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.item .icon::before {
content: '';
position: absolute;
border: 10px solid #f5afac;
width: 100%;
height: 100%;
/* left: 0; right: 0; 要注意有border*/
left: -10px;
right: -10px;
border-radius: 50%;
margin: -15px auto 0;

/*下一張圖,加上框線的處理*/
border-top: 10px solid #f9cec2;
border-right: 10px solid #f9cec2;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
transform: rotate(-45deg);
margin: -10px auto 0;

}
  • 先讓外框變原形,給予線條
  • 設計線的上下左右,顏色與透明度(是以原本正方形的上下左右去看)
  • 接著選轉,讓它到正上方

  • 要注意突出去的部分已經超過wrap的範圍,會影響專案後續的呈現

  • wrap要做調整

icon的動畫

  • @keyframes + 動畫名稱 動畫內容(劇本) 關鍵影格的設定(0-100%(結束) or from-to )一段動畫在一個連續時間軸上進行著
  • animation + 動畫名稱 播放時間 延遲執行的時間(要等多久才播放) 速度 次數 方向 填充模式(起點狀態) 播放狀態(播放\暫停)

animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

完整解析 CSS 動畫 ( CSS Animation )
金魚都能懂網頁設計入門 : Animation 網頁動畫 - 鐵人賽第十九天
動畫效果


  • animation-duration:5s;指的是「播放一次」動畫需要的時間
  • animation-iteration-count:infinite;表示動畫播放的次數,預設值為 1 次,如果設定為 infinite 動畫就會無止盡的播放下去。
  • animation-timing-function 動畫加速度函式:
    • linear:線性,沒有任何加速減速
    • ease、ease-in、ease-out、ease-in-out:具有加速減速的動畫
  • animation-direction 動畫播放方向
    • normal:正常播放,從 0% 到 100% ( 預設值 )。
    • reverse:反轉播放,從 100% 到 0%。
    • alternate:正反轉輪流播放,奇數次為 0% 到 100%,偶數次為 100% 到 0%,若動畫播放次數只有一次就只會正常播放。
    • alternate-reverse:alternate 的相反,奇數次為 100% 到 0%,偶數次為 0% 到 100%,若動畫播放次數只有一次就只會反轉播放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* item被摸到,然後搖裡面的icon */
.item:hover .fas {
animation: shake .2s linear infinite alternate;
}

@keyframes shake {
0% {
transform: rotate(-10deg);
}

100% {
transform: rotate(10deg);
}
}

Font Awesome

  • 使用前可以在官網創造帳戶
  • 點選右上角的 ” Copy Kit Code ”
  • 將剛剛複製的這串程式碼放入我們網站 HTML 程式碼中的 <head> 之中。
  • 接下來就可以找自己享用的icon

@import “URI” 插入到 CSS 檔中

@import 開心的結構化 CSS