技術標籤：css3css

CSS3

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

CSS3中重要的模組

CSS3–2D變形

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

CSS3動畫

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

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

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

注意：[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;}
}
 

動畫屬性

<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)
background:linear-gradient(to left,red,blue)
background:-webkit-linear-gradient(left,red,blue)	和上圖一樣
background: -webkit-linear-gradient(top left,red,yellow);----在火狐加-moz
background: linear-gradient(to top left,red,yellow);	和上圖一樣
background: -webkit-linear-gradient(top left,red,rgba(255,0,0,0.1));

徑向漸變：radial-gradient

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

CSS3文字邊框

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為預設值。

邊框陰影：box-shadow

CSS3背景

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

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

CSS3文字屬性

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畫布

基本步驟：

1. 新建頁面：
2. 在JS中獲取元素 demo = document.getelementbyId(…)
3. 使用getContext方法獲取上下文，建立context物件，以允許繪製2D環境----demo.getContext(‘2D’)
4. 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）

  • 

• 空心文字：strokeText(“fantesting”,x,y)

  *

• 漸變:

  • 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();
    

  • 

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）