一、CSS3属性
1.1、背景属性
background-clip:border-box|padding-box|content-box;
/*默认值：border-box //背景占据所有区域 （文本内容区域 + padding区域 + border区域）
padding-box//背景占据内容区域+padding区域
content-box//背景只占据内容区域
*/
background-origin:padding-box|border-box|content-box;
/*默认值：padding-box //定位 按照背景图像相对于内边距框来定位 （配合background-clip使用）
border-box //背景图像相对于边框盒来定位
content-box //背景图像相对于内容框来定位
*/
background-size: 100px 100px;
/*默认值：auto
第一个值为宽，第二个值为高，只设置一个则另一个默认为auto
可以是像素 也可以是百分比
*/
1.2、css3变换
transform
ransform-origin: right top;
/*
ransform-origin用来指定元素的转换原点位置
默认情况下，转换的原点在元素的中心,或者是 X 轴和 Y 轴的 50% 处
transform-origin : 数值/百分比/关键字;
两个值：表示 X 轴和 Y 轴
三个值：表示 X 轴、Y 轴和 Z 轴
*/
transform:translate(100px);
/*
translate() 方法将元素从其当前位置移动
移动到 x 坐标和 y 坐标位置参数
translate(x) 或者 translate(x,y),可以是数值、百分比、负数、也可以使用单向位移函数
也可以拆开： translateX(x)
translateY(y)
*/
transform: scale(-1,-1);
/*
scale() 方法用于改变元素的尺寸
根据给定的宽度（X 轴）和高度（Y 轴）
scale(x) 或者 scale(x,y)
一个参数时，第二个参数默认与第一个值相等
默认值为1，取值：
缩小：0 到 1 之间的数值
放大：大于 1 的数值
也可以使用单向缩放函数: scaleX(x)
scaleY(y)
*/
transform: rotateY(90deg);
/*
rotate() 方法用于旋转元素
根据原点，将元素按照顺时针旋转给定的角度
允许负值，元素将逆时针旋转
rotate(deg)
*/
transform：skew(30deg);
/*
skew() 方法用于让元素倾斜
以原点位置，围绕 X 轴和 Y 轴按照一定的角度倾斜
可能会改变元素的形状
skew(x) 或者 skew(x,y)，取值为角度
也可以使用单向倾斜函数：skewX(x)
skewY(y)
*/
transform: translate(100px) rotate(60deg) skew(30deg);
/*可以连着使用*/
1.3、css3过渡动画
/*动画一般直接在一条里写完*/
transition: all 2000ms cubic-bezier(.04,1.84,.95,-0.46) 2s;
/* property duration cubic-bezier delay */
/* 给什么添加动画 持续时间 动画效果（贝塞尔曲线） 延迟时间 */
transition-property:all; /*添加动画的对象 可选值：none all 指定样式属性*/
transition-duration:2s; /*动画持续时间 可选值：2s 2000ms*/
transition-timing-function:cubic-bezier(.04,1.84,.95,-0.46);
/*动画效果 可选值：ease linear ease-out ease-in-out cubic-bezier*/
/*[获取贝塞尔方法工具](http://cubic-bezier.com/) */
transition-delay:2s; /*延迟时间 可选值：2s 2000ms*/
1.4、css3动画
/*animation常见用法：
animation: name duration timing-function delay iteration-count direction fill-mode;
*/
animation: div1move 4s cubic-bezier(.04,1.84,.95,-0.46) 1s 2 alternate;
/*animation关键帧用法：
@keyframes{}
*/
.box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0px;
top:0px;
animation: div1move 4s forwards;
/* infinite 永久运行 */
/* alternate 是否往返 */
/* forwards 留在最后位置，不返回初始位置 */
}
@keyframes div1move
{
0%{
left:0px;
top: 0px;
}
25%{
left:200px;
top:0px;
}
50%{
left:200px;
top:200px;
}
75%{
left:0px;
top:200px;
}
100%{
left:0px;
top: 400px;
}
}
1.5、css3中WEB字体
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
font-weight: bold;
}
div {
font-family: myFirstFont;
}
1.6、css3渐变
1.6.1、线性渐变
background: linear-gradient(to bottom right,red,yellow);
background: linear-gradient(30deg,red,yellow); /*角度*/
background: linear-gradient(red,yellow,green); /*多个颜色节点*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*透明度*/
background: linear-gradient(red 50%,yellow,green); /*颜色占比重*/
/*
第一个参数可指定的参数值如下：
参数值 渐变方向
to bottom 从上往下
to right 从左往右
to top 从下往上
to left 从右往左
第二个参数和第三个参数分别表示渐变的起点色和终点色
repeating-linear-gradient(red, yellow 10%, green 20%);
*/
1.6.2、径向渐变
background: radial-gradient(red,yellow);
background: radial-gradient(red, green, blue); /*多个颜色节点且均匀分布*/
radial-gradient(red 5%, green 15%, blue 60%); /*多个颜色节点不均匀分布*/
background: radial-gradient(70% 50%,#FFFFFF 20%,red); /*size*/
background:radial-gradient(circle at left top,red,yellow); /*设置形状*/
/*
第一个参数和第二个参数分别表示渐变的起点色和终点色
*/
二、Canvas
2.1、基础
<canvas width="600" height="200"></canvas>
<!--canvas的宽高属性不能通过css设置，且宽高不带单位-->
var canvas=document.querySelector("canvas"); //获取元素
var ctx=canvas.getContext("2d"); //接口
//var ctx=canvas.getContext("webgl"); //3D效果
2.2、矩形
ctx.fillStyle = "rgb(200,0,0)"; //填充色
ctx.fillRect (10, 10, 50, 50); //绘制矩形
ctx.strokeRect(50,50,100,100); //绘制矩形边框
ctx.clearRect(10, 10, 50, 50); //清除矩形区域
2.3、样式和颜色
color
ctx.fillStyle="red"; //填充色
ctx.strokeStyle="#000000" //笔触颜色
ctx.globalAlpha=0.5; //透明度
//这里面的起始点和结束点是绝对于canvas的，与绘制的形状的位置是没有关联的
var color=ctx.createLinearGradient(0,0,100,0); //线性渐变色
//偏移值实际就是纯色占比多少，然后再开始过渡
color.addColorStop(0,"#FF0000");
color.addColorStop(0.16,"#FF00FF");
color.addColorStop(0.32,"#0000FF");
color.addColorStop(0.48,"#00FFFF");
color.addColorStop(0.64,"#00FF00");
color.addColorStop(0.80,"#FFFF00");
color.addColorStop(1,"#FF0000");
ctx.fillStyle=color;
ctx.fillRect(0,0,100,100);
//径向渐变色
var color=ctx.createRadialGradient(50,50,0,50,50,50);
color.addColorStop(0,"red");
color.addColorStop(1,"yellow");
ctx.fillStyle=color;
ctx.fillRect(0,0,100,100);
图案填充
var img=new Image();
img.src="./img/IMG_20170529_115817.jpg";
img.addEventListener("load",loadHandler);
function loadHandler(e){
var fill=ctx.createPattern(img,"no-repeat");
ctx.fillStyle=fill;
ctx.fillRect(0,0,200,200);
}
阴影
ctx.fillStyle=fill;
ctx.shadowOffsetX=2; //x偏移
ctx.shadowOffsetY=2; //y偏移
ctx.shadowBlur=2; //模糊度
ctx.shadowColor="#999999"; //模糊色
线条
ctx.lineWidth = 2; //线条粗细
2.4、笔触
ctx.lineCap="butt|round|square"; //线条端点样式，见图一
ctx.lineJoin="round|bevel|miter(默认)"; //两线段连接处(角)所显示的样子，见图二
ctx.beginPath(); //开始画
ctx.moveTo(100,50); //起点
ctx.lineTo(125,100); //画到该位置
ctx.lineTo(75,100);
ctx.closePath(); //连回起始点。形成闭合路径
ctx.stroke(); //绘画出所有路径
ctx.fill(); //填充路径内容区域
ctx.arc(100,100,50,Math.PI/180*0,Math.PI/180*angle,true); //绘制弧线，注意是弧度,true是逆时针，默认不写是顺时针
ctx.moveTo(150,20);
ctx.arcTo(150,50,50,20,30); //连接弧线 arcTo(x1, y1, x2, y2, radius); 见图三
ctx.quadraticCurveTo(101,100,102,50); //二次贝塞尔曲线 见图四
//ctx.quadraticCurveTo(cp1x, cp1y, x, y);
//cp1x,cp1y为一个控制点，x,y为结束点
ctx.bezierCurveTo(125,0,175,0,200,50); //三次贝赛尔曲线 推荐使用PS中的钢笔绘制
//ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
//cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
var path=new Path2D("M50 50 h 50 v 50 h -50 v -50 Z");
ctx.stroke(path);
/*这条路径将先移动到点 (M50 50)
然后再水平移动50个单位(h 50)，然后下移50个单位 (v 50)，
接着左移50个单位 (h -50)，再回到起点处 (z)。*/
扫一扫
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
