过渡
简写属性,用于在一个属性中设置四个过渡属性。
过渡简写:
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:返回新的字符串,表示用参数字符串从尾部(右侧)补全原字符串。
模板字符串
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,
还可以在字符串中加入变量和表达式。