HTML5新增的多媒体标签
视频<video>
当前<video>
元素支持三种视频格式:尽量使用mp4格式
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | √ | × | × |
Chrome | √ | √ | √ |
Firefox | √ 从Firefox 21 版本开始 Linux系统从Firefox 30 开始 | √ | √ |
Safari | √ | × | × |
Opera | √ 从Opera 25版本开始 | √ | √ |
语法 :
<video src="文件地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</video>
视频<video>
——常见属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) |
controls | controls | 向用户显示播放控件 |
width | pixels(像素) | 设置播放器宽度 |
height | pixels(像素) | 设置播放器高度 |
loop | loop | 播放完是否继续播放该视频,循环播放 |
preload | auto(预先加载) none(不应加载) | 规定是否预先加载视频(如果有了autoplay 就忽略该属性) |
src | url | 视频url地址 |
poster | lmgurl | 加载等待的画面图片 |
muted | muted | 静音播放 |
音频<audio>
浏览器 | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer | √ | × | × |
Chrome | √ | √ | √ |
Firefox | √ | √ | √ |
Safari | √ | √ | × |
Opera | √ | √ | √ |
语法:
<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的浏览器暂不支持 <audio> 标签。
</audio>
音频——常见属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放 |
controls | controls | 向用户显示控件,比如播放按钮 |
loop | loop | 每当音频结束时重新开始放 |
src | url | 要播放音频的地址 |
- 谷歌浏览器把音频和视频的自动播放禁止了
- 可以给视频标签添加muted属性来静音播放视频,音频不可以(可以通过JavaScript解决)
CSS3高级应用
过渡
在不使用 Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
现在经常和 :hover 一起 搭配使用。
语法:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性:想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。
- 花费时间:单位是 秒(必须写单位) 比如 0.5s
- 运动曲线:默认是 ease (可以省略)
- 何时开始:单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)
过渡使用口诀:谁做过渡给谁加
变形
CSS3变形:平移、旋转、缩放、变形
transform:none——不变形
transform-function——变形函数
transform:translate(x-value,y-value)省略第二个参数默认为0
transform:scale(x-axis,y-axis)省略第二个参数默认为第一个值
transform:skew(x-angle,y-angle)角度值,省略第二个默认为0
transform:rotate(angle)角度值
动画
@keyframes 动画名称{
@keyframes-selectors {样式属性(即css-styles)};
}
keyframes-selector:关键帧选择器 值:百分比、from(0%)或者to(100%)
css-styles:
定义执行到当前关键帧时对应的动画状态,由css样式属性进行定义,多个属性之间用分号间隔,不能为空
属性 | 描述 |
---|---|
animation-name | 使用定义好的动画 动画名称 ①none(默认 适用于所有块元素和行内元素)②keyframename |
animation-duration | 动画完成需要的时间(s/ms) |
animation-timing-function | 动画曲线效果 |
animation-delay | 动画延迟属性 |
animation-iteration | 循环播放的次数infinite |
animation-direction | 动画播放的方向 ①normal(默认)②alternate(奇数正向、偶数逆向) |
animation | 复合属性 animation-name animation-duration (必须有) |
精灵图
将若干个图片转换成一个大图片有效地减少服务器接收和发送请求的次数,提高页面的加载速度,于是出现了CSS精灵技术(也称为CSS Sprites、CSS雪碧)
核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。
举例:
王者荣耀精灵图:
淘宝精灵图:
精灵图的使用
使用核心:
- 主要借助于移动背景图片位置来实现,可以使用background-position
- 移动的距离就是这个目标图片的x和y坐标(网页中的坐标有所不同)。
- 一般情况下都是往上往左移动,故数值是负值(注意网页中的坐标:x轴右边是正值,左边是负值,y轴同理)
- 使用精灵图时需要精确测量每个小背景图片的大小和位置
精灵图示例
<style>
.box{
width: 200px;
margin: 0 auto;
border-style: solid;
border-color: black;
overflow: hidden;
}
span {
border-style: solid;
border-color: chartreuse;
}
.iton{
width: 43px;
margin-left: 10px;
height: 44px;
float: left;
background: url("./images/精灵图1.png") no-repeat;
}
/* .span01 {
margin-left: 100px;
margin-top: 30px;
}
.span02 {
margin-top: 20px;
} */
.span01{
background-position: 0 0;
}
.span02{
background-position: -47px 0;
}
.span03{
background-position: -91px 0;
}
.span01:hover{
background-position: 0 -45px;
}
.span02:hover{
background-position: -47px -45px;
}
.span03:hover{
background-position: -91px -45px;
}
</style>
<body>
<div class="box">
<span class="iton span01"></span>
<span class="iton span02"></span>
<span class="iton span03"></span>
</div>
</body>
效果如下: