snowdream

record and share

0%

发表于 分类于

transform是css3新增的功能，可以用来改变元素的形状和位置，分为2D和3D两种，实际上2D变换可以看做是3D变换的一种特殊形式。

原理

可以联想到计算机图形中的摄像机与物体的空间关系，以及透视投影原理，就能理解3D transform的基本原理了。

mark

透视投影原理
阅读全文 »

发表于 分类于

基本概念

SVG（Scalable Vector Graphics），即可缩放矢量图形，用于描述二维矢量图形；SVG是基于XML制定的，因此遵循XML语法。

坐标系统

SVG的坐标系统跟canvas以及window的一样，都是以左上角为原点，X轴向右变大，Y轴向下变大；

阅读全文 »

发表于 分类于

正则表达式是用于匹配字符串中字符组合的模式。在js中正则表达式即为RegExp对象；

构造正则表达式

方法一：pattern代表一个正则表达式（两个/之间）；flags代表匹配标志，可以由多个标志符组成！这样的一组符号（注意不是字符串）为字面量形式；

1
var expression = / pattern / flags ;

匹配标志：可以单独使用，也可以多个不同的标志组合使用，如：i，gi,gm,gmi等；

标志符 作用
g 表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
i 表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m 表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项
y 执行“粘性”搜索,匹配从目标字符串的当前位置开始（MDN）
阅读全文 »

发表于 分类于

注意：sass有两种文件格式，同时也是两种不同的语法体系，默认使用.scss的语法！

基本操作

变量声明

形式为：$ + 变量名: value;，值可以是css的任意属性值（包括各种颜色）；如：

1
2
3
4
5
$blue: #3399ff;

body{
    backgrond-color: $blue;
}

需要注意的是属性值不必加引号！值还可以定义为列表（list）或映射（map）的形式，形成多值，可以按照索引进行取用，如：

1
2
3
4
5
6
7
8
9
$color: #ff3366 #66ff99 #6699ff;

.div1{
    color: nth($color, 1);
}

.div2{
    color: nth($color, 3);
}

利用nth函数对变量进行指定索引的取值，索引从1开始；（当一些css属性值本身就是多个值用空格断开的时候，是否也可以把其当做列表？）

阅读全文 »