前端学习笔记----Day11_h5新增标签和Animation
h5新增标签
video
-
autoplay webm格式
-
controls 控制按钮 比如播放按钮
-
宽高只设置一个时,按比例缩放
-
preload 页面显示的时候进行预加载, 并预播放. 与autoplay互相冲突
-
loop 视频默认播放次数
video兼容性问题
<video controls="controls">
<source src="video/sb1.webm" type="video/webm">
<source src="video/sb1.mp4" type="video/mp4">
<source src="video/sb1.ogg" type="video/ogg">
对不起,你的浏览器版本太旧,请升级...
sorry, your browser does not support this video tag...
</video>
audio音频
- 属性同视频
details 详情和概要标签
- 节省空间 collapse
marquee 跑马灯
-
behavier : slide表示到边界暂停 alternate返回最初的位置
-
direction
-
scrollamout
-
loop:-1 和loop效果相同
-
弹幕
/*分隔线 不推荐使用*/
<hr>
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: 过渡属性的名称 过渡时长 过渡速度曲线 延迟
简写可以省略 只有时间是不能省略的 其他的属性都可以省略 如果省略就用默认值,自己设置了就用你设置的值</pre>
- 默认 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
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 50px;
background-color: yellow;
/*
告诉系统要做那个动画
动画的名称自己起
*/
animation-name: move;
/*动画的时长*/
animation-duration: 1s;
/*动画的延迟时间*/
/*animation-delay: 2s;*/
/*规定动画执行的次数
infinite 动画执行无限次
*/
/*animation-iteration-count: 2;*/
/*animation-iteration-count: infinite;*/
animation-iteration-count: 3;
/*规定动画是否反转
normal 默认值。动画应该正常播放。 测试
alternate 动画轮流反向播放
*/
animation-direction: alternate;
}
@keyframes move {
/*在这里面描述动画执行的路径*/
from{
/*margin-left: 0;*/
margin-top: 0;
}
to{
/*margin-left: 300px;*/
margin-top: 400px;
}
}
.box:hover{
/*
动画是否暂停
paused 规定动画已暂停
running 规定动画正在播放。
*/
animation-play-state: paused;
}
</style>
@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. 移动距离相同时,控制动画时长
