CSS3

完全向後相容，不必更改現有的設計，浏覽器永遠支援CSS2

CSS3中重要的子產品

選擇器	盒模型
動畫	背景和邊框
多列布局	文字特效
使用者界面	2D和3D轉換

CSS3–2D變形

transform:動畫功能，用空格分隔屬性

martrix()	定義矩陣變換：基本X,Y坐标重新定位元素的位置的集合【旋轉，縮放，平移（移動），傾斜】
translate(x,y)	移動元素對象，y如果不寫預設為0. translate（50px，100px）是從左邊元素移動50個像素，并從頂部移動100像素。------teanslateX(),translateY()
scale（x,y）	縮放，包括整數，負數，小數。y如果不寫即和x等比例縮放-----scaleX(),scaleY()
rotate（）	旋轉取值為度數，機關為deg。正數：順時針旋轉，負數：逆時針旋轉
skew（x,y）	傾斜取值為度數，機關為deg。一般不太使用----還可以分為skew X()，skewY()
transition	transition:transform 0.5s; 過渡時間為0.5s

CSS3動畫

原理：将一套CSS樣式逐漸變化為另一套CSS樣式

表格中的數字表示支援該屬性的第一個浏覽器版本号。

CSS3重點CSS3

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支援該字首屬性的第一個浏覽器版本号。

正常浏覽器	animation
火狐浏覽器	-moz-animation; @-moz-keyframes
谷歌浏覽器,safari.	-webkit-animation; @-webkit-keyframes
opera	-webkit-animation; @-webkit-keyframes 或者-o-animation;-o-keyfframes

注意：[email protected] xxx(其中xxx是自己定義的名字)，必須和div{animation-name: xxx;}中名字相對應,否則動畫不會有任何效果

@keyframes 規定動畫

from…to… 或者是0%~100% 是動畫的開始到結束

@keyframes xxx
{
    from {background: red;}
    to {background: yellow;}
}

@keyframes xxx
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

動畫屬性

@keyframes	規定動畫
animation	所有動畫屬性的簡寫屬性
animation-name	規定@keyframes 動畫的名稱
animation-duration	規定一個動畫完成一個周期所花費的秒或毫秒
animation-timing-function	規定動畫的速度曲線，預設為ease(慢快慢)；linear(勻速),ease-in(低速開始),ease-out(低速結束)
animation-fill-mode	規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時）要應用到元素的樣式，預設為none；forwards（在動畫結束後（由 animation-iteration-count 決定），動畫将應用該屬性值。）
animation-delay	規定動畫開始的延時時間
animation-iteratio-count	規定動畫被播放的次數，預設為1；infinite 周期播放
animation-direction	規定動畫是否在下一周期逆向的播放，預設是normal(正常)，reverse(反向),alternate(奇正偶負)，alternate-reverse(奇負偶正)
animation-play-state	規定動畫是否正在運作或暫停，預設為’running’；paused:暫停動畫

<style>
    @keyframes demo1{
        0%{background:red;}
        25%{background:yellow;}
        50%{background:blue;}
        75%{background:purple;}
        100%{background:black;}
    }

    div{
        width: 200px;
        height: 200px;
        border-radius: 100%;

        animation-name: demo1;
        animation-duration: 2s;/*完成一個周期需要2S*/
        animation-timing-function:linear;/*運動軌迹為勻速*/
        animation-direction:reverse;/*反向播放*/
        animation-play-state: running;/*是否正在運作或暫停，預設為'running'*/
        animation-fill-mode:none;
        animation-delay:2s;/*延時2s再進行播放*/
        animation-iteration-count:infinite;/*周期播放，反複播放*/
    }
    </style>

CSS3漸變

分為線性漸變和徑向漸變

線性漸變：linear-gradient

background:linear-gradient(red,blue)	CSS3重點CSS3
background:linear-gradient(to left,red,blue)	CSS3重點CSS3
background:-webkit-linear-gradient(left,red,blue)	和上圖一樣
background: -webkit-linear-gradient(top left,red,yellow);----在火狐加-moz	CSS3重點CSS3
background: linear-gradient(to top left,red,yellow);	和上圖一樣
background: -webkit-linear-gradient(top left,red,rgba(255,0,0,0.1));	CSS3重點CSS3

徑向漸變：radial-gradient

background: radial-gradient(red,yellow,pink);	CSS3重點CSS3
background: radial-gradient(red 30%,yellow 40%,pink 50%);	CSS3重點CSS3
background: -webkit-radial-gradient(left,circle,red,yellow,pink);	CSS3重點CSS3
background: -webkit-repeating-radial-gradient(circle,black,black 10px,white 10px,white 20px);	CSS3重點CSS3

CSS3文字邊框

border-image	設定所有border-image的屬性（預設為None）
border-radius	設定所有四個border-radius的屬性 100%圓，直角變圓角
border-shadow	向方框添加一個或多個陰影,

border-image ： none | [ | ]{1,4} [ / {1,4} ]? [ stretch | repeat | round ]{0,2}

image:設定背景圖檔，url方式

number：切片的寬度，可以設定1~4個值，具體表示為四個方位的值

percentage：邊框的寬度，使用百分比形式

stretch,repeat,round：用來設定邊框背景圖檔的鋪放方式，類似于background-position，其中stretch是拉伸，repeat是重複，round是平鋪，stretch為預設值。

border-image-source	用在邊框的圖檔的路徑。 url
border-image-slice	圖檔邊框向内偏移。 px
border-image-width	圖檔邊框的寬度。
border-image-outset	邊框圖像區域超出邊框的量。
border-image-repeat	圖像邊框是否應平鋪(repeat)、鋪滿(round)或拉伸(stretch)

邊框陰影：box-shadow

h-shadow	水準軸，必須寫	v-shadow	垂直軸，必須寫
spread(一般不再寫)	陰影尺寸	color	陰影顔色
blur	模糊距離	inset	将外部陰影改為内部陰影

CSS3背景

background-size：背景圖檔的尺寸（像素或者百分比）

background-origin:背景圖檔的定位區域

CSS3重點CSS3

padding-box	背景圖像相對于内邊距框來定位。
border-box	背景圖像相對于邊框盒來定位。
content-box	背景圖像相對于内容框來定位。

CSS3文本屬性

屬性	描述
hanqing-punctuation	規定标點字元是否位于線框之外
punctuation-trim	規定是否對标點字元進行修剪
text-align-last	設定或檢索對象中最後一行文本的對齊方式
text-emphasis	向元素的文本應用重點镖旗以及重點抱起的前景色
text-justify	規定當text=align設定為justify時所使用的對齊方法
text-outline	規定文本的輪廓
text-overflow	規定當文本溢出時省略文本的處理方式
text-shadow	向文本添加陰影
text-wrap	規定文本超過指定容器的邊界時是否斷開轉行
word-break	規定非中日韓文本的換行規則
word-wrap	允許對長的不可分割的單詞進行分割并換行到下一行

text-shadow: 5px 5px 5px red; 

word-wrap:break-word;在長單詞或者URL位址内部進行換行  --- normal隻允許在段字點換行，浏覽器保持預設處理

CSS3視訊，音頻

<audio controls="controls" loop="loop" autoplay="autoplay" muted="muted">
	<sourse src=音頻位址" > </sourse>
<audio>

<video ........... 同上>
	<sourse src="視訊位址" ></sourse>
</video>

controls=“controls” :有可控的按鍵

loop=“loop” ：循環播放

autoplay=“autoplay”:自動播放

muted=:“muted”：視訊，音頻加載成功後靜音

this.paly()------播放

this.pause()-------暫停

canvas畫布

基本步驟：

建立頁面：
在JS中擷取元素 demo = document.getelementbyId(…)
使用getContext方法擷取上下文，建立context對象，以允許繪制2D環境----demo.getContext(‘2D’)
JS繪制

1.搭建繪制環境，擷取坐标點

擷取頁面中某個元素的上下左右分别相對于浏覽器視窗位置

<canvas id="cv_1" width="500" height="500"></canvas>
		<div id="div1"></div>
		<div id="div2"></div>
		<script type="text/javascript">
			var div1 = document.getElementById('div1');
			var div2 = document.getElementById('div2');
			
			var cv_1 = document.getElementById('cv_1');
			var can = cv_1.getContext('2d');
			
			var x = cv_1.getBoundingClientRect().left;
			var y = cv_1.getBoundingClientRect().top; 
			
			window.onmousemove= function(event){move(event)}
			function move(event){
				var bdx	= event.clientX - x;
				var bdy	= event.clientY - y;
				
				div1.innerHTML = bdx;
				div2.innerHTML = bdy;
			}
			</script>

2.繪制圖形

填充矩形：fillRect(left,top,height,width)
填充顔色：fillstyle = ‘rgb(200,0,0)’

繪制形狀

栅格（grid)和坐标空間
- 栅格：CANVAS圖像預設被網格覆寫，起點為左上角
- 1單元= 1px 坐标（x,y)

繪制矩形

canvas隻支援一種原生的圓形繪制：矩形，其他圖形都至少需要生成一種路徑（path)

fillRect(x,y,width,height)—實心矩形
fillStyle = ‘’ ‘’填充矩形（不填充的話，預設為黑色）
strokeRect(x,y,width,height)----矩形邊框
clearRect(x,y,width,height)----清除指定區域
圖形的基本元素是路徑：點，線：直線和曲線

繪制步驟

1.beginPath()—建立路徑起始點

2.moveTo(x,y)----畫筆移動的開頭

3.lineTo(x,y)----獲得一個移動的坐标x,y和上一個點自動連接配接

4.closePath()----閉合路徑

5.stroke()----繪制輪廓

6.fill()----填充

填充文字：fillText（“interesting”,x,y）
- CSS3重點CSS3
空心文字：strokeText(“fantesting”,x,y)

*

CSS3重點CSS3

漸變:

can.beginPath();
			var jianbian = can.createLinearGradient(390,180,490,450);
				jianbian.addColorStop(0,'red');
				jianbian.addColorStop(0.3,'yellow');
				jianbian.addColorStop(0.6,'orange');
				jianbian.addColorStop(1,'blue');
				can.fillStyle = jianbian;
			    can.moveTo(390,180);
			    can.lineTo(590,180);
			    can.lineTo(490,450);
			    can.closePath();
			    can.stroke();
			    can.fill();

CSS3重點CSS3

3.繪制圓弧

arc(x,y,r,startAngle,endAngle,anticlockwise);

(x,y)圓心坐标

r:半徑

startAngle：開始的弧度

endAngle：結束的弧度

anticlockwise：繪制方向：true—逆時針 false—順時針

弧度：Math.PT/2 = 90 ---- -Math.PT/2 = -90 = 270

4.繪制不規則圓弧

arcTo(x1,y1,x2,y2,radius)根據給定的控制點和半徑畫一段弧，最後以直線連接配接

5.貝塞爾曲線

二級貝塞爾曲線

起點：.moveTo(x,y)

.quadraticCurveTo(cp1x,cp1y,x,y)

點1的坐标（cp1x,cp1y）無限接近

結尾的坐标（x,y）

三級貝塞爾曲線

起點：.moveTo(x,y)

.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

點1的坐标（cp1x,cp1y）無限接近

點2的坐标（cp2x,cp2y）無限接近

結尾的坐标（x,y）

CSS3重點CSS3

CSS3

CSS3–2D變形

CSS3動畫

@keyframes 規定動畫

動畫屬性

CSS3漸變

CSS3文字邊框

CSS3背景

CSS3文本屬性

CSS3視訊，音頻

canvas畫布

基本步驟：

1.搭建繪制環境，擷取坐标點

2.繪制圖形

繪制形狀

繪制矩形

繪制步驟

3.繪制圓弧

4.繪制不規則圓弧

5.貝塞爾曲線

二級貝塞爾曲線

三級貝塞爾曲線

繼續閱讀

CSS中僞類和僞元素的差別

CSS的僞類與僞元素的差別

css中僞類與僞元素的差別

談談css的僞類和僞元素

僞類與僞元素的差別僞類與僞元素的差別

web前端布局練手項目

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

趕工心得（一）

十大酷炫屌的圖像懸停特效

兩種清除浮動的方法

如何成為一名.net 工程師?

tabpanel 使用問題

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”