css使用者界面樣式(cursor,outline,resize,垂直對齊,溢出,過渡,變形)

CSS使用者界面樣式

所謂的界面樣式， 就是更改一些使用者操作樣式， 比如 更改使用者的滑鼠樣式， 表單輪廓等。但是比如滾動條的樣式改動受到了很多浏覽器的抵制，是以我們就放棄了。 防止表單域拖拽

滑鼠樣式cursor

設定或檢索在對象上移動的滑鼠指針采用何種系統預定義的光标形狀。

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文本
           

滑鼠放我身上檢視效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移動</li>
  <li style="cursor:text">我是文本</li>
</ul>
           

盡量不要用hand 因為 火狐不支援 pointer ie6以上都支援的盡量用

輪廓 outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width 
           

但是我們都不關心可以設定多少，我們平時都是去掉的。

最直接的寫法是 ： outline: 0;

防止拖拽文本域resize

resize：none 這個單詞可以防止 火狐 谷歌等浏覽器随意的拖動 文本域。

右下角可以拖拽：

右下角不可以拖拽：

vertical-align 垂直對齊

以前我們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

以前我們還講過讓文字居中對齊，是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性， 我們的媽媽一直很擔心我們的垂直居中怎麼做。

vertical-align 垂直對齊， 這個看上去很美好的一個屬性， 實際有着不可捉摸的脾氣，否則我們也不會這麼晚來講解。

vertical-align : baseline |top |middle |bottom 

           

設定或檢索對象内容的垂直對其方式。

vertical-align 不影響塊級元素中的内容對齊，它隻針對于 行内元素或者行内塊元素，特别是行内塊元素， 通常用來控制圖檔和表單等。

圖檔和文字對齊

是以我們知道，我們可以通過vertical-align 控制圖檔和文字的垂直關系了。 預設的圖檔會和文字基線對齊。

去除圖檔底側空白縫隙

有個很重要特性你要記住： 如果一個元素沒有基線，比如圖檔或者表單等行内塊元素，則他的底線會和父級盒子的基線對齊。 這樣會造成一個問題，就是圖檔底側會有一個空白縫隙。

解決的方法就是：

1. 給img vertical-align:middle | top等等。 讓圖檔不要和基線對齊。

   

2. 給img 添加 display：block; 轉換為塊級元素就不會存在問題了。

   

溢出的文字隐藏

word-break:自動換行

normal 使用浏覽器預設的換行規則。

break-all 允許在單詞内換行。

keep-all 隻能在半角空格或連字元處換行。

text-overflow 文字溢出

text-overflow : clip | ellipsis

設定或檢索是否使用一個省略标記（…）标示對象内文本的溢出

clip : 　不顯示省略标記（…），而是簡單的裁切

ellipsis : 　當對象内文本溢出時顯示省略标記（…）

伸縮布局(CSS3)

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

主軸：Flex容器的主軸主要用來配置Flex項目，預設是水準方向

側軸：與主軸垂直的軸稱作側軸，預設是垂直方向的

方向：預設主軸從左向右，側軸預設從上到下

主軸和側軸并不是固定不變的，通過flex-direction可以互換。

Flex布局的文法規範經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為文法規範版本衆多，浏覽器支援不一緻，緻使Flexbox布局使用不多

2、各屬性詳解****

a、flex-direction調整主軸方向（預設為水準方向）

b、justify-content調整主軸對齊

c、align-items調整側軸對齊

d、flex-wrap控制是否換行

e、align-content堆棧（由flex-wrap産生的獨立行）對齊

f、flex-flow是flex-direction、flex-wrap的簡寫形式

g、flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮配置設定

h、order控制子項目的排列順序，正序方式排序，從小到大

此知識點重在了解，要明确找出主軸、側軸、方向，各屬性對應的屬性值

過渡(CSS3)

過渡（transition)是CSS3中具有颠覆性的特征之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。

在CSS3裡使用transition可以實作補間動畫（過渡效果），并且目前元素隻要有“屬性”發生變化時即存在兩種狀态(我們用A和B代指），就可以實作平滑的過渡，為了友善示範采用hover切換兩種狀态，但是并不僅僅局限于hover狀态來實作過渡。

文法格式:

transition: 要過渡的屬性  花費時間  運動曲線  何時開始;

           

屬性	描述	CSS
transition	簡寫屬性，用于在一個屬性中設定四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。預設是 0。	3
transition-timing-function	規定過渡效果的時間曲線。預設是 “ease”。	3
transition-delay	規定過渡效果何時開始。預設是 0。	3

運動曲線示意圖：

img {
  width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;
  transition:transform 0.5s ease-in 0s;
}
img:hover {
  transform:rotate(180deg);
}
           

2D變形(CSS3)

轉換是CSS3中具有颠覆性的特征之一，可以實作元素的位移、旋轉、變形、縮放，甚至支援矩陣方式，配合過渡和即将學習的動畫知識，可以取代大量之前隻能靠Flash才可以實作的效果。

變形轉換 transform

• 移動 translate(x, y)

  

使用translate方法來将文字或圖像在水準方向和垂直方向上分别垂直移動50像素。

可以改變元素的位置，x、y可為負值；

translate(x,y)水準方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
 translateX(x)僅水準方向移動（X軸移動）
 translateY(Y)僅垂直方向移動（Y軸移動）
           

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */
}
           

讓定位的盒子水準居中

• 縮放 scale(x, y)

  

可以對元素進行水準和垂直方向的縮放。該語句使用scale方法使該元素在水準方向上縮小了20%，垂直方向上不縮放。

scale(X,Y)使元素水準方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
scaleX(x)元素僅水準方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）
           

scale()的取值預設的值為1，當值設定為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大于或等于1.01的值，作用是讓元素放大

• 旋轉 rotate(deg)

可以對元素進行旋轉，正值為順時針，負值為逆時針；

1. 當元素旋轉以後，坐标軸也跟着發生的轉變
2. 調整順序可以解決，把旋轉放到最後
3. 注意機關是 deg 度數

案例旋轉撲克牌

body {
  background-color: skyblue;
}
.container {
  width: 100px;
  height: 150px;
  border: 1px solid gray;
  margin: 300px auto;
  position: relative;
}
.container > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: top right;
  /* 添加過渡 */
  transition: all 1s;
}
.container:hover img:nth-child(1) {
  transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
  transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
  transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
  transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
  transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
  transform: rotate(360deg);
}
           

• 傾斜 skew(deg, deg)

  

該執行個體通過skew方法把元素水準方向上傾斜30度，處置方向保持不變。

可以使元素按一定的角度進行傾斜，可為負值，第二個參數不寫預設為0。

5.transform-origin可以調整元素轉換的原點

案例： 菱形照片 三角盒子

3D變形

左手坐标系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐标系，拇指、食指和中指分别代表X、Y、Z軸的正方向。如下圖

加粗樣式

CSS3中的3D坐标系與上述的3D坐标系是有一定差別的，相當于其繞着X軸旋轉了180度，如下圖

rotateX()

就是沿着 x 立體旋轉.

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}
           

rotateY()

沿着y軸進行旋轉

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}
           

rotateZ()

沿着z軸進行旋轉

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
           

透視(perspective)

電腦顯示屏是一個2D平面，圖像之是以具有立體感（3D效果），其實隻是一種視覺呈現，通過透視可以實作此目的。

透視可以将一個2D平面，在轉換的過程當中，呈現3D效果。

注：并非任何情況下需要透視效果，根據開發需要進行設定。

perspective有兩種寫法

1. 作為一個屬性，設定給父元素，作用于所有3D轉換的子元素
2. 作為transform屬性的一個值，做用于元素自身

了解透視距離原理：

開門案例

body {
}
.door {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid gray;
  perspective: 1000px;
  background: url('images/dog.gif') no-repeat center/cover;
  position: relative;
}
.door > div {
  box-sizing: border-box;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  height: 100%;
  background-color: brown;
  transform-origin: left center;
  transition: 1s;
  position: relative;
}
.left::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  right: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.right {
  width: 50%;
  height: 100%;
  float: left;
  background-color: brown;
  transform-origin: right center;
  transition: 1s;
  position: relative;
}
.right::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  left: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.door:hover .left {
  transform: rotateY(-130deg);
}
.door:hover .right {
  transform: rotateY(130deg);
}
           

translateX(x)

僅水準方向移動**（X軸移動）

主要目的實作移動效果

translateY(y)

僅垂直方向移動（Y軸移動）

translateZ(z)

transformZ的直覺表現形式就是大小變化，實質是XY平面相對于視點的遠近變化（說遠近就一定會說到離什麼參照物遠或近，在這裡參照物就是perspective屬性）。比如設定了perspective為200px;那麼transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因為相當于跑到後腦勺去了，我相信你正常情況下，是看不到自己的後腦勺的。

3D呈現（transform-style）

設定内嵌的元素在 3D 空間如何呈現，這些子元素必須為轉換原素。

flat：所有子元素在 2D 平面呈現

preserve-3d：保留3D空間

3D元素建構是指某個圖形是由多個元素構成的，可以給這些元素的父元素設定transform-style: preserve-3d來使其變成一個真正的3D圖形。

一般而言，該聲明應用在3D變換的兄弟元素們的父元素上。

翻轉盒子案例(百度錢包)

body {
  margin: 0;
  padding: 0;
  background-color: #B3C04C;

}

.wallet {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.wallet::before, .wallet::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(./images/bg.png);
  background-repeat: no-repeat;
}

.wallet::before {
  background-position: right top;
  transform: rotateY(180deg);
}

.wallet::after {
  background-position: left top;
  transform: translateZ(2px);
}

.wallet:hover {
  transform: rotateY(180deg);
}
           

動畫(CSS3)

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

文法格式：

關于幾個值，除了名字，動畫時間，延時有嚴格順序要求其它随意r

@keyframes 動畫名稱 {
  from{ 開始位置 }  0%
  to{  結束  }  100%
}
           

animation-iteration-count:infinite;  無限循環播放
animation-play-state:paused;   暫停動畫"
           

小汽車案例

body {
  background: white;
}
img {
  width: 200px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}