CSS层叠样式表进阶
生活随笔
收集整理的這篇文章主要介紹了
CSS层叠样式表进阶
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 進階學習導圖
- CSS3新增選擇器
- CSS3新增盒子屬性
- 圓角邊框屬性
- 邊框圖片屬性
- 盒子陰影屬性
- 盒子背景屬性
- CSS3漸變屬性
- 線性漸變
- 重復線性漸變
- 徑向漸變
- 重復徑向漸變
- CSS3字體與文本效果
- 使用字體
- 文本陰影
- 文本溢出處理
- CSS3 2D/3D變換
- 平移變換
- 旋轉變換
- 旋轉變換
- 傾斜變換
- prespective屬性
- 變換應用案例
- CSS3過渡與動畫效果
- 過渡效果
- 動畫效果
- 圖像濾鏡效果
- CSS3應用案例
- 導航條
- 下拉菜單
- 響應式圖片與媒體查詢
- 關鍵幀動畫
- 旋轉照片墻
- 輪播圖效果
- CSS3新增選擇器
- 新增偽類選擇器
- E:not() 用于匹配除not()中選擇的元素外的所有元素
- E:target用來匹配錨點#指向的文檔中的具體元素，即URL后面跟錨點#，指向文檔內某個具體的元素，那么該元素就會觸發target
- E:first-child表示選擇父元素下的第一個子元素，E:last-child表示選擇父元素 下最后一個子元素
- E:nth-child(n)表示選擇父元素下的第n個子元素，注意在CSS中n從1開始，且n可以是表達式。E:nth-last-child(n)表示從父元素最后一個元素開始計數，反向選擇
- E:only-child表示如果父元素下僅有一個元素，那么該元素被選中
- E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-of-last-type(n),只考慮樣式中定義的子元素類型，不會受到其他元素的影響
- E:empty表示選擇沒有任何子元素的父元素
- 注意點：
- E:checked匹配用戶界面上處于選中狀態的元素E，該選擇器主要用于檢測表單中單選框或者復選框是否為選中狀態
- CSS3新增盒子屬性
- 圓角邊框屬性border-radius
- 注意
- 設置不同個數的屬性值
- 設置橢圓邊框效果
- 圖片的圓角效果：
- 邊框圖片屬性
- 盒子陰影屬性
- 紙質樣式卡片效果
- 圖片卡片陰影效果
- 盒子背景屬性
- background-size 指定背景圖像的大小，
- background-origin屬性指定了背景圖像的起始區域
- CSS3漸變屬性
- 線性漸變
- 指定線性漸變的方向（左右，對角線）
- 指定線性漸變的方向（指定角度）
- 多個顏色過渡節點的線性漸變
- 精確控制顏色過渡位置
- 帶透明度顏色過渡的線性漸變
- 重復線性漸變（repeating-linear-gradient）
- 徑向漸變
- 徑向漸變：
- 顏色節點均勻分布的徑向漸變
- 顏色節點不均勻分布的徑向漸變
- 重復徑向漸變
- CSS3字體與文本屬性
- 字體簡介
- 文本陰影
- 文本溢出處理
- 注意：
- CSS3 2D/3D變換
- 平移變換
- 旋轉變換
- 縮放變換
- 傾斜變換
- 存在傾斜偏差錯位的原因呢，完全是因為字的存在：
- 透視變換（開啟3D）
- 近一步觀察
- 變換應用案例
- CSS3過渡與動畫效果
- 過渡
- 動畫效果
- 圖片過濾效果
- CSS3應用案例
- 水平導航條
- 下拉菜單
- 響應式圖片與媒體查詢
- 響應式圖片
- 媒體查詢
- 注意：
- 關鍵幀同樣大小，動畫
- 注意：
- 旋轉照片墻
- 注意
進階學習導圖
CSS3新增選擇器
CSS3新增盒子屬性
圓角邊框屬性
邊框圖片屬性
盒子陰影屬性
盒子背景屬性
CSS3漸變屬性
線性漸變
重復線性漸變
徑向漸變
重復徑向漸變
CSS3字體與文本效果
使用字體
文本陰影
文本溢出處理
CSS3 2D/3D變換
平移變換
旋轉變換
旋轉變換
傾斜變換
prespective屬性
變換應用案例
CSS3過渡與動畫效果
過渡效果
動畫效果
圖像濾鏡效果
CSS3應用案例
導航條
下拉菜單
響應式圖片與媒體查詢
關鍵幀動畫
旋轉照片墻
輪播圖效果
CSS3新增選擇器
新增偽類選擇器
| E:not() | 匹配除not()中選擇的元素外的所有元素 |
| E:root | 匹配文檔所在的根元素，一般是html元素 |
| E:target | 匹配錨點#指向的文檔中的具體元素 |
| E:first-child | 匹配父元素下的第一個子元素 |
| E:last-child | 匹配父元素下的最后一個子元素 |
| E:only-child | 如果父元素下僅有一個子元素，則匹配 |
| E:nth-child(n) | 匹配父元素下面的第n個子元素，n從1開始且n可以是表達式 |
| E:nth-last-child(n) | 從后向前匹配父元素下面的第n個子元素 |
| E:first-of-type | 在父元素下面尋找第一個匹配的子元素 |
| E:last-of-type | 在父元素下面尋找最后一個匹配的子元素 |
| E:only-of-type | 匹配父元素的所有子元素中唯一的那個子元素 |
| E:nth-of-last-type(n) | 匹配父元素的第n個子元素 |
| E:nth-of-last-type(n) | 從后往前匹配父元素的第n個子元素 |
| E:empty | 匹配沒有任何子元素的元素 |
| E:checked | 匹配用戶界面上處于選中狀態的元素 |
| E:enabled | E:disabled | 用戶選擇input的正常狀態和不可操作狀態 |
| E:read-only | E:read-write | 用戶設置input是否只讀，或者可讀可寫 |
E:not() 用于匹配除not()中選擇的元素外的所有元素
<!DOCTYPE html> <html><head><style>p:not(.p3){background-color: gray;}</style> </head><body><p>p1</p><p>p2</p><p class="p3">p3</p> </body> </html>E:target用來匹配錨點#指向的文檔中的具體元素，即URL后面跟錨點#，指向文檔內某個具體的元素，那么該元素就會觸發target
<!DOCTYPE html> <html><head><style>div{width:100px;height:100px;background-color: gray;}#box1:target{background-color: red;}#box2:target{background-color: red;}</style> </head><body><a href="#box1">box1</a><a href="#box2">box2</a><div id="box1">box1</div><br> <div id="box2">box2</div></body> </html>E:first-child表示選擇父元素下的第一個子元素，E:last-child表示選擇父元素 下最后一個子元素
<!DOCTYPE html> <html><head><style>.div1 p:first-child{background-color: gray;}</style> </head> <body><div class="div1"> <p>p1</p> <p>p2</p> </div> </body> </html> <!DOCTYPE html> <html><head><style>.div1 p:last-child{background-color: gray;}</style> </head> <body><div class="div1"> <p>p1</p> <p>p2</p> </div> </body> </html>E:nth-child(n)表示選擇父元素下的第n個子元素，注意在CSS中n從1開始，且n可以是表達式。E:nth-last-child(n)表示從父元素最后一個元素開始計數，反向選擇
<!DOCTYPE html> <html><head><style>li:nth-child(2n){background-color: gray;}span:nth-child(odd){background-color: gray;}p:nth-child(2){background-color: gray;}</style> </head> <body> <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul> <div><span>span1</span><span>span2</span><span>span3</span><span>span4</span> <span>span5</span><span>span6</span></div> <div><p>p1</p><p>p2</p><p>p3</p></div> </body> </html>
注意：odd翻譯為中文是奇數的，even翻譯為中文是偶數的
等價于
li:nth-child(even){background-color: gray;}E:only-child表示如果父元素下僅有一個元素，那么該元素被選中
<!DOCTYPE html> <html><head><style>p:only-child{background-color: gray;}li:only-child{background-color: gray;}</style> </head> <body> <div><p>p1</p></div> <ul><li>li1</li><li>li2</li></ul> </body> </html>E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-of-last-type(n),只考慮樣式中定義的子元素類型，不會受到其他元素的影響
<!DOCTYPE html> <html><head><style>li:first-of-type{background-color: gray;}span:first-child{background-color: gray;}</style> </head> <body> <ul><p></p><li>1</li><li>2</li><li>3</li></ul> <div> <p>p2</p><span>span1</span><span>span2</span><span>span3</span> </div> </div> </body> </html>E:empty表示選擇沒有任何子元素的父元素
<!DOCTYPE html> <html><head><style>div{border: black 1px solid;width: 100px; height: 100px;}.box:empty{background-color:gray;}</style> </head> <body> <div class="box"></div> <div class="box"> </div> </body> </html>注意點：
box是個類，前面有一個小圓點
E:checked匹配用戶界面上處于選中狀態的元素E，該選擇器主要用于檢測表單中單選框或者復選框是否為選中狀態
<!DOCTYPE html> <html><head><style>input:checked+span::after{content:"這個愛好不錯哦";}</style> </head> <body><h1>愛好</h1> 游泳:<input type="checkbox"><span></span> <br>登山：<input type="checkbox"><span></span> </body> </html>CSS3新增盒子屬性
圓角邊框屬性border-radius
<!DOCTYPE html> <html><head><style>#rcorner{border-radius: 25px;border: 2px solid #333333;padding: 20px;width: 200px;height: 150px;}</style> </head> <body> <p id="rcorner">圓角</p></body> </html>注意
當僅設置一個屬性值時，邊框的四個角具有相同的大小，如果希望單獨設置四個角的圓角效果，可以使用border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius屬性設置圓角值
設置不同個數的屬性值
四個值：第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角
三個值：第一個值為左上角，第二個值為右上角和左下角，第三個值為右下角
兩個值：第一個值為左上角與右下角，第二個值為右上角和左下角
一個值：四個圓角值相同
設置橢圓邊框效果
第一個數值表示水平半徑，第二個數值表示垂直半徑
<!DOCTYPE html> <html><head><style>#rcorner{border-radius: 50px/15px;border: 2px solid #333333;padding: 20px;width: 200px;height: 150px;}</style> </head> <body> <p id="rcorner">橢圓邊框 border-radius:50px/15px</p></body> </html> <!DOCTYPE html> <html><head><style>#rcorner{border-radius: 50%;border: 2px solid #333333;padding: 20px;width: 200px;height: 150px;}</style> </head> <body> <p id="rcorner">橢圓邊框 border-radius:50%</p></body> </html>圖片的圓角效果：
<!DOCTYPE html> <html><head><style>img{margin:10px;width: 200px;height: 150px;display: inline-block;}#rcorner1{border-radius: 10px;}#rcorner2{border-radius: 50%;}</style> </head> <body> <img id="rcorner1" src="01.jpg">border-radius: 10px</img> <img id="rcorner2" src="01.jpg">border-radius: 50%</img> </body> </html>邊框圖片屬性
CSS3中提供了border-image屬性，該屬性使用了圖像填充盒子的邊框
border-image:url(border.png) 30% 35% 40% 30% repeat第一個參數是border-image-source,表示背景圖像的url地址；
第二個參數是border-image-slice,表示圖片剪裁位置；
表示距離圖片上部30%，距離右邊35%，距離底部40%，左邊30%的地方各裁剪一下，形成了9個分離的區域（圖片裁剪九宮格）
border-image:url(border.png) 27 repeat（這里的27指27個像素 ）
第三個參數是border-image-repeat.即邊框圖片的重復性，可取值repeat（重復），round（平鋪），Stretch（拉伸），其中Stretch是默認值
border-image:url(border.png) 27 border-image:url(border.png) 27 repeat border-image:url(border.png) 27 round repeat拉伸示意圖：
平鋪示意圖：
盒子陰影屬性
box-shadow屬性用來定義盒子陰影效果
box-shadow：offset-x ，offset-y，blur，spread，color，inset
| offset-x | 必填項，表示水平陰影的位置，它是相對于x軸的偏移量，取值正負均可，如果是負值則陰影位于元素左邊 |
| offset-y | 同樣是必填項，表示垂直陰影的位置，它是相對于y軸的偏移量，取值正負均可，如果是負值則陰影位于元素上面 |
| blur | 選填項，表示陰影模糊半徑，只能取正值，0位無模糊效果，值越大模糊面積越大，陰影邊緣越模糊 |
| spread | 選填項，表示陰影大小，取值正負均可，取正值時，陰影擴大，取負值時，陰影收縮，默認值為0，此時陰影與元素同樣大 |
| color | 選填項，表示陰影顏色 |
| inset | 選填項，用于將外部投影（默認 outset）改為內部投影，inset陰影在背景之上內容之下，注意inset可以寫在參數的第一個或最后一個，其它位置是無效的 |
紙質樣式卡片效果
<!DOCTYPE html> <html><head><style>div.card{width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;}div.header{background-color: #4CAF50;color: white;padding: 10px;font-size: 40px;}div.container{padding: 10px;}</style> </head> <body> <p>box-shadow 屬性用來可以創建紙質樣式卡片</p> <div class="card"><div class="header"><h1>1</h1></div><div class="container"><p>January 1,2019</p></div> </div> </body> </html>圖片卡片陰影效果
<!DOCTYPE html> <html><head><style>div.polaroid{width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;}div.container{padding: 10px;}</style> </head> <body> <p>box-shadow 屬性用來可以創建卡片樣式：</p> <div class="polaroid"><img src="01.jpg" alt="desert" style="width: 100%"><div class="container"><p>二次元</p></div> </div> </body> </html>盒子背景屬性
backgroud-image屬性，將多張圖片同時設置為背景，不同背景圖片用逗號隔開
<!DOCTYPE html> <html><head><style>#example1{background-image:url(01.jpg),url(02.jpg);background-position: right bottom,left top;background-repeat: no-repeat,repeat;padding: 15px;}</style> </head> <body> <div id="example1"><h1>背景圖片示例</h1><p>在CSS3中，我們既可以在背景中設置多張圖片，也可以指定每一張背景圖片的大小和位置，另外還可以設置漸變效果作為背景圖像。</p> </div> </body> </html>background-size 指定背景圖像的大小，
CSS3以前，背景圖像大小是由圖像的實際大小決定。
background-size：auto | <長度值> | <百分比> | cover | contain
auto，默認值，不改變背景圖片的原始高度和寬度
<長度值>，成對出現，例如80px，60px
<百分比>，例如100% 100%
Cover，覆蓋，背景圖片等比縮放以填滿整個容器
Contain，容納，背景圖片等比縮放至某一邊緊貼容器邊緣
background-origin屬性指定了背景圖像的起始區域
background-origin：border-box|padding-box|content-box當background-attachment屬性設置為fixed時，background-origin屬性會失效
<!DOCTYPE html> <html><head><style>div{border: 1px solid black;padding:35px;background-image:url('02.jpg');background-repeat:no-repeat;background-position:left;}#div1{background-origin:border-box;}#div2{background-origin:content-box;}</style> </head> <body><p>border-box 作為背景圖像的起始區域：</p><div id="div1">背景圖像的坐標原點設置在盒模型border-box區域的左上角</div> <p>content-box作為背景圖像的起始區域：</p> <div id="div2">背景圖像的坐標原點設置在盒模型border-box區域的左上角</div></body> </html>CSS3漸變屬性
漸變效果提供了在兩個或多個指定的顏色之間顯示平穩的過渡。
CSS3定義了三種類型的漸變：一種是線性漸變（Linear Gradients），根據漸變方向的不同，又分為向下，向上，向左，向右，對角等不同方向的線性漸變；第二種漸變是徑向漸變（Radial Gradients），由具有不同半徑的圓的重心進行定義；第三種類型為重復漸變，是由單個漸變重復而成。
由于不同瀏覽器產商在實現漸變標準時，對于漸變方向的定義，角度的定義以及順時針還是逆時針有所不同，所以在使用漸變時需要添加瀏覽器前綴。例如，對于Chrome，Safari瀏覽器，前綴為-webkit-，而火狐瀏覽器Firefox的前綴為-moz-，Opera瀏覽器的前綴為-o-
/*Safari*/background:-webkit-linear-gradient(red,blue) ;/*Opera*/background:-o-linear-gradient(red,blue) ;/*Firefox或者Chrome*/background:-moz-linear-gradient(red,blue) ;/*標準的語法，放在最后*/background:linear-gradient(red,blue) ;線性漸變
background：linear-gradient（direction，color-stop1，color-stop2，……）這里的direction默認是從上往下
<!DOCTYPE html> <html><head><style>#grad1{/*標準的語法，放在最后*/background:linear-gradient(red,blue) ;width: 300px;height: 200px;}</style> </head> <body><div id="grad1"></div></body> </html>指定線性漸變的方向（左右，對角線）
左右:
#grad2{background:-webkit-linear-gradient(left,red,blue);background:-o-linear-gradient(right,red,blue);background:-moz-linear-gradient(right,red,blue);background:linear-gradient(to right,red,blue);} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(to right,red,blue) ;width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>對角線:
#grad3{background:-webkit-linear-gradient(left top,red,blue);background:-o-linear-gradient(bottom right,red,blue);background:-moz-linear-gradient(bottom right,red,blue);background:linear-gradient(to bottom right,red,blue);} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(to bottom right,red,blue) ;width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>指定線性漸變的方向（指定角度）
標準語法圖：
多個顏色過渡節點的線性漸變
#grad5{height: 200px;background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);background:-o-linear-gradient(right,red,orange,yellow,green,blue,indigo,violet);background:-moz-linear-gradient(right,red,orange,yellow,green,blue,indigo,violet);background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>精確控制顏色過渡位置
#grad6{width: 200px; height: 200px;background:-webkit-linear-gradient(90deg,#f0f 0px,#0ff 50px,#fff 100px);background:-o-linear-gradient(0deg,#f0f 0px,#0ff 50px,#fff 100px);background:-moz-linear-gradient(90deg,#f0f 0px,#0ff 50px,#fff 100px);background:linear-gradient(0deg,#f0f 0px,#0ff 50px,#fff 100px);} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(0deg,#f0f 0px,#0ff 50px,#fff 100px);width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>帶透明度顏色過渡的線性漸變
#grad6{width: 200px; height: 200px;background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));background:-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));background:-moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>重復線性漸變（repeating-linear-gradient）
舉例：
background:repeating-linear-gradient(black,gray 10%,white 15%);黑色漸變到灰色從高度的0%至10%，灰色漸變到白色從高度的10%至15%,然后重復這一漸變
徑向漸變
徑向漸變：
background:radial-gradient(shape [size] at position,start-color,………………,last-color);顏色節點均勻分布的徑向漸變
#grad7{width: 200px; height: 200px;background:-webkit-radial-gradient(red,yellow,green);background:-o-radial-gradient(red,yellow,green);background:-moz-radial-gradient(red,yellow,green);background:radial-gradient(red,yellow,green);} <!DOCTYPE html> <html><head><style>#grad1{background:radial-gradient(red,yellow,green);width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>顏色節點不均勻分布的徑向漸變
#grad1{background:radial-gradient(red 5%,yellow 15% ,green 60%);width: 200px;height: 200px; <!DOCTYPE html> <html><head><style>#grad1{background:radial-gradient(red 5%,yellow 15% ,green 60%);width: 200px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>重復徑向漸變
重復徑向漸變用于創建重復的徑向漸變圖像：
background:repeating-radial-gradient(black,white 10%,gray 15%); <!DOCTYPE html> <html><head><style>#grad1{background:repeating-radial-gradient(black,white 10%,gray 15%);width: 600px;height: 150px;}</style> </head> <body> <div id="grad1"></div> </body> </html> <!DOCTYPE html> <html><head><style>#grad1{background:repeating-radial-gradient(red ,yellow 10% ,green 15%);width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>CSS3字體與文本屬性
字體簡介
使用@font-face加載特定的字符，@font-face語句是CSS中的一個功能模塊，是為了解決由于瀏覽者系統中沒有安裝字體導致不能顯示的問題，用于實現網頁字體多樣性
@font-face{font-family:'FZCYS';src:local('FZYaSongA-B-GB');src: url('YourWebFontName.eot');}div{font-family:FZCYS;}font-family的作用是聲明字體變量；src屬性定義字體的下載地址，local表示本機地址，url表示網址，當網頁加載時會自動從服務器上下載字體文件再顯示出來
文本陰影
文本陰影
text-shadow:h-shadow v-shadow blur colorh-shadow水平陰影，v-shadow垂直陰影，它們為必填項，允許為負值；blur為選填項，表示模糊的距離；color為選填項，表示陰影顏色
<!DOCTYPE html> <html><head><style>h1{text-shadow: 2px 2px 8px #333;}</style> </head> <body> <h1>text-shadow with blur effect</h1> </body> </html>文本溢出處理
text-overflow指定應向用戶如何顯示溢出內容
text-overflow:clip|ellipsis|stringclip:裁剪 ellipsis：省略號
<!DOCTYPE html> <html><head><style>#div1{width: 200px;background-color:#87CEEB;overflow: hidden;white-space: nowrap;/*文本不自動換行*/text-overflow: ellipsis;}#div2{width: 200px;background-color:bisque;overflow: hidden;white-space: nowrap;/*文本不自動換行*/text-overflow: clip;}</style> </head> <body> <div id="div1">This is some long text text-overflow</div><br> <div id="div2">This is some long text text-overflow</div></body> </html>注意：
text-overflow和overflow必須結合起來使用
CSS3 2D/3D變換
平移變換
translate（x，y）方法，從當前元素位置沿X軸和Y軸移動相應的位移量
transform:translateX(x) transform:translateX(y) transform:translate(100px,30px);-ms-transform:translate(100px,30px);/*IE 9*/-webkit-transform:translate(100px,30px);/*Safari and Chrome*/ <!DOCTYPE html> <html><head><style>#div1{width: 150px;height: 75px;border:1px dashed silver;}#div2{width: 150px;height: 75px;background-color:#eee;transform:translate(100px,30px);}</style> </head> <body> <div id="div1">原始div</div> <div id="div2">平移后的div</div> </body> </html> <!DOCTYPE html> <html><head><style>#div1{width: 150px;height: 75px;border:1px dashed silver;}#div2{width: 150px;height: 75px;background-color:#eee;transform:translate(100px,30px);}</style> </head> <body> <div id="div1">原始div <div id="div2">平移后的div</div> </div></body> </html>
注意：
div需要嵌套
旋轉變換
rotate（angle）將元素對象相對中心原點進行旋轉，度數為正值為順時針旋轉，負值為逆時針旋轉
-ms-transform:rotate(45deg);/*IE 9*/-webkit-transform:rotate(45deg);/*Safari and Chrome*/transform:rotate(45deg);/*標準語法*/ <!DOCTYPE html> <html><head><style>#div1{margin: 50px;width: 150px;height: 75px;border:1px dashed silver;}#div2{width: 150px;height: 75px;background-color:#eee;transform:rotate(45deg);/*標準語法*/}</style> </head> <body> <div id="div1">原始div <div id="div2">旋轉后的div</div></div></body> </html>
默認是圍繞元素的中心店旋轉，也可以使用 tranform-origin屬性設置旋轉中心點，例如tranform-origin：0 0，使元素的旋轉中心為左上角
縮放變換
scale(x,y)，scaleX(x)，scaleY(y)方法，將元素根據中心原點進行縮放，參數可以是正數，負數或小數，默認值為1，取正數表示方法相應的倍數，取小于1的小數值表示縮小相應的倍數，取負數值不會縮小元素，而是翻轉元素。
-ms-transform:scale(2,1.5);/*IE 9*/-webkit-transform: scale(2,1.5);/*Safari*/transform:scale(2,1.5);/*標準語法*/ <!DOCTYPE html> <html><head><style>#div1{width: 150px;height: 75px;border:1px dashed silver;}#div2{margin: 100px;width: 100px;height: 75px;background-color:#eee;transform:scale(2,1.5);/*標準語法*/}</style> </head> <body> <div id="div1">原始div <div id="div2">縮放后的div</div></div></body> </html>
默認是按照中心原點來進行縮放（和旋轉一樣）
改變縮放的默認點：
transform-origin: 0 0; <!DOCTYPE html> <html><head><style>#div1{margin: 100px;width: 150px;height: 75px;border:1px dashed silver;}#div2{width: 100px;height: 75px;background-color:#eee;transform-origin: 0 0;transform:scale(2,1.5);/*標準語法*/}</style> </head> <body> <div id="div1">原始div <div id="div2">縮放后的div</div></div></body> </html>傾斜變換
skew(angle[,angle])（第一個是x方向傾斜的角度，第二個是y方向傾斜的角度）實現元素對象的傾斜顯示。參數值表示元素在X軸和Y軸方向上傾斜的角度，如果第二個參數為空，則默認為0；參數取正值，表示元素沿水平或垂直方向，按順時針傾斜，否則如果取負值，表示元素按逆時針方向傾斜
<!DOCTYPE html> <html><head><style>#div1{margin: 100px;width: 200px;height: 100px;border:1px dashed silver;}#div2{width: 200px;height: 100px;background-color:#eee;transform:skewX(30deg);/*標準語法*/}</style> </head> <body> <div id="div1">原始div<div id="div2">傾斜后的div</div> </div></body> </html> transform:skewX(0deg);/*標準語法*/存在傾斜偏差錯位的原因呢，完全是因為字的存在：
<!DOCTYPE html> <html><head><style>#div1{margin: 100px;width: 200px;height: 100px;border:1px dashed silver;}#div2{width: 200px;height: 100px;background-color:#eee;transform:skewX(30deg);/*標準語法*/}</style> </head> <body> <div id="div1"><div id="div2"></div> </div></body> </html> transform:skewX(0deg);/*標準語法*/透視變換（開啟3D）
perspective屬性：定義元素舉例視點（人眼）的距離，當元素設置該屬性，其子元素會獲得透視效果，而不是元素本身
黑色實心點是觀察點，即視點，視點到投影平面的距離稱為視距。
translate3d(x,y,z)，translateZ(z)實現元素在三位空間的平移變換
<!DOCTYPE html> <html><head><style>#div1{width: 500px;height: 300px;border:1px solid black;perspective: 600px;}#div2{margin: 100px 0 0 100px;width: 200px;height: 100px;background-image:url(02.jpg);background-size: cover;transform:translateZ(0px);}</style> </head> <body> <div id="div1"><div id="div2"></div> </div></body> </html>
按出F12后，然后按鍵盤↑或↓對translateZ(0px)進行數據內容的增減
然后就可以對透視變換的一種很直觀的展現。
近一步觀察
transform:rotateY(0deg) translateZ(0px);
分別對rotateY和translateZ進行數據內容的改變，這樣會對透視變換有更加深刻的體會
變換應用案例
<!DOCTYPE html> <html><head><style>div{width: 294px;padding:10px 10px 20px 10px ;border:1px solid #BFBFBF;background-color:white ;box-shadow: 2px 2px 3px #aaa;}div.rotate_left{float: left;transform: rotate(7deg);}div.rotate_right{float: left;transform: rotate(-8deg);}</style> </head> <body> <div class="rotate_left"><img src="01.jpg" width="284" height="213" ><p>二刺螈</p> </div> <div class="rotate_right"><img src="02.jpg" width="284" height="213" ><p>二次元</p> </div> </body> </html>CSS3過渡與動畫效果
過渡
過渡transition是元素從一種樣式主鍵改變位另一種的效果
transition: width 2s; -webkit-transition:width 2s; transition:property duration timing-function delay| linear | 動畫從頭到尾的速度是相同的 |
| ease | 默認。動畫以低速開始，然后加快，在結束前變慢 |
| ease-in | 動畫以低速開始 |
| ease-out | 動畫以低速結束 |
| ease-in-out | 動畫以低速開始和結束 |
| cubic-bezier(n,n,n,n) | 在cubic-bezier函數中自己的值。可能的值是從0到1的數值 |
動畫效果
動畫和過渡一樣，是使元素從一種樣式變化為另一種樣式的效果。
CSS3中使用@keyframes規則創建動畫
圖片過濾效果
filter屬性為元素添加可視效果（例如：模糊和飽和度）
<!DOCTYPE html> <html><head><style>img{width: 20%;height: auto;float: left;}.blur{filter: blur(4px);}.brightness{filter: brightness(150%);}.contrast{filter: contrast(150%);}.grayscale{filter: grayscale(100%);}.huerotate{filter: hue-rotate(180deg);}.invert{filter: invert(100%);}.opacity{filter: opacity(90%);}.saturate{filter: saturate(5);}.sepia{filter: sepia(100%);}.shadow{filter: drop-shadow(5px 5px 5px gray);}</style> </head> <body> <img src="02.jpg"> <img class="blur" src="02.jpg"> <img class="brightness" src="02.jpg"> <img class="contrast" src="02.jpg"> <img class="grayscale" src="02.jpg"> <img class="huerotate" src="02.jpg"> <img class="invert" src="02.jpg"> <img class="opacity" src="02.jpg"> <img class="saturate" src="02.jpg"> <img class="sepia" src="02.jpg"> <img class="shadow" src="02.jpg"> </body> </html>
CSS3應用案例
水平導航條
<!DOCTYPE html> <html><head><style>ul{list-style-type:none;margin: 0;padding: 0;overflow: hidden;}a:link,a:visited{display: block;font-weight: bold;color: #FFFFFF;background-color: #98bf21;width:120px;text-align: center;padding:4px;text-decoration: none;text-transform: uppercase;}a:hover,a:active{background-color:#7A991A;}li.fl{float: left;}</style> </head> <body> <p>垂直導航條</p> <ul><li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">Contact</a></li><li><a href="#">About</a></li> </ul> <p>水平導航條</p> <ul><li class="fl"><a href="#">Home</a></li><li class="fl"><a href="#">News</a></li><li class="fl"><a href="#">Contact</a></li><li class="fl"><a href="#">About</a></li> </body> </html>下拉菜單
<!DOCTYPE html> <html><head><style>ul{list-style-type:none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li{float: left;}li a, .dropbtn{display: inline-block;/*即具有行內元素的特點，又具有塊級元素可調節*/color: white;text-align: center;padding:14px 16px;text-decoration:none;}li a.active{background-color: #98bf21;}li a:hover,.dropdown:hover .dropbtn{background-color: #111;}.dropdown{display: inline-block;}.dropdown-content{display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}.dropdown-content a{color: red;padding: 12px 16px;text-decoration:none;display: block;}.dropdown-content a:hover{background-color: #333;}.dropdown:hover .dropdown-content{display: block;}</style> </head> <body> <ul><li><a class="active" href="#">主頁</a></li><li><a href="#">新聞</a></li><div class="dropdown"><a href="#" class="dropbtn">下拉菜單</a><div class="dropdown-content"><a href="#">鏈接1</a><a href="#">鏈接2</a><a href="#">鏈接3</a></div></div></ul> </body> </html>
響應式圖片與媒體查詢
響應式圖片
媒體查詢
- 媒體查詢@media可用于檢測viewport（視窗）的寬度與高度，設備的寬度與高度，朝向（智能手機橫屏，豎屏），分辨率等
- 媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立返回true或false
基本語法：
@media not|only mediatype and(expressions){CSS代碼……;}例子：
@media screen and(min-width:480px){body{background-color:lightgreen;}}在屏幕可是窗口尺寸大于480像素的設備上修改背景顏色
<!DOCTYPE html> <html><head><style>div.img{border: 1px solid #ccc;}div.img:hover{border:1px solid #777}div.img img{width: 100%;height:auto;}div.desc{padding: 15px;text-align: center;}* {box-sizing: border-box;}.responsive{padding:0 6px;float: left;width: 24.9%;}@media screen and (max-width:700px) {.responsive{width: 49.9%;margin: 6px 0;}}@media screen and (max-width:500px) {.responsive{width: 100%;}}</style> </head> <body> <div class="responsive"><div class="img"><img src="02.jpg"><div class="desc">二刺螈</div></div> </div><div class="responsive"><div class="img"><img src="01.jpg"><div class="desc">二次元</div></div> </div><div class="responsive"><div class="img"><img src="03.jpg"><div class="desc">二刺猿</div></div> </div><div class="responsive"><div class="img"><img src="04.jpg"><div class="desc">二刺螈</div></div> </div> </body> </html>
注意：
這里所用到的圖片需要同樣大小，否則沒用。。。。
關鍵幀同樣大小，動畫
<!DOCTYPE html> <html><head><style>@keyframes run{from {left:0px;}to {left: -2400px;}}.wra{position: relative;width: 200px;height: 100px;overflow: hidden;}.box{position:absolute;left: 0;top:0 ;width:2400px;height:100px;background-image: url(horse.png);animation:run 1s steps(12, end) infinite;}</style> </head> <body> <div class="wra"><div class="box"></div> </div> </body> </html>
注意：
animation:run 1s steps(12, end) infinite;這里是steps而不是step
steps（）是一個timing function，允許將動畫或者過渡分割成段，而不是從一種狀態持續到另一種狀態
steps（<number_of_steps>,<direction>）第一個參數是一個正值，指定動畫分割的段數。第二個參數可選，接收start和end兩個值，指定在每個間隔的起點或是終點發生階躍變化，默認為end。start第一幀是動畫結束的時候狀態；end第一幀是動畫開始的時候狀態
旋轉照片墻
<!DOCTYPE html> <html><head><style>* {padding: 0;margin: 0;}@keyframes run{from{transform:rotateY(0deg);}to{transform: rotateY(360deg);}}:root,body{height: 100%;perspective: 1000px;}.wra{position:absolute;width:200px;height:100px;left: calc(50% - 100px);top: calc(50% - 50px);transform-style:preserve-3d;animation:run 30s linear infinite;}.img{position:absolute;width:200px;height:100px;}.img:nth-last-of-type(1){background-image: url(01.jpg);background-size: cover;transform: translateZ(350px);}.img:nth-last-of-type(2){background-image: url(02.jpg);background-size: cover;transform: rotateY(45deg) translateZ(350px);}.img:nth-last-of-type(3){background-image: url(03.jpg);background-size: cover;transform: rotateY(90deg) translateZ(350px);}.img:nth-last-of-type(4){background-image: url(04.jpg);background-size: cover;transform:rotateY(135deg) translateZ(350px);}.img:nth-last-of-type(5){background-image: url(05.jpg);background-size: cover;transform:rotateY(180deg) translateZ(350px);}.img:nth-last-of-type(6){background-image: url(06.jpg);background-size: cover;transform:rotateY(225deg) translateZ(350px);}.img:nth-last-of-type(7){background-image: url(07.jpg);background-size: cover;transform:rotateY(270deg) translateZ(350px);}.img:nth-last-of-type(8){background-image: url(08.jpg);background-size: cover;transform:rotateY(315deg) translateZ(350px);}</style> </head> <body> <div class="wra"><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div> </div> </body> </html>
注意
left: calc(50% - 100px); top: calc(50% - 50px);這里是居中圖片，- 號左右都需要有空格，否則位置無效
總結
以上是生活随笔為你收集整理的CSS层叠样式表进阶的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matlab入门操作
- 下一篇： CSS基本选择器（元素选择器、类选择器、