偽元素選擇器（CSS3)

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）

E::first-line 文本第一行；

E::selection 可改變選中文本的樣式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}?
/* 首行特殊樣式 */
p::first-line {
  color: skyblue;
}
?p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after

在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個元素，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結(jié)束";
}

E:after、E:before 在舊版本里是偽元素，CSS3的規(guī)范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。

":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素

之所以被稱為偽元素，是因為他們不是真正的頁面元素，html沒有對應(yīng)的元素，但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現(xiàn)，實際上是css樣式展現(xiàn)的行為，因此被稱為偽元素。是偽元素在html代碼機構(gòu)中的展現(xiàn)，可以看出無法偽元素的結(jié)構(gòu)無法審查

注意

偽元素:before和:after添加的內(nèi)容默認是inline元素**；這個兩個偽元素的content屬性，表示偽元素的內(nèi)容,設(shè)置:before和:after時必須設(shè)置其content屬性，否則偽元素就不起作用。

背景縮放(CSS3)

通過background-size設(shè)置背景圖片的尺寸，就像我們設(shè)置img的尺寸一樣，在移動Web開發(fā)中做屏幕適配應(yīng)用非常廣泛。

其參數(shù)設(shè)置如下：

a) 可以設(shè)置長度單位(px)或百分比（設(shè)置百分比時，參照盒子的寬高）

b) 設(shè)置為cover時，會自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏。我們平時用的cover 最多

c) 設(shè)置為contain會自動調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域。

background-image: url(images/gyt.jpg);
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */

多背景(CSS3)

以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)布局 做法就是 用逗號隔開就好了。

一個元素可以設(shè)置多重背景圖像。

每組屬性間使用逗號分隔。

如果設(shè)置的多重背景圖之間存在著交集（即存在著重疊關(guān)系），前面的背景圖會覆蓋在后面的背景圖之上。

為了避免背景色將圖像蓋住，背景色通常都定義在最后一組上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

凹凸文字

CSS3盒模型

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發(fā)生了改變。

可以分成兩種情況：

1、box-sizing: content-box 盒子大小為 width + padding + border content-box:此值為其默認值，其讓元素維持W3C的標準Box Mode

2、box-sizing: border-box 盒子大小為 width 就是說 padding 和 border 是包含到width里面的

注：上面的標注的width指的是CSS屬性里設(shè)置的width: length，content的值是會自動調(diào)整的。

div:first-child {
            width: 200px;
            height: 200px;
            
            box-sizing: content-box;  /*  就是以前的標準盒模型  w3c */
            padding: 10px;
            border: 15px solid red;
            /* 盒子大小為 width + padding + border   content-box:此值為其默認值，其讓元素維持W3C的標準Box Mode */
        }
        div:last-child {
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            box-sizing: border-box;   /* padding border  不撐開盒子 */
            border: 15px solid red;
            /* margin: 10px; */
            /* 盒子大小為 width    就是說  padding 和 border 是包含到width里面的 */
}

過渡(CSS3)

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

幀動畫：通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

在CSS3里使用transition可以實現(xiàn)補間動畫（過渡效果），并且當(dāng)前元素只要有“屬性”發(fā)生變化時即存在兩種狀態(tài)(我們用A和B代指），就可以實現(xiàn)平滑的過渡，為了方便演示采用hover切換兩種狀態(tài)，但是并不僅僅局限于hover狀態(tài)來實現(xiàn)過渡。

語法格式:

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

如果有多組屬性變化，還是用逗號隔開。

如果想要所有的屬性都變化過渡， 寫一個all 就可以

transition-duration 花費時間 單位是 秒 s 比如 0.5s 這個s單位必須寫 ms 毫秒

運動曲線 默認是 ease

何時開始 默認是 0s 立馬開始

運動曲線示意圖：

div {
            width: 200px;
            height: 100px;
            
            /* transition: 要過渡的屬性  花費時間  運動曲線  何時開始; */
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 過渡的意思  這句話寫到div里面而不是 hover里面 */
  
            
}
div:hover {  /* 鼠標經(jīng)過盒子，我們的寬度變?yōu)?00 */
?
            width: 600px;
            height: 300px
}
?
transition: all 0.6s;  /* 所有屬性都變化用all 就可以了  后面?zhèn)z個屬性可以省略 */

2D變形(CSS3) transform

transform是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、傾斜、縮放，甚至支持矩陣方式，配合過渡和即將學(xué)習(xí)的動畫知識，可以取代大量之前只能靠Flash才可以實現(xiàn)的效果。

變形轉(zhuǎn)換 transform transform 變換 變形的意思 《 transformers 變形金剛》

移動 translate(x, y)

translate 移動平移的意思

translate(50px,50px);

使用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)

transform:scale(0.8,1);

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

scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）

scaleX(x)元素僅水平方向縮放（X軸縮放）

scaleY(y)元素僅垂直方向縮放（Y軸縮放）

scale()的取值默認的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大于或等于1.01的值，作用是讓元素放大

旋轉(zhuǎn) rotate(deg)

可以對元素進行旋轉(zhuǎn)，正值為順時針，負值為逆時針；

transform:rotate(45deg);

注意單位是 deg 度數(shù)

transform-origin可以調(diào)整元素轉(zhuǎn)換變形的原點

div{transform-origin: left top;transform: rotate(45deg); }  /* 改變元素原點到左上角，然后進行順時旋轉(zhuǎn)45度 */    

案例旋轉(zhuǎn)楚喬傳

div {
            width: 250px;
            height: 170px;
            border: 1px solid pink;
            margin: 200px auto;
            position: relative;
?
        }
        div img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: top right;
        
        }
        div:hover img:nth-child(1) {  /* 鼠標經(jīng)過div  第一張圖片旋轉(zhuǎn) */
            transform: rotate(60deg);
        }
        div:hover img:nth-child(2) {  
            transform: rotate(120deg);
        }
        div:hover img:nth-child(3) {  
            transform: rotate(180deg);
        }
        div:hover img:nth-child(4) {  
            transform: rotate(240deg);
        }
        div:hover img:nth-child(5) {  
            transform: rotate(300deg);
        }
        div:hover img:nth-child(6) {  
            transform: rotate(360deg);
        }

傾斜 skew(deg, deg)

transform:skew(30deg,0deg);

該實例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。

可以使元素按一定的角度進行傾斜，可為負值，第二個參數(shù)不寫默認為0。

3D變形(CSS3) transform

2d x y

3d x y z

左手坐標系

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

CSS3中的3D坐標系與上述的3D坐標系是有一定區(qū)別的，相當(dāng)于其繞著X軸旋轉(zhuǎn)了180度，如下圖

坐標：

x左邊是負的，右邊是正的

y 上面是負的， 下面是正的

z 里面是負的， 外面是正的

rotateX()

就是沿著 x 立體旋轉(zhuǎn).

img {
  transition:all 0.5s ease 0s;
}
img:hove {
?
  transform:rotateX(180deg);
}

rotateY()

沿著y軸進行旋轉(zhuǎn)

img {
  transition:all 0.5s ease 0s;
}
img:hove {
?
  transform:rotateX(180deg);
}

rotateZ()

沿著z軸進行旋轉(zhuǎn)

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效果），其實只是一種視覺呈現(xiàn)，通過透視可以實現(xiàn)此目的。

透視可以將一個2D平面，在轉(zhuǎn)換的過程當(dāng)中，呈現(xiàn)3D效果。

透視原理： 近大遠小 。

瀏覽器透視：把近大遠小的所有圖像，透視在屏幕上。

perspective：視距，表示視點距離屏幕的長短。視點，用于模擬透視效果時人眼的位置

注：并非任何情況下需要透視效果，根據(jù)開發(fā)需要進行設(shè)置。

perspective 一般作為一個屬性，設(shè)置給父元素，作用于所有3D轉(zhuǎn)換的子元素

理解透視距離原理：

ateX(x)

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

主要目的實現(xiàn)移動效果

translateY(y)

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

translateZ(z)

transformZ的直觀表現(xiàn)形式就是大小變化，實質(zhì)是XY平面相對于視點的遠近變化（說遠近就一定會說到離什么參照物遠或近，在這里參照物就是perspective屬性）。比如設(shè)置了perspective為200px;那么transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因為相當(dāng)于跑到后腦勺去了，我相信你正常情況下，是看不到自己的后腦勺的。

translate3d(x,y,z)

[注意]其中，x和y可以是長度值，也可以是百分比，百分比是相對于其本身元素水平方向的寬度和垂直方向的高度和；z只能設(shè)置長度值

開門案例

body {
}
.door {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid gray;
  perspective: 1000px;
  background: url(images/dog.gif) no-repeat cover;
  position: relative;
}
.door > div {
  box-sizing: border-box;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  height: 100%;
  
  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);
}

backface-visibility

backface-visibility 屬性定義當(dāng)元素不面向屏幕時是否可見。

翻轉(zhuǎn)盒子案例

div {
            width: 224px;
            height: 224px;
            margin: 100px auto;
            position: relative;
        }
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden; /* 不是正面對象屏幕，就隱藏 */
        }
        div:hover img {
            transform: rotateY(180deg);
}

動畫(CSS3) animation

動畫是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復(fù)雜的動畫效果。

語法格式：

animation:動畫名稱 動畫時間 運動曲線  何時開始  播放次數(shù)  是否反方向;

關(guān)于幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意r

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

animation-iteration-count:infinite;  無限循環(huán)播放

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);
  }
}

伸縮布局(CSS3)

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

主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向

側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認是垂直方向的

方向：默認主軸從左向右，側(cè)軸默認從上到下

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

Flex布局的語法規(guī)范經(jīng)過幾年發(fā)生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為語法規(guī)范版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多

2、各屬性詳解****

1.flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配

min-width 最小值 min-width: 280px 最小寬度 不能小于 280

max-width: 1280px 最大寬度 不能大于 1280

2.flex-direction調(diào)整主軸方向（默認為水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

http://m.ctrip.com/html5/ 攜程網(wǎng)手機端地址

3、justify-content調(diào)整主軸對齊（水平對齊）

子盒子如何在父盒子里面水平對齊

4、align-items調(diào)整側(cè)軸對齊（垂直對齊）

子盒子如何在父盒子里面垂直對齊（單行）

5、flex-wrap控制是否換行

當(dāng)我們子盒子內(nèi)容寬度多于父盒子的時候如何處理

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

flex-flow: flex-direction  flex-wrap;  

白話記： flex-flow: 排列方向 換不換行;

兩個中間用空格

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   這兩句話等價于下面的這句話*/
flex-flow: column wrap;  /* 兩者的綜合 */

7、align-content堆棧（由flex-wrap產(chǎn)生的獨立行）多行垂直對齊方式齊

align-content是針對flex容器里面多軸(多行)的情況,align-items是針對一行的情況進行排列。

必須對父元素設(shè)置自由盒屬性display:flex;，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行，flex-wrap:wrap;這樣這個屬性的設(shè)置才會起作用。

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

用css 來控制盒子的前后順序。 用order 就可以

用整數(shù)值來定義排列順序，數(shù)值小的排在前面。可以為負值。 默認值是 0

order: 1;

此知識點重在理解，要明確找出主軸、側(cè)軸、方向，各屬性對應(yīng)的屬性值

文字陰影(CSS3)

以后我們可以給我們的文字添加陰影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

前兩項是必須寫的。 后兩項可以選寫

• 上一篇：IIS搭建Web服務(wù)器，外網(wǎng)可以訪問，但無法加載視頻
• 下一篇：CSS超全筆記（適合新手入門）

番茄西紅柿

男|高級講師

我要關(guān)注 我要私信

TA的文章

閱讀更多

• tensor

  閱讀 713·2023-04-25 19:43

• Windows 下安裝 XGBoost

  閱讀 3910·2021-11-30 14:52

• Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

  閱讀 3784·2021-11-30 14:52

• VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區(qū)

  閱讀 3852·2021-11-29 11:00

• 百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

  閱讀 3783·2021-11-29 11:00

• Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

  閱讀 3869·2021-11-29 11:00

• 301重定向怎么做?301重定向設(shè)置方法有幾種

  閱讀 3558·2021-11-29 11:00

• wordpress網(wǎng)站重定向次數(shù)過多的解決方法

  閱讀 6105·2021-11-29 11:00

最新活動