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画布
基本步骤：
- 新建页面：
- 在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）
-
空心文字：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）