实习day07

实习day07

过渡(CSS3)

**过渡（transition)**是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

2D变形(CSS3) transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

移动 translate(x, y)

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

缩放 scale(x, y)

对元素进行水平或垂直方向的缩放

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform-origin

可以调整元素转换变形的原点

倾斜 skew

3D变形(CSS3) transform

• rotateX() 沿着 x 立体旋转.
• rotateY()沿着y轴进行旋转
• rotateZ()沿着z轴进行旋转

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

• 透视原理： 近大远小 。
• 浏览器透视：把近大远小的所有图像，透视在屏幕上。
• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

• translateX(x)水平方向移动
• translateY(y)垂直方向移动
• translateZ(z)前后移动，直观的表现就是大小变化
• translate3d(x,y,z)[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

JavaScript

JavaScript是行为标准

JavaScript最初的目的

为了表单的验证操作

JavaScript现在的意义(应用场景)

1. 网页特效
2. 服务端开发(Node.js)
3. 命令行工具(Node.js)
4. 控制硬件-物联网(Ruff)
5. 游戏开发(cocos2d-js)
6. 手机App(Cordova)
7. 桌面应用程序(Electorn)

JavaScript的组成

1. ECMAscript
2. DOM
3. BOM
   ECMAScript - JavaScript的核心 （语法）

ECMA 欧洲计算机制造联合会

网景：javascript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准,与具体实现无关

html不算变成，js算，因为逻辑结构

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

JavaScript同CSS一样有三种书写位置

• 写在行内
• 写在script标签中
• 写在外部js文件中，在页面引入

变量

• 什么是变量

  变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

• 为什么要使用变量

  使用变量可以方便的获取或·者修改内存中的数据

如何使用变量

var声明变量

var age;

变量的赋值

var age;
age = 18;

同时声明多个变量

var age, name, sex;
age = 10;
name = 'zs';

同时声明多个变量并赋值

var age = 10, name = 'zs';

变量的命名规则和规范

• 规则-必须遵守的，不遵守会报错**
  • 由字母，数字，下划线，$符号组成，不能以数字开头
  • 不能是关键字 和保留字
  • 区分大小写
• 规范：不遵守不报错
  • 变量名一定要有意义
  • 驼峰命名法，userName，首字母小写，后面单词的首字母大写

数据类型

简单数据类型

Number、String、Boolean、Undefined、Null

Number：

• 整数
• 小数
• 特殊值NaN

String:字符串

Boolean:

• true
• false

Undefind:未定义类型（Undefind）只有一个值Undefind。
Nul:空类型（Null）只有一个值null，空对象。

JavaScript和大部分语言有相同的店:

• 数据类型可以转换
• 操作符优先级等
• 表达式和语句

if() else ; switch () case ； while和do while	;for() 循环；continue和break；