[ 筆記 ] CSS - 基礎樣式

#css

Posted by krebikshaw on 2020-07-13

Box Model

可以想像成每個 HTML 標籤都是一個 box 方塊，而每個 box 都包含著四層寬度，會影響到 box 的長寬，以下由內至外說明：

  • Content - 元素本身的大小，即是 width & height 的設定值
    • 寬度 width ： 會因為 display 的屬性，預設值會有所差異
      • display: block： 寬度為 100%
      • display: inline | inline-block： 寬度讓內容撐開
    • 高度 height ：
      • 沒有設高度的話，就是讓內容去撐開
      • 通常比較少設定高度，因為 RWD 時會很麻煩
  • padding - 元素與內容的內邊距（ 空隙 ）
  • border - 元素的邊框
  • margin - 元素的外間距
    • 不算在元素裡面，所以設元素的 background 屬性改不到 margin 佔據的部分

box-sizing 盒模型屬性

content-box 預設

  • 元素的實際大小會是 content + padding + border
  • 元素 1 : .box1 { width: 50px; height: 50px; margin: 10px;}
    長、寬度各為： 50px
  • 元素 2 : .box2 { width: 50px; height: 50px; padding: 10px; border: 5px solid black; margin: 10px;}
    長、寬度各為： 50 + (102) + (52) = 80px

  • 補充： margin 是該元素佔據的位置，不算在大小裡面

  • 動動腦時間

Q： 把鏡頭轉向歹命的前端，如果要切出設計稿的某個元素： 總寬度 100px、跟內容留白 10px、邊框 2px，那該元素的 width 要設多少呢 ?

A：76px： 100 - (102) - (22) = 76

但一個網頁有如此多個元素，總不能每次都拿出計算機按吧，所以在這裡推薦一個比較直覺的盒模型屬性。

border-box（ 推薦 )

  • 元素的實際大小就是 width & height 的設定值
  • 元素 1 : .box1 { width: 50px; height: 50px; margin: 10px;}
    實際長、寬度各為： 50px
  • 元素 2 : .box2 { width: 50px; height: 50px; padding: 10px; border: 5px solid black; margin: 10px;}
  • 實際長、寬度各為： 50px（ 用 chrome 的開發工具看會發現 content 變成 20px * 20px ）

請問 display: inline, block 跟 inline-block 的差別是什麼？什麼時機點會用到？

inline

  • 行內元素
  • 會向左邊排列，不會換行、直到排滿才會換行
  • 無法設定 width & height，寬、高會自然被內容撐開
  • 無法設定 上下 margin
  • inline 元素不該包著 block 元素
  • 常見的 inline 元素有：<span>、<a>、<img>、<strong>

block

  • 塊級元素
  • 向下排列，會換行
  • 可以設定 width & height
  • 預設寬度會佔滿父容器的 100%、高度會自然被內容撐開
  • 就算「 兩個寬度加起來小於父容器 」的 block 並排，也是會換行

inline-block

  • 會流動的塊級元素，兼顧 inline 跟 block 的優點
  • 按照畫面的流動，會向左邊排列
  • 可以設定 width & height
  • 預設寬、高會自然被內容撐開
  • 常見的 inline-block 元素有： <input>

none

  • 讓元素消失 如果只是想讓元素隱藏，但還是佔據相同位置的話可以用： visibility : hidden

要小心設定為 inline-block 的 html 標籤造成空格間距，常見的解決方法如以下：

  • 直接把所有標籤中的空白去掉
    • 捨棄縮排、不好閱讀
  • 用註解所有標籤中的空白填滿
    • 保留縮排
  • 設定「 負 margin 」
    • 正常情況可以用 margin: -4px，用有可能會因為 letter-space 屬性受到影響，故不建議
  • 元素加上 display: float（ 建議 ）
    • 但要記得後面的元素要 clear: both or clear: left，以免受到影響

請問 position: static, relative, absolute 跟 fixed 的差別是什麼？分別各舉一個會用到的場合

參照點：
relative： 元素本身

  • 如果沒有設置偏移量 （ left | top | right | bottom ），則不會有任何改變。
  • 不會影響其他元素：
    • 不管元素本身怎麼偏移，都不會影響到其他元素的定位。

absolute： 往上層找到「 第一個 」非 static 的元素

  • 跳脫原本的流動，定位位置有兩種可能：
    • 找到父層參照點 (relative | absolute | fixed )
    • 找不到父層參照點，意指上層的所有元素都以 static 定位，參照點則會是 <body> 元素。
  • 如果沒設座標，預設位置為： left: 0; top: 0;（ 即父層參照點的左上角 ）
  • 會影響其他元素：
    • 假設 A、B、C 是三個同級元素、且定位是 static 或 relative，當 B 設置 position: absolute，會影響到 C 元素的流動（ C 會補上原本 B 的位置 ）。

fixed： viewpoint，指瀏覽器可視範圍

  • 跳脫原本的流動，直接固定在相對於 viewpoint 的某個位置
  • 不會隨著滑動頁面而移動位置
  • 一定要設定座標才有作用
    • 水平 & 垂直 方向至少要設定一個 top | bottom & left | right
  • 會影響其他元素：
    • 假設 A、B、C 是三個同級元素、且定位是 static 或 relative，當 B 設置 position: fixed，會影響到 C 元素的流動（ C 會補上原本 B 的位置 ）。

新屬性 sticky： viewpoint

  • 當視窗滾到該元素時，才固定在相對於 viewpoint 的某個位置，一直到「 父容器離開畫面為止 」
  • 一定要設定座標才有作用
    • 上下滾動要設定 top | bottom （ 左右是根據原本的位置，無法更改 ）
    • 左右滾動要設定 left | right（ 上下是根據原本的位置，無法更改 ）
  • 不會影響其他元素：
    • 只有當視窗滾到該元素時，才會讓該元素位置改變，但同時並不會影響到其他元素。
  • 可以想成是 static 跟 fixed 的混合版
    • 視窗滾到該元素前： static
    • 視窗滾到該元素後： fixed

應用：
某元素要定位於右上角： relative & absolute 組合技
最常見的狀況應該是當某個元素要定位在「 右上角 」，通常是按鈕。 只要設置父容器為 relative，定位子元素為 absolute。

<div class="box">
    <button class="button">我是關閉按鈕</button>
</div>

.box {
    position: relative;
}
.button {
    position: absolute;
    right: 0;
    top: 0; /* 可以不用寫 top，因為預設就是 0 */
}

選單固定於上方： fixed 的主場
這就很簡單了，可以使用 fixed 固定於上方（ 或 sticky 也可以 ）

.nav {
    width: 100%; 
    position: fixed;
    left: 0;
    top: 0;
}

當視窗滾到某段落、段落標題固定於上方： 新功能 sticky
sticky 固定於上方：Codepen - demo 網址

（ 厲害的地方在於，只會在父容器還在視窗內時固定 ）

但因為是新屬性，要注意瀏覽器兼容問題，至少現在 ( 05/2019 ) safari 都還要加前綴 position: -webkit-sticky;

<section class="section">
  <h2 class="section__title">標題一</h2>
  <p>...</p>
</section>
<section class="section">
  <h2 class="section__title">標題二</h2>
  <p>...</p>
</section>
<section class="section">
  <h2 class="section__title">標題三</h2>
  <p>...</p>
</section>
<section class="section">
  <h2 class="section__title">標題四</h2>
  <p>...</p>
</section>

.section__title{
  position: -webkit-sticky; /* for safari */
  position: sticky;
  top: 0;
}

引用 CSS 方法

  1. 直接在標籤中加入 style 元素

    • <div style="background:red;">

  2. 將 CSS 另存為新的檔案，並於 HTML 的 HEAD 標籤中以下述指令嵌入。

    • <link rel="stylesheet" type="text/css" href="mystyle.css">
      • rel : relationship
      • href : 放入檔案路徑

  3. 在 HEAD 中用 style 標籤夾住

    <head>
<style>
 body { 
   background: linen;
 }
</style>
</head>
  • 在引用 CSS 的時候可以加入一行指令讓版面先修整過：
    • <link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet">

選取大法

  • 由標籤來選取：
    • p { }： 選取所有標籤為 <p> 的內容
    • ul { }：選取所有標籤為 <ul> 的內容
  • 由 id 選取：
    • #para1：選取 id="para1" 的內容
  • 由 class 選取：
    • .btn：選取 class="btn" 的內容
  • 複選
    • 中間用 , 來隔開
    • p, h1：選取所有 <p> 及 <h1> 的內容
  • 全選：
    • * ：全部都要選取

設定背景 (background)

  • 以顏色來填滿
    • background: lightblue;

  • 以圖片作為背景

    • background-image: 加上 url( )
      • background-image: url("paper.gif");
    • 讓圖片以垂直方向重複：
      • background-repeat: repeat-y;
    • 讓圖片不要重複：
      • background-repeat: no-repeat;
    • 讓圖片保持於右上角：
      • background-position: top right
    • 合再一起寫：
      body {
background: url(img_tree.png) no-repeat top right;
}
// banner 的寫法：
.banner {
background: url(./bg.png) center/cover no-repeat
}

  • 補充：

    • 要在背景上面加一個「半黑色遮罩」
// banner 要先設定為 relative
.banner {
  position: relative;
}

.banner::after {
  content: '';   // content 一定要加
  position: absolute;  // 抓上面的 relative
  rgba(0, 0, 0, 0.4)
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
  • 補充 2：
    • 要將四張圖片橫向排列填滿頁面
// 圖片先用一個 div 包住
<div class="content__menu__photo">
  <img src="./photo/f-001.png"/>
  <img src="./photo/f-002.png"/>
  <img src="./photo/f-003.png"/>
  <img src="./photo/f-004.png"/>    
</div>

// 外面的 div 先以 display: flex 將四張圖片橫向呈現
.content__menu__photo {
  display: flex;
}

// 再以 flex-shrink: 1; 來讓圖片等比例隨視窗大小壓縮，
// 並設定每一張圖片佔據寬度 width: 25%
.content__menu__photo img {
  display: flex;
  flex-shrink: 1;
  width: 25%;
}

設定邊框 (border)

  • 設定寬度為 4px 樣式為 dotted 顏色為 red
    • border: 4px dotted red;
  • 僅顯示上方邊框
    • border-top: 4px dotted red;

Margin

  • 設定單邊（以左邊為例）
    • margin-left: 10px;
  • 設定四周
    • 四面皆設定 20px： margin: 20px;
    • 上下設定 50px 左右設定 25px： margin: 50px 25px;
  • 水平至中
    • margin: auto;

Padding (會把邊框外撐)

  • 設定單邊
    • padding-left: 25px;
  • 設定四周
    • 四面皆設定 20px： padding: 20px;
    • 上下設定 50px 左右設定 25px ： padding: 50px 25px;

Height & Width

  • 設定高度為 100px
    • height: 100px;
  • 設定寬度為 50%
    • width: 50%;
    • 一般網頁可以把 max-width 設成 1280px
    • 平板大小可以設定在 768px 以下

Box model

將上面四項樣式功能整合起來就形成了「盒模型」。

圖片來源

  • 程式碼範例：
    <style>
div {
background-color: lightblue;
width: 200px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>

Outline 邊框

outline 指的是元素的外圍邊框（輪廓），透過 outline 屬性的設定可以將元素所佔的範圍面積擴大

  • border 跟 outline 的差異：
    • border 不會使元素範圍的面積擴大
    • outline 會將面積變大
      • 以 outline： 5px 為例：
      • 元素的邊長會增加 10px (兩邊各 5px)
      • 寬度會增加 10px
      • 面積會多出 100px^2
  • outline 使用方式跟 border 差不多：
    • outline: 4px dotted red;

Text 文字內容

  • 設定文字顏色
    • 使用 color 即可，不需要使用 text-color
    • h1 { color:blue; }
  • 設定文字至中
    • h1 { text-align: center; }
  • 去除文字的超連結底線
    • a { text-decoration: none; }
  • 將文字轉變成大寫
    • 轉變成全部大寫 (THIS IS A HEADING)
      • h1 { text-transform: uppercase; }
    • 轉變成駝峰式大寫 (This Is A Heading)
      • h1 { text-transform: capitalize; }
  • 將文字第一行的開頭空格
    • p { text-indent: 20px; }

Font 文字字型

  • 設定為斜體樣式
    • p { font-style: italic; }
  • 設定為粗體樣式
    • p { font-weight: bold; }
  • 設定字體大小
    • body { font-size: 20px; }
    • h1 { font-size: 3em; }
  • 設定字體樣式
    • body { font-family: Courier New; }
  • 整合使用 (斜體, 大小, 樣式)
    • p { font: italic 20px Verdana; }
  • 補充：
    • 改變字跟字中間的間格
      • h1 { letter-spacing: 0.3em }

Link 連結

  • 連結的選取可以藉由連結當下的「狀態」來區分
  • 其中 a:link 這邊的 : 前後不可以空格。
  1. 初始狀態 (unvisited link)
    • a:link
    • a:link { color: black; }
  2. 滑鼠移動到連結時 (mouse over link)
    • a:hover
    • a:hover { color: blue; }
  3. 滑鼠正在點擊的當下 (selected link 左鍵點下去，到左鍵放開的這段時間。)
    • a:active
    • a:active { color: green; }
  4. 曾經訪問過的連結 (visited link)
    • a:visited
    • a:visited { color: blue; }

List 清單

  • 設定清單標示
    • 設定為方塊
      • ul { list-style: square; }
    • 設定為羅馬數字
      • ol { list-style: upper-roman; }
    • 設定為 gif 圖示
      • ul { list-style-image: url('sqpurple.gif'); }
    • 將原先的 circle 標示備份，新增樣式 img_marker.png 並顯示於內容之中
      • ul { list-style: circle inside url('img_marker.png'); }
    • 設定標示隱藏
      • ul { list-style-type: none; }
  • 清單改成橫向
    • 在 ul 上面加上 display: flex;

Table 表格

  • 設定表格外框

    • table, th, td 均加上外框
    • table, th, td 均加上外框，且框線不重複
      • table { border-collapse: collapse; }

  • 設定表格內文字靠右

    • table { text-align: right; }

Display & Visibility

  • 設定元素為隱藏 (但保留元素的位置)
    • 此位置依然有該元素，它只是隱形了
    • h1 { visibility: hidden; }
  • 設定元素為移除 (不保留元素的位置)
    • 此位置由下方的元素替補，它已經不見了
    • h1 { display: none; }
  • 設定元素橫向排列：
    • li { display: inline; }
  • 設定元素自成一行：
    • strong { display: block }

Position

  • 將元素位置鎖在畫面固定位置
    • h1 { position: fixed; }
  • 將元素相對上一層元素來設定位置
    • h1 { position: relative; }
  • 將元素相對上方 relative 的元素來設定相對位置
    • h1 { position: absolute; }
    • 若是上方沒有任何設定為 relative 的元素，則會相對於 html page 來設定位置
  • 將圖片設定顯示於下層
    • img { z-index: -1; }
    • 注意： 設定 z-index 的時候，要考慮 position 是相對於誰

Overflow

  • 將多餘的文字隱藏，並加入滾輪
    • div { overflow: scroll; }
  • 將多餘的文字直接砍掉
    • div { overflow: hidden; }
  • 加入橫向滾輪
    • div { overflow-x: scroll; }
  • 將多餘的文字用 ... 表示
    • text-overflow: ellipsis
    • 需搭配 overflow: hidden; 一起使用
    • div { overflow: hidden; text-overflow: ellipsis; }
  • 將多餘的文字直接強制換行 (英文單字會被切開)
    • word-wrap: break-word;
    • div { word-wrap: break-word; }
  • 將所有空間都用文字塞滿，滿了才換行 (英文單字會被切的亂七八糟)
    • div { word-break: break-all; }

Align

  • 將元素水平至中 (with margin)
    • div { margin: auto; }
  • 將元素靠右 (with absolute)
    • div { position: absolute; right: 0px; }

Combinators

  • 設定 div 底下 p 的文字要改為紅色

    • 只要在 div 底下，不論中間是否有隔其他東西
    • div p { color: red; }

  • 設定 div 底下的第一層 p 的文字要改為紅色

    • 只有 div 底下第一層會改到
    • div > p { color: red; }

  • 設定 div 之後的下一個 p 的文字要改為紅色

    • div 本身底下的都不會改
    • 只會改 div 之後的下一個，下一個之後的都不改
    • div + p { color: red; }

  • 設定 div 之後全部 p 的文字都要改為紅色

    • div 本身底下的不會改
    • div ~ p { color: red; }

Pseudo-classes

  • 設定連結的不同狀態
    1. 初始狀態
      • a:link
    2. 點選過後
      • a:visited
    3. 滑鼠移動到上方時
      • a:hover
    4. 滑鼠正在點擊時
      • a:active

  • 選取第一個 p 元素

    • p:first-child

  • focus (clicked or active) 的元素

    • input:focus

Pseudo-element

  • 設定 p 的第一行文字為紅色
    • p::first-line { color: red; }
  • 設定 p 的第一個字為紅色大寫
    • p::first-letter { color: red; font-size: xx-large; }
  • 在 p 前後加上圖案
    • p::before { content: url('image.gif'); }
    • p::after { content: url('image.gif'); }

Opacity 透明度

  • 設定透明度為 0.4
    • img { opacity: 0.4; }
    • img:hover { opacity: 1; }

Attribute Selector 屬性選取

  • 設定 a 中有 target 屬性的元素背景顏色換成藍色
    • a[target] { background: lightblue; }
  • 設定 a 中有 target 屬性是 bland 的元素背景顏色換成藍色
    • a[target="bland"] { background: lightblue; }
  • 設定 img 中 title 含有 red 字樣的元素，加上 border
    • 字樣必須是完整的字，(ex. reduce 不符合 red 字樣)
    • img[title~="red"] { border: red; }
  • 設定 img 中 title 以 red 字樣開頭的元素，文字變成紅色
    • img[title^="red"] { color: red; }
  • 設定 img 中 title 以 flower 字樣結尾的元素，文字變成紅色
    • img[title$="flower"] { color: red; }
  • 設定 img 中 title 含有 red 字樣的元素，文字變成紅色
    • 字樣可以不完整，(ex. flow 字樣可以抓到 flower)
    • img[title*="flow"] { color: red; }

Rounded Courners 圓角邊框

  • 設定一個 25px 的圓角邊框
    • p { border-radius: 25px; }
  • 設定左下角為 25px 的圓角
    • p { border-bottom-left-radius: 25px; }

Border Images

  • 設定 border 為圖案
    • p { border-image: url('img.png') 30 round; }
  • 設定 border 為圖案，並且壓平它
    • div { border-image: url('border.png') 30 stretch; }

Backgrounds

  • 設定雙層背景
    • 寫在左測的會在上層
    • body { background: url('A.gif'), url('B.gif'); }
  • 將背景調整成與視窗大小相容
    • html { background-size: cover; }
  • 設定背景的定位點為 content-box
    • div { background-origin: content-box; }
  • 設定背景的填滿範圍到 padding-box
    • div { background-clip: padding-box; }

Colors

  • 設定背景顏色的透明度為 0.3
    • h1 { background: rgba(0,255,0,0.3); }
  • HSL 設定顏色
    • hsla ( 色調, 飽和度, 亮度, 透明度 )
    • h1 { background: hsla(0,100%,50%,0.3); }

Gradients

  • 設定背景「由上到下」以白色及綠色漸層
    • 預設 linear-gradient() 左邊的值為「上方」的顏色，右邊的值為「下方」的顏色
    • div { background-image: linear-gradient(white, green); }
  • 自訂漸層方向 1 (to <方位>)
    • 在 linear-gradient 最左側加入方向參數
    • 方向設定為要漸層的方向 (ex. 要從左上到右下，就寫「to 右下」)
    • linear-gradient( to bottom right, white, green)
  • 自訂漸層方向 2 (<旋轉角>)
    • 在 linear-gradient 最左側加入角度參數
    • 方向設定為要漸層的角度 (deg)
    • linear-gradient( 70deg, white, green )
  • 四色漸層
    • 依據方向將顏色由左至右帶入
    • linear-gradient( white, red, blue, green )
  • 由中心向外漸層
    • 預設 radial-gradient() 左側值為「中心」的顏色，右側值為「外側」的顏色
    • radial-gradient(white, green)
    • radial-gradient 可以在最左側加入「形狀」參數，決定以什麼形狀來向外側漸層
    • radial-gradient(circle, white, green)

Shadow Effects

  • 設定文字陰影

    • 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半径 陰影擴展半径 陰影颜色
    • text-shadow: 2px 2px 0px 5px green;
    • 可以疊加第二層陰影，中間用 , 隔開
    • text-shadow: 2px 2px 0px 5px green, 0px 0px 0px 10px red;

  • 設定 box 陰影

    • box-shadow：投影方式 X軸偏移量 Y軸偏移量 陰影模糊半径 陰影擴展半径 陰影颜色
      • box-shadow: 10px 10px 0px 5px grey;
    • 可以疊加第二層陰影，中間用 , 隔開
      • box-shadow: 0px 0px 0px 3px white, 0 0 0px 5px #999;

Web Font

  • 引入新字體到文件中
<style> 
@font-face {
   font-family: sansation;
   src: url(sansation_light.woff);
}

@font-face {
  font-family: sansation;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

body {
   font-family: sansation;
}
</style>

2D Transforms

  • 移動元素位置
    • 向右 100px 向下 200px
      • div { transform: translate(100px, 200px); }
  • 旋轉元素
    • 旋轉 45 deg
      • div { transform: rotate(45deg); }
  • 改變元素形狀
    • 寬度 0.5 倍，高度 2 倍
      • div { transform: scale(0.5, 2); }
    • 對 x 軸歪斜 20 deg，對 y 軸歪斜 30 deg
      • div { transform: skew(20deg, 30deg); }

3D Transforms

  • 對元素旋轉
    • 對 x 軸旋轉 150 deg
      • div { transform: rotateX(150deg); }
    • 對 y 軸旋轉 200 deg
      • div { transform: rotateY(200deg); }

Transitions

  • 將 width 以 2 秒緩慢從 100px 放大到 300px
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
  • 讓變化「緩進緩出」ease-in-out
    • transition-timing-function: ease-in-out;

  • 讓變化遲延 0.5 秒開始

    • transition-delay: 0.5s;

  • 讓背景以 2 秒變色，div 以 2 秒旋轉

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: background 2s, transform 2s;
}

div:hover {
  background: blue;
  transform: rotate(180deg);
}
</style>
  • 縮寫整合
    • transition: 標的物 變化時間 變化函式 遲延時間
    • transition: width 2s ease-in-out 0.5s; 
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s ease-in-out 0.5s;
}

div:hover {
  width: 400px;
}
</style>

Animations

  • 建立一個動畫「example」，以 2 秒的時間將背景顏色從 red 轉變成 blue
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: blue;}
}
</style>
  • 依照下列步驟做出動畫「example」
    1. 0% 紅色 左0 上0
    2. 25% 藍色 左0 上200
    3. 50% 綠色 左200 上200
    4. 75% 黃色 左200 上 0
    5. 100% 紅色 左0 上0
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red; left:0px; top:0px;}
  25%  {background-color: blue; left:0px; top:200px;}
  50%  {background-color: green; left:200px; top:200px;}
  75%  {background-color: yellow; left:200px; top:0px;}
  100% {background-color: red; left:0px; top:0px;}
}

  • 動畫無限循環

    • animation-iteration-count: infinite;

  • 動畫開始 <-> 結束 交替重複

    • animation-iteration-count: infinite; + animation-direction: alternate;
<style> 
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;  
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color: red; left:0px; top:0px;}
  25%  {background-color: blue; left:0px; top:200px;}
  50%  {background-color: green; left:200px; top:200px;}
  75%  {background-color: yellow; left:200px; top:0px;}
  100% {background-color: red; left:0px; top:0px;}
}
</style>
  • 動畫「緩進緩出」
    • animation-timing-function: ease-in-out;

參考資料：
w3schools


#css

krebikshaw




Related Posts

Vue3 XML Pretty Print與Theme呈現

Vue3 XML Pretty Print與Theme呈現

 hotmaneil
traverse node 指定元素 (補)

traverse node 指定元素 (補)

 mijouhsieh
Redux 應用官方教學筆記

Redux 應用官方教學筆記

 chihyu

Comments