CSS3重点

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样式

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

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

注意：1.@keyframes 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)
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	设置所有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:背景图片的定位区域

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

基本步骤：

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）