【无标题】学习css3部分内容和初次学习ES6！！！

过渡

简写属性，用于在一个属性中设置四个过渡属性。

过渡简写：
transition: css名称/ all， 过渡时间(必须参数，单位s/ms) ，运动曲线 ，开始时间（单位 s/ms）

运动曲线参数值：

值	含义
linear	匀速 默认值。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

格外写法

transition-property	 /*指定CSS属性的name，transition效果*/
transition-duration	  /*transition效果需要指定多少秒或毫秒才能完成*/
transition-timing-function	  /*指定transition效果的转速曲线*/
transition-delay	 /*定义transition效果开始的时候*/
需记！！！！！！！！

3D动画转换

定义：CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸

属性

属性
transform	向元素应用 2D 或 3D 转换。
transform-origin(three-value syntax)	允许你改变被转换元素的位置
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
规定 3D 元素的底部位置	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

3D 转换方法

这里注意perspective(n)是在父级标签上设置！！

CSS3 动画（animation）

含义：动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果

CSS3 @keyframes 规则
1.@keyframes 规则是创建动画。
2.@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式

写法如下

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
        from    代表开始！
        to      代表结束

注意点：当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器，
您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

实例

@keyframes move{
				0% {
					width: 200px;
					background-color: pink;
				}
				25% {
					background-color: aqua;
					height: 500px;
					width: 500px;
				}
				50% {
					background-color: orange;
					height: 500px;
					width: 500px;
				}
				100% {
					background-color: green;
					height: 500px;
					width: 500px;
				}
			}

CSS3的动画属性

属性	含义
@keyframes	规定动画。
animation	所有动画属性的简写属性
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数。默认是 1
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”

animation的八个参数值

animation: 动画的名称 时间 运动曲线 开始时间 
播放次数 是否反向播放 是否运用结束的样式 动画是否运行或暂停

第二个值

linear	动画从头到尾的速度是相同的 匀速。	
ease	默认。动画以低速开始，然后加快，在结束前变慢。	
ease-in	动画以低速开始。	
ease-out	动画以低速结束。	
ease-in-out	动画以低速开始和结束
infinite无限播放

第四个值

infinite无限播放
时间 后面加上单位

第六个值

normal	默认值。动画按正常播放。	
reverse	动画反向播放。	
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。	
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

第七个值

none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性

第八个值

paused	 指定暂停动画	测试
running	 指定正在运行的动画

接下来学习的es6的部分知识

简介：ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准

一，ES6新增加了两个重要的 JavaScript 关键字: let 和 const

两者区别：let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。

let 用法的注意事项

// 1.let 声明的变量只在 let 命令所在的代码块内有效。
// 2.let 只能声明一次 var 可以声明多次:
// 3.不存在变量提升
// 4.不影响作用域
// 注：通常与循环一起使用

const用法的注意事项

// 1.const 声明一个只读的常量，一旦声明，常量的值就不能改变。
// 2.声明必须赋初始值
// 3.标识符一般为大写
// 4.只能声明一次
// 5.块级作用域
// 注：对象和数组修改不会触发const错误

两者都有相同点和不同点！！

结构赋值
含义：他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

剩余运算符|扩展运算符

注：通常写在最后

ES6 字符串

拓展的方法
子串的识别

ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。

includes()：返回布尔值，判断是否找到参数字符串。
// startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
// endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
// startsWith与endsWith方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引（下标0）。
// 查找到返回true,否则返回false
// 不能写正则验证！！！

注意点：

这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。
这三个方法如果传入了正则表达式而不是字符串，会抛出错误。
而 indexOf 和 lastIndexOf 这两个方法，它们会将正则表达式转换为字符串并搜索它。

字符串补全

1.padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
2.padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，
还可以在字符串中加入变量和表达式。

以上就是本周学习的所有内容啦。。