比較全面的CSS3新特性回顧

知識 10-18

CSS3介紹 (1) 新特徵簡介 (2) 查看瀏覽器份額 (3) 偽類 (4) 偽元素
CSS3變形 (1) border-radius (2) border (3) 菱形和平行四邊形 (4) 五角星和六角星 (5) 五邊形和六邊形 (6) 心形和蛋邊形(7) 太極陰陽圖
CSS3色彩 (1) 透明背景圖層 (2) 顏色模式1 (3) 顏色模式2 (4) 線性漸變 (5) 徑向漸變 (6) 重複性漸變 (7) 盒子陰影效果
CSS3過渡 (1) 製作緩慢變長的方形 (2) 過渡的timing-function屬性詳解 (3) 仿天貓類別過渡效果製作 (4) 仿天貓專題過渡效果實例
CSS3動畫 (1) 動畫中的@keyframes關鍵幀講解 (2) 動畫animation符合屬性講解 (3) 動畫綜合實例製作-loading載入動畫製作 (4) Loading動畫效果實例2
CSS3文字排版 (1) 製作發光字，立體字，蘋果字體 (2) 用text-overflow解決文字排版問題 (3) 新的字體單位rem

CSS3 介紹

開始實例

新特徵簡介

強大的CSS選擇器
拋棄圖片的視覺效果
盒模型變化（多列布局和彈性盒模型）
陰影效果
Web字體和web Font 圖標
CSS33過渡與動畫交互效果
媒體查詢

查看瀏覽器份額

點我查看

偽類（Pesudo Classes）

（1）動態偽類選擇器

實例

:link 設置a對象在未被訪問前的樣式表屬性

:visited 設置a對象在其鏈接地址已被訪問過時的樣式表屬性

:hover 設置對象在其滑鼠懸停時的樣式表屬性

:active 設置對象在被用戶激活（在滑鼠點擊與釋放之間發生的事件）時的樣式表屬性

定義CSS時候的順序不同，也會直接導致鏈接顯示的效果不同。原因可能在於瀏覽器解釋CSS時遵循的「就近原則」。正確的順序：a:link、a:visited、a:hover、a:active

解釋：

link:連接平常的狀態
visited:連接被訪問過之後
hover:滑鼠放到連接上的時候
active:連接被按下的時候

（2）結構偽類選擇器

實例

:first-child 選擇某個元素第一個子元素

:last-child 選擇某個元素最後一個子元素

:nth-child() 選擇某個元素的一個或者多個特定的子元素

:nth-last-child 選擇某個元素的一個或者多個特定的子元素，從這個元素的最後一個子元素開始算

:nth-of--type() 選擇指定的元素

:nth-last-of--type() 選擇指定的元素，從元素的最後一個開始計算

:first-of-type 選擇一個上級元素下的第一個同類子元素

:last-of-type 選擇一個上級元素下的最後一個同類子元素

:only-of-type 選擇的是它父元素唯一一個子元素

:empty 選擇的元素裡面沒有內容

偽元素

實例

CSS 偽元素用於向某些選擇設置特殊效果

偽元素作用:first-letter將特殊的樣式添加到文本的首字母:first-line將特殊的樣式添加到文本的首行:before在某些元素之前插入某些內容:after在某些元素之後插入某些內容

CSS3 變形

（1）border-radius

半圓+標準寫法

左上角開始，順時針

實例

演示

比較全面的CSS3新特性回顧

.demo5{
width: 100px;
height: 200px;
border: 1px solid #ccc;
background: #f66;
margin: 50px auto;
border-radius: 0px 100px 100px 0px;
}

（2）border

三角形+對話框

實例

演示

比較全面的CSS3新特性回顧

.triangle{
border-top:100px solid #ccc;
border-bottom:100px solid transparent;
border-right:100px solid transparent;
border-left:100px solid transparent;
width: 0;
height: 0;
margin: 50px auto;
}

實例

演示

比較全面的CSS3新特性回顧

（3）菱形和平行四邊形

實例

演示

比較全面的CSS3新特性回顧

.diamond {
width: 200px;
height: 200px;
background: #6a6;
margin: 100px auto;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

演示

比較全面的CSS3新特性回顧

.parallel{
width: 200px;
height: 200px;
background: #6a6;
margin: 100px auto;
/*skew 傾斜（x, y）*/
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}

（4）五角星和六角星

實例

演示

比較全面的CSS3新特性回顧

比較全面的CSS3新特性回顧

#mogen-david{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid #f66;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
margin: 100px auto;
}
#mogen-david::before{
position: absolute;
content: "";
top: 30px;
left: -50px;
width: 0;
height: 0;
border-top: 100px solid #f66;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

（5）五邊形和六邊形

實例

演示

比較全面的CSS3新特性回顧

.pentagon{
position: relative;
margin: 100px auto;
width: 54px;
height: 0;
border-top: 50px solid #f66;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
}
.pentagon::after{
content: "";
position: absolute;
top: -85px;
left: -17px;
width: 0;
height: 0;
border-bottom: 35px solid #f66;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
}

比較全面的CSS3新特性回顧

.hexagon{
position: relative;
margin: 100px auto;
width: 100px;
height: 50px;
background: #f66;
}
.hexagon::before{
content: "";
top: -25px;
position: absolute;
width: 0;
height: 0;
border-bottom: 25px solid #f66;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon::after{
content: "";
top: 50px;
position: absolute;
width: 0;
height: 0;
border-top: 25px solid #f66;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

（6）心形和蛋邊形

實例

演示

比較全面的CSS3新特性回顧

// 無圓心
.hearts{
position: relative;
margin: 50px auto;
width: 50px;
height: 80px;
background: #f66;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hearts:before{
position: absolute;
content: "";
top: 15px;
left: 15px;
width: 50px;
height: 80px;
background: #f66;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
// 有圓心
.hearts1::before{
position: absolute;
left: 50px;
content: "";
margin: 50px auto;
width: 50px;
height: 80px;
background: #f66;
border-radius: 50px 40px 0 0;
-webkit-transform-origin:0 100% ;
-ms-transform-origin:0 100% ;
-o-transform-origin:0 100% ;
transform-origin:0 100% ;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hearts1::after{
position: absolute;
content: "";
margin: 50px auto;
width: 50px;
height: 80px;
background: #f66;
border-radius: 50px 40px 0 0;
-webkit-transform-origin:100% 100% ;
-ms-transform-origin:100% 100% ;
-o-transform-origin:100% 100% ;
transform-origin:100% 100% ;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

比較全面的CSS3新特性回顧

.ogival{
margin: 100px auto;
width: 60px;
height: 100px;
background: #fa3;
/*(x / y)*/
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

（7）太極陰陽圖

實例

演示

比較全面的CSS3新特性回顧

body{
background: rgb(193, 193, 193);
}
.taiji{
position: relative;
margin: 200px auto;
width: 200px;
height: 400px;
background: #fff;
border-radius: 200px;
border-left: 200px solid #000;
}
.taiji:before{
position: absolute;
left: -100px;
content: "";
width: 100px;
height: 100px;
border:50px solid #fff;
background: #000;
border-radius: 200px;
}
.taiji:after{
position: absolute;
left: -100px;
top: 200px;
content: "";
width: 100px;
height: 100px;
border:50px solid #000;
background: #fff;
border-radius: 200px;
}

CSS3 色彩

透明背景圖層

實例

演示

opacity : value

.show{
margin: 50px auto;
width: 200px;
height: 200px;
padding: 10px;
text-align: center;
opacity: 0.5;
background: #fff;
border-radius: 40px;
-webkit-box-shadow: 3px 3px 5px #888;
box-shadow: 3px 3px 5px #888;
}

顏色模式1

（1）rgba(R, G, B, A)

字母描述R正整數 | 百分數G正整數 | 百分數B正整數 | 百分數AAlpha 透明度 ( 0~1 )

（2）hsla(H, S, L, A)

字母描述HHue(色調) ，紅色：0 | 360，綠色：120，藍色：240。取值範圍：0 ~ 360SSaturation(飽和度)。取值範圍：0.0% ~ 100.0%LLightness(亮度)。取值範圍：0.0% ~ 100.0%AAlpha 透明度 ( 0~1 )

顏色模式2

實例

演示

#main{
margin: 100px auto;
width: 800px;
clear:both;
}
#main li{
list-style: none;
width: 240px;
padding: 1px;
border:1px solid rgba(255,0,0,0);
cursor: pointer;
}
#main li:hover{
border:1px solid rgba(255,0,0,0.8);
}
#main li:hover .img img{
opacity: 0.7;
}
.img img {
width: 240px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.goods_title{
margin: 10px;
height: 50px;
color:#666;
overflow: hidden;
}
.price{
margin: 10px;
color:#f00;
}

線性漸變

實例

演示

語法：linear-gradient( [ <point> || <angle> ,] ? <stop> , <stop> [,<stop>] * )

元素描述<angle>用角度值指定漸變的方向（或角度）。to left (270deg) | to right (90deg) | to top(0deg) | to bottom(180deg) 分別代表漸變方向：右 -> 左，左 -> 右，下 -> 上，上 -> 下<color-stop>用於指定漸變的起止顏色<length>用長度值指定起止色位置。不允許負值<percentage>用百分比指定起止色位置<color>指定顏色

.demo{
margin: 50px auto;
width: 260px;
height: 200px;
border:1px solid black;
background-image: linear-gradient(to left,orange 100px, green 160px,red 260px);
/*或者*/
background-image: linear-gradient(270deg,orange 100px, green 160px,red 260px);
background-image: linear-gradient(to left,orange 20%, green 40%x,red 100%);
/*加前綴*/
background-image: -webkit-linear-gradient(70deg,orange 100px, green 160px,red 260px);
background-image:-o-linear-gradient(70deg,orange 100px, green 160px,red 260px);
background-image:linear-gradient(70deg,orange 100px, green 160px,red 260px);

}

徑向漸變

實例

演示

語法：radial-gradient( [<bg-position> || <angle>, ] ? [ <shape> || <size> ,] ? <color-stop> , <color-stop>[, <color-stop>]* )

/*circle 圓*/
.circle{
background-image: radial-gradient(circle at right,orange,green);
}
/*ellipse 橢圓*/
.ellipse{
background-image: radial-gradient(ellipse at right,orange,green);
}
.circle{
background-image: radial-gradient(circle at right top,orange,green);
}
.ellipse{
background-image: radial-gradient(ellipse at right top,orange,green);
}
/*x*/
.circle{
background-image: radial-gradient(20px circle at center,orange,green);
}
/*x, y*/
.ellipse{
background-image: radial-gradient(20px 30px ellipse at center,orange,green);
}

重複性漸變

實例

演示

.linear{
width: 300px;
height: 300px;
margin: 20px auto;
border:1px solid #ccc;
background-image: repeating-linear-gradient(orange 0px, green 40px,red 80px);
}
.circle{
width: 300px;
height: 300px;
margin: 20px auto;
border-radius: 50%;
border:1px solid #ccc;
background-image: repeating-radial-gradient(orange 0px, green 30px,red 40px);
}

盒子陰影效果

實例

演示

語法：box-shadow : h-shadow v-shadow blur spread color inset;

元素描述必需h-shadow水平陰影的位置。允許負值是v-shadow垂直陰影的位置。允許負值是blur模糊距離否spread陰影的尺寸否color陰影的顏色。否inset將外部陰影（outset）改為內部陰影否

CSS3 過渡

製作緩慢變長的方形

實例

演示

簡寫語法：transition: property duration delay timing-function;

Transition屬性描述transition-property過渡屬性（默認值為all）transition-duration過渡持續時間（默認值為0s）transition-timing-function過渡函數（默認值為ease函數）transition-delay過渡延遲時間（默認值為0s）

.demo{
width: 100px;
height: 100px;
background: pink;
cursor: pointer;
/*過渡時間*/
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
/*過渡屬性*/
-webkit-transition-property: height width;
-o-transition-property: height width;
transition-property: height width;
/*延遲時間*/
-webkit-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
/*過渡函數*/
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
/*簡寫形式*/
-webkit-transition: height width 2s 1s ease;
-o-transition: height width 2s 1s ease;
transition: height width 2s 1s ease;
}
.demo:hover{
/*邊框跟顏色也可以漸變*/
width: 300px;
height: 150px;
background: #f66;
border-radius: 40%;
}

過渡的timing-function屬性詳解

實例

timing-function值描述ease慢 -> 快 -> 慢linear勻速ease-in開始慢結束快ease-out開始快結束慢ease-in-out慢 -> 快 -> 慢step-start無視過渡時間，延遲時間結束後直接變化

仿天貓類別過渡效果製作

實例

演示

.main{
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
font-family: "Microsoft YaHei";
cursor: pointer;
}
.main:hover img {
right: 10px;
}
.m_title{
text-align: left;
font-size:20px;
padding: 20px 10px 10px 10px;
}
.m_content{
color:#11ccaa;
padding: 0 10px 10px 10px;
}
.m_img{
position: relative;
text-align: right;
}
.m_img img{
position: absolute;
width: 100px;
top: 0;
right: 0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

仿天貓專題過渡效果實例

實例

演示

.main{
margin: 10px auto;
width: 230px;
border:1px solid #ccc;
text-align: center;
font-family: "Microsoft YaHei";
cursor: pointer;
}
.m_title{
font-weight: 700;
margin: 5px;
font-size: 20px;
}
.m_content{
color:#666;
margin-bottom: 15px;
}
.main:hover img{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.m_img{
position: relative;
padding: 30px;
}
.m_img::before{
position: absolute;
content: "";
top: 10px;
left: 35px;
width: 160px;
height: 160px;
background: #eee;
border-radius: 50%;
z-index: -1;
}
img{
width: 120px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

CSS3 動畫

動畫中的@keyframes關鍵幀講解

實例

演示

.rect{
width: 100px;
height: 100px;
background: red;
position: fixed;
animation: myMove 2s infinite;
}
@keyframes myMove{
0%{ top:0; left:20%;background:red; }
25%{ top:0; left:80%; background:blue;}
50%{ top:80%; left:80%; background:green;}
75%{ top:80%; left:20%;background:black; }
100%{ top:0; left:20%; background:red;}
}

動畫animation符合屬性講解

實例

/*指定動畫名字*/
-webkit-animation-name: myMove;
-o-animation-name: myMove;
animation-name: myMove;
/*動畫延續時間*/
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
/*動畫運動函數*/
-webkit-animation-timing-function: ease;
-o-animation-timing-function: ease;
animation-timing-function: ease;
/*動畫延遲時間*/
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
/*動畫循環次數(infinite 無限循環)*/
-webkit-animation-iteration-count: 3;
-o-animation-iteration-count: 3;
animation-iteration-count: 3;
/*動畫順序 normal|alternate*/
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;

動畫綜合實例製作-loading載入動畫製作

實例

演示

.spinner{
margin: 100px auto;
width: 60px;
height: 60px;
text-align: center;
font-size:10px;
}
.spinner > div{
background: #67cf22;
height: 100%;
width: 6px;
display: inline-block;
animation:myMove 1.2s infinite ease-in-out;
}
.spinner > div:nth-child(2){
-webkit-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner > div:nth-child(3){
-webkit-animation-delay: -1s;
-o-animation-delay: -1s;
animation-delay: -1s;
}
.spinner > div:nth-child(4){
-webkit-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9;
}
.spinner > div:nth-child(5){
-webkit-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
animation-delay: -0.8;
}
@keyframes myMove{
0%,40%,100%{-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
-o-transform: scaleY(0.4);
transform: scaleY(0.4);}
20%{-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);}
}

Loading動畫效果實例2

實例

演示

.spinner{
width: 60px;
height: 60px;
position: relative;
margin: 100px auto;
}
.spinner > div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #67cf22;
opacity: 0.6;
animation: myLoading 2s infinite ease-in-out;
}
.spinner > div:nth-child(2){
-webkit-animation-delay: -1s;
-o-animation-delay: -1s;
animation-delay: -1s;
}
@keyframes myLoading{
0% ,100%{ transform: scale(0.0); }
50% { transform: scale(1); }
}

CSS3 文字排版

製作發光字，立體字，蘋果字體

實例

演示

語法：text-shadow: h-shadow v-shadow blur color;

比較全面的CSS3新特性回顧

body{
background: #666;
text-align: center;
font: 700 55px "Microsoft YaHei"
}
.font1{
color:#fff;
text-shadow: 2px 2px 3px #000;
}
.font2{
color:#fff;
text-shadow: 0 0 20px red;
}
.font3{
text-shadow: 0 1px 1px #fff;
}
.font4{
color:#fff;
text-shadow: 1px 1px 0px rgba(197,223,248,0.8),
2px 2px 0px rgba(197,223,248,0.8),
3px 3px 0px rgba(197,223,248,0.8),
4px 4px 0px rgba(197,223,248,0.8),
5px 5px 0px rgba(197,223,248,0.8),
6px 6px 0px rgba(197,223,248,0.8);
}

用text-overflow解決文字排版問題

實例

演示

語法：text-overflow:clip|ellipsis|string;

比較全面的CSS3新特性回顧

.demo{
margin: 30px auto;
width: 100px;
padding: 10px;
border:1px solid #ccc;
height: 50px;
/*clip 需要overflow:hidden支持，但是不加clip只要overflow:hidden卻也可以實現效果*/
text-overflow:clip;
overflow: hidden;
}
.demo1{
margin: 30px auto;
width: 100px;
padding: 10px;
border:1px solid #ccc;
height: 50px;

-webkit-text-overflow:ellipsis;
text-overflow:ellipsis;
overflow: hidden;
/*關鍵出現省略號不換行*/
white-space: nowrap;
}

新的字體單位rem

px/em/rem換算地址

演示

元素特點描述px它是一個絕對尺寸單位，是不能變動的像素單位。是顯示屏上顯示的每一個小點，為顯示的最小單位。em1.em的值並不是固定不變的。2.em會繼承父級元素字體的大小rem描述相對於應用在當前元素的字體尺寸，所以它也是相對長度單位，可以變動。一般瀏覽器字體大小默認為16px，則2em == 32pxrem相對於應用<html>根元素的字體尺寸。1. 它是描述相對於當前根元素字體尺寸，除了描述對象與em不同其餘都和em一樣。 2.如果要對網頁根元素字體大小進行修改，需要在<html>標籤中加上stylex="font-size:value"屬性

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※分表分庫時機選擇及策略
※區塊鏈教程之基礎開發通過介面查詢幣種提幣情況bch

TAG:程序員小新人學習 |