WEB之CSS3系列筆記

時間 2020-11-10

標籤 css css3 web 函數動畫 spa 3d code orm 欄目 HTML 简体版

原文原文鏈接

WEB之CSS3系列筆記

CSS3屬性選擇器

屬性選擇器列表

選擇符	簡介
E[att]	選擇具備att屬性的E元素
E[att="val"]	選擇具備att屬性且屬性值爲val的E元素
E[att^="val"]	匹配具備att屬性, 且值以val開頭的E元素
E[att$="val"]	匹配具備att屬性, 且值以val借位的E元素
E[att*="val"]	匹配具備att屬性, 且值中含有val的E元素

例如:css

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

例如css3

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

結構僞類選擇器

屬性列表

選擇符	簡介
E:first-child	匹配父元素中的第一個子元素E
E:last-child	匹配父元素中最後一個E元素
E:nth-child(n)	匹配父元素中的第n個子元素E
E:first-of-type	指定類型E的第一個
E:last-of-type	指定類型E的最後一個
E:nth-of-type(n)	指定類型E的第n個

例如web

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

/************************************************/
<style>
  /* 偶數 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇數 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，從 0 開始計算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶數 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇數 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 選擇第 0 5 10 15, 應該怎麼選 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是從第5個開始日後選擇 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五個 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

僞元素選擇器

選擇符	簡介
::before	在元素內部的前面插入內容
::after	在元素內部的後面插入內容

僞類選擇器注意事項
- before 和 after 必須有 content 屬性
- before 在內容前面，after 在內容後面
- before 和 after 建立的是一個元素，可是屬於行內元素
- 建立出來的元素在 Dom 中查找不到，因此稱爲僞元素
- 僞元素和標籤選擇器同樣，權重爲 1

2D轉換之translate

`2D` 轉換

2D 轉換是改變標籤在二維平面上的位置和形狀
移動： translate
旋轉： rotate
縮放： scale

`translate` 語法

x 就是 x 軸上水平移動
y 就是 y 軸上水平移動

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

重點知識點函數
- 2D 的移動主要是指水平、垂直方向上的移動
- translate 最大的優勢就是不影響其餘元素的位置
- translate 中的100%單位，是相對於自己的寬度和高度來進行計算的
- 行內標籤沒有效果

例如:動畫

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移動 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移動 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移動 100px */
  /* transform: translate(0, 100px) */

  /* 水平移動 100px */
  /* transform: translateX(100px); */

  /* 垂直移動 100px */
  transform: translateY(100px)
}

`2D 轉換 rotate`

rotate 旋轉spa
- 2D 旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉

rotate 語法3d

/* 單位是：deg */
transform: rotate(度數) 

/**/
div{
      transform: rotate(0deg);
}

重點知識點code
- rotate 裏面跟度數，單位是 deg
- 角度爲正時，順時針，角度爲負時，逆時針
- 默認旋轉的中心點是元素的中心點

代碼演示orm

img:hover {
  transform: rotate(360deg)
}

設置元素旋轉中心點(transform-origin)

transform-origin 基礎語法ci
```
transform-origin: x y;
```
重要知識點
- 注意後面的參數 x 和 y 用空格隔開
- x y 默認旋轉的中心點是元素的中心 (50% 50%)，等價於 center center
- 還能夠給 x y 設置像素或者方位名詞(top、bottom、left、right、center)

`2D` 轉換之 `scale`

scale 的做用
- 用來控制元素的放大與縮小
語法
```
transform: scale(x, y)
```
知識要點
- 注意，x 與 y 之間使用逗號進行分隔
- transform: scale(1, 1): 寬高都放大一倍，至關於沒有放大
- transform: scale(2, 2): 寬和高都放大了二倍
- transform: scale(2): 若是隻寫了一個參數，第二個參數就和第一個參數一致
- transform:scale(0.5, 0.5): 縮小
- scale 最大的優點：能夠設置轉換中心點縮放，默認以中心點縮放，並且不影響其餘盒子
代碼演示

div:hover {
    /* 注意，數字是倍數的含義，因此不須要加單位 */
    /* transform: scale(2, 2) */

    /* 實現等比縮放，同時修改寬與高 */
    /* transform: scale(2) */

    /* 小於 1 就等於縮放*/
    transform: scale(0.5, 0.5)
}

動畫(animation)

什麼是動畫
- 動畫是 CSS3 中最具顛覆性的特徵之一，可經過設置多個節點來精確的控制一個或者一組動畫，從而實現複雜的動畫效果
動畫的基本使用
- 先定義動畫
- 在調用定義好的動畫

語法格式(定義動畫)

@keyframes 動畫名稱 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

語法格式(使用動畫)

div {
	/* 調用動畫 */
    animation-name: 動畫名稱;
 	/* 持續時間 */
 	animation-duration: 持續時間；
}

動畫序列
- 0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列
- 在 @keyframs 中規定某項 CSS 樣式，就由建立當前樣式逐漸改成新樣式的動畫效果
- 動畫是使元素從一個樣式逐漸變化爲另外一個樣式的效果，能夠改變任意多的樣式任意多的次數
- 用百分比來規定變化發生的時間，或用 from 和 to，等同於 0% 和 100%

代碼演示

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
  </style>

動畫常見屬性

屬性	描述
@keyframes	規定動畫
animation	全部動畫屬性的簡寫屬性, 除了animation-play-state屬性。
animation-name	規定@keyframes動畫的名稱
animation-duration	規定動畫完成一個週期所花費的秒或毫秒, 默認是0
animation-timing-function	規定動畫的速度曲線
animation-delay	規定動畫什麼時候開始, 默認是0.
animation-iteration-count	規定動畫被播放的次數, 默認是1, 還有infinite
animation-direction	規定動畫是否在下一週期逆向播放, 默認是"normal", alternate逆播放
animation-play-state	規定動畫是否正在運行或暫停。默認"running"還有paused
animation-fill-mode	規定動畫結束後狀態, 保持forwards回到起始backwards

例如:

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 動畫名稱 */
  animation-name: move;
  /* 動畫花費時長 */
  animation-duration: 2s;
  /* 動畫速度曲線 */
  animation-timing-function: ease-in-out;
  /* 動畫等待多長時間執行 */
  animation-delay: 2s;
  /* 規定動畫播放次數 infinite: 無限循環 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 動畫結束以後的狀態 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 規定動畫是否暫停或者播放 */
  animation-play-state: paused;
}

動畫簡介方式

/* animation: 動畫名稱 持續時間 運動曲線 什麼時候開始 播放次數 是否反方向 起始與結束狀態 */
animation: name duration timing-function delay iteration-count direction fill-mode

知識要點

簡寫屬性裏面不包含 animation-paly-state
暫停動畫 animation-paly-state: paused; 常常和鼠標通過等其餘配合使用
要想動畫走回來，而不是直接調回來：animation-direction: alternate
盒子動畫結束後，停在結束位置：animation-fill-mode: forwards

速度曲線細節

animation-timing-function: 規定動畫的速度曲線，默認是ease

值	描述
linear	動畫從頭至尾的速度是相同的。勻速
ease	默認。動畫從低俗開始,而後加快,在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
strps()	指定了時間函數中的間隔數量(步長)

例如

div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px;
  }
}

3D 轉換

`3D` 轉換知識要點

3D 位移：translate3d(x, y, z)
3D 旋轉：rotate3d(x, y, z)
透視：perspctive
3D呈現 `transfrom-style``

``3D`移動`translate3d`

3D 移動就是在 2D 移動的基礎上多加了一個能夠移動的方向，就是 z 軸方向
transform: translateX(100px)：僅僅是在 x 軸上移動
transform: translateY(100px)：僅僅是在 y 軸上移動
transform: translateZ(100px)：僅僅是在 z 軸上移動
transform: translate3d(x, y, z)：其中x、y、z 分別指要移動的軸的方向的距離
注意：x, y, z 對應的值不能省略，不須要填寫用 0 進行填充

transform: translate3d(x, y, z)
 
 /*******************************/
transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 對應的值不能省略，不須要填寫用 0 進行填充 */
transform: translate3d(100px, 100px, 0)

透視 `perspective`

知識點講解

若是想要網頁產生 3D 效果須要透視(理解成 3D 物體投影的 2D 平面上)
實際上模仿人類的視覺位置，可視爲安排一直眼睛去看
透視也稱爲視距，所謂的視距就是人的眼睛到屏幕的距離
距離視覺點越近的在電腦平面成像越大，越遠成像越小
透視的單位是像素

知識要點

透視須要寫在被視察元素的父盒子上面
```
body {
  perspective: 1000px;
}
```

`translateZ`

translateZ 與 perspecitve 的區別

perspecitve 給父級進行設置，translateZ 給子元素進行設置不一樣的大小

`3D` 旋轉`rotateX`

3D 旋轉指可讓元素在三維平面內沿着 x 軸、y 軸、z 軸或者自定義軸進行旋轉

語法
- transform: rotateX(45deg) -- 沿着 x 軸正方向旋轉 45 度
- transform: rotateY(45deg) -- 沿着 y 軸正方向旋轉 45 度
- transform: rotateZ(45deg) -- 沿着 z 軸正方向旋轉 45 度
- transform: rotate3d(x, y, z, 45deg) -- 沿着自定義軸旋轉 45 deg 爲角度

例如

div {
  perspective: 300px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)
}

/*
- 左手的手拇指指向 x 軸的正方向

- 其他手指的彎曲方向就是該元素沿着 x 軸旋轉的方向
*/

`3D` 旋轉 `rotateY`

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateY(180deg)
}
/*
- 左手的拇指指向 y 軸的正方向

- 其他的手指彎曲方向就是該元素沿着 y 軸旋轉的方向(正值)
*/

`3D` 旋轉 `rotateZ`

代碼演示

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateZ(180deg)
}

rotate3d
- transform: rotate3d(x, y, z, deg) -- 沿着自定義軸旋轉 deg 爲角度
- x, y, z 表示旋轉軸的矢量，是標識你是否但願沿着該軸進行旋轉，最後一個標識旋轉的角度
  - transform: rotate3d(1, 1, 0, 180deg) -- 沿着對角線旋轉 45deg
  - transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 軸旋轉 45deg

`3D` 呈現 `transform-style`

transform-style
- ☆☆☆☆☆
- 控制子元素是否開啓三維立體環境
- transform-style: flat 表明子元素不開啓 3D 立體空間，默認的
- transform-style: preserve-3d 子元素開啓立體空間
- 代碼寫給父級，可是影響的是子盒子