前端学习笔记----Day11_h5新增标签和Animation动画

h5新增标签

video

• autoplay webm格式

• controls 控制按钮 比如播放按钮

• 宽高只设置一个时,按比例缩放

• preload 页面显示的时候进行预加载, 并预播放. 与autoplay互相冲突

• loop 视频默认播放次数

video兼容性问题

audio音频

• 属性同视频

details 详情和概要标签

• 节省空间 collapse

marquee 跑马灯

• behavier : slide表示到边界暂停 alternate返回最初的位置

• direction

• scrollamout

• loop:-1 和loop效果相同

• 弹幕

/*分隔线 不推荐使用*/

transition 过渡 (需要人为触发)

过渡是css3新增的属性
过渡的三要素
1.有属性发生改变
2.告诉系统那个属性发生改变
transition-property 规定应用过渡的 CSS 属性的名称
3.过渡时间

1.transition-timing-function 属性规定过渡效果的速度曲线。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
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)）

2.简写
transition: property duration timing-function delay;
transition: 过渡属性的名称 过渡时长 过渡速度曲线 延迟
简写可以省略 只有时间是不能省略的 其他的属性都可以省略 如果省略就用默认值,自己设置了就用你设置的值

• 默认 all 0 ease 0

transform 形变

• 位移transform: translate(水平距离, 垂直距离)

• 拉伸缩放transform: scale(水平比例, 垂直比例)--- 如果放大比例相同可以简写为一个值

• 旋转transform: rotate(45deg)------ 正数为顺时针

• 只要旋转就会发生坐标系改变(除了360*n deg)

• transform-origin改变形变的中心点 默认为图片的中心center

1. transform-origin: left top;

2. px

3. 百分比

perspective:300px;

透视效果. 要想实现效果,给父元素添加

training手风琴效果; 照片墙

opacity透明度

• 父元素透明.子元素继承

翻转菜单

• 设置鼠标离开的动画: 将这个元素的:hover去掉就可以设置属性了

• 后面的元素会盖住之前写的翻转菜单, 为了将菜单显示在最上面,将其设置为position: relative; 若有其他定位元素重叠时时再设置其z-index

Animation 动画 不需要人为触发

• 动画三要素

1. 规定动画名称

2. 实现动画

3. 时长

• @keyframe描述动画路径, 后接 animation-name

@keyframe可以设置百分比表示: 某个时间的动作
总执行时间*百分比.

• animation-fill-mode : forwards; 当动画完成后, 保持最后一帧的状态

• backwards; 在动画延迟的时候,保持第一帧的状态

轮播图 重点 面试

• animation: name duration timing-function delay iteration-count direction;
• animation: 动画名称 动画时长 动画运动曲线 动画延迟 动画执行的次数 动画要不要往返;
• 动画名称 动画时长 不能省略其他都可以省略

animation: move 2s linear infinite;

3D

让子元素保留3D效果

//给父元素设置
transform-style: preserve-3d;

1. 帧动画注意属性覆盖问题

transform: rotateY(120deg);

2. 在动画中, 不变的值放在前面, 要变的值放后面

3. 防止滚动条的产生: overflow:hidden;

bd+ 按Tab键生成 border: 1px solid #fff;

background-size

background-size四个属性值比较.png

• cover:

1. 宽度和高度等比拉伸

2. 宽度和高度拉伸到边界(最长的边到边界)

• contain

1. 宽度和高度等比拉伸

2. 宽度或高度拉伸到边界(最短的边到边界)

background-origin

• 形容图片左上角从哪里开始

从大到小 border-box (中间隔着border)> padding-box (中间隔着padding)> content-box

background-clip

• 剪切图片, 浏览器只渲染被选中的区域

多重背景图片

注意事项:

• 先设置的会盖住后设置的

• 如果多张图片设置的属性一样就可以简写

• 控制多张背景图片移动速度方式:

1. 时间相同时,控制移动不同

2. 移动距离相同时,控制动画时长