文章目录

一：图像
- A、图像作为背景
- B、使用图像标签
二：视频
- 1：视频格式
- 2：video标签
三：音频
- 1：音频格式
- 2：audio标签
四：过渡
- 1：transition-property
- 2：transition-duration
- 3：transition-timing-function
- 4：transition-delay
- 5：transition
五：变形
- 1：矩阵变形--matrix
- 2：扭曲--skew
- 3：平移--translate
- 4：旋转--rotate
- 5：缩放--scale
六：动画
- 1：创建动画
- 2：使用动画
- 3：动画时间属性

在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。比起静态的图片和文字，音频和视频可以为用户提供更直观、丰富的信息。
运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件。下图是各大主流浏览器对video和audio标签的支持情况。

一：图像

A、图像作为背景

使用background-image设置属性。

B、使用图像标签

<img src="图像名" alt="" width="" height="" />

二：视频

1：视频格式

2：video标签

<video src="视频文件名" controls="controls"/>

属性	描述
src	视频文件的全路径名
controls	显示播放控制按钮
autoplay	页面载入后完成后自动播放
loop	循环播放
preload	页面加载时，预播放视频。若使用了autoplay则该属性忽略
poster	视频缓冲不足时加载一个图片显示

三：音频

1：音频格式

2：audio标签

<audio src="" controls="controls"><audio>

属性	描述
controls	显示播放控制按钮
autoplay	页面载入后完成后自动播放
loop	循环播放
preload	页面加载时，预播放音频。若使用了autoplay则该属性忽略

四：过渡

1：transition-property

transition-property属性有下面三个取值：

2：transition-duration

该标签表示过渡时间，以秒或毫秒为单位。

3：transition-timing-function

该标签表示过渡效果的速度曲线，有以下取值：

4：transition-delay

该标签表示过渡效果的延迟时间，以秒或毫秒为单位。

5：transition

transition为复合属性，可以四个同时设置。顺序为：property–>duration–>timing-finction–>delay

五：变形

1：矩阵变形–matrix

语法格式：transform:matrix(1,2,3,1,2,3);
基于X和Y的坐标重新定义元素位置

2：扭曲–skew

语法格式：transform:skew(30deg);
倾斜元素对象，取值为一个度数（如30deg）。

3：平移–translate

语法格式：transform:translate(X,Y);
translateX只对应X轴平移，translateY只对应Y轴平移。

4：旋转–rotate

语法格式：transform:rotate:(30deg);
取值为一个度数，表示与水平线的夹角。

5：缩放–scale

语法格式：transform:scale:(0.8,0.8);
取值为数字，对应缩放到原来大小的多少倍。

六：动画

1：创建动画

  @keyframes  动画名称{@keyframes-selector { css-styles }}

keyframes-selector	指定当前关键帧要应用到整个动画过程中的位置
css-styles	定义执行到当前关键帧时对应的动画状态

keyframes-selector：关键帧选择器，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。

2：使用动画

 animation-name：动画名称；animation-duration：2s;

animation-duration属性设置动画完成所需要的时间，单位可以是秒也可以是毫秒,不能为空。

3：动画时间属性

animation-timing-function	速度曲线
animation-delay	延迟时间，默认为0
animation-direction	是否逆向播放
animation-iteration-count	是否循环播放

完整创建使用动画例子代码：

多媒体嵌入及css高级应用相关推荐

前端菜鸟笔记 Day-5 CSS 高级
文章大纲来源:[Day 5]CSS 高级 CSS 选择器 CSS 拓展 CSS 单位 CSS 参考手册 CSS 选择器内容引用:CSS 选择器元素选择器 html { ... } 复制代码选择器 ...
精通CSS高级Web标准解决方案（第2版）学习笔记
精通CSS 高级Web标准解决方案(第2版) 第一章基础知识一.设计代码格式 1.如果元素有恰当的含义,就应该尽量使用他们. h1,h2 ul,ol和dl strong和em abbr,acron ...
CSS样式（五）- CSS高级
CSS高级块级元素:block element 1. 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外); 2. 两个块级元素连续编辑时,会在页 ...
自学前端第二十九天 CSS高级之细节技巧
第二十九天 css高级细节技巧一.background-color :属性设置元素的背景颜色. 定义和用法 background-color 属性设置元素的背景颜色. 元素背景的范围 backgro ...
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）...
大家好,我是漫步,今天来分享一些比较高级复杂的CSS技巧,都是我们平常常用的,或许对你有所帮助. 设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时 ...
【selenium自动化】04 xpath高级语法css高级语法
xpath高级语法 # /html/body/section/div[1]/div[3]/ul/li[2]/a/i # xpath使用路径表达式来匹配xml文档或html文档中的节点或节点集 # 这个 ...
python selenium元素定位、alert操作、iframe切换、多窗口切换、键盘操作、鼠标操作、js操作、操作本地文件、css高级操作
用了那么久的selenium,整理一篇自己经常用到的标签和方法本文档持续更新优化,喜欢的小伙伴可以点赞收藏一下文章目录 1. 通用元素定位方法,需要引入By. 2. 通用多个元素查找By 3. c ...
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）
设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选择器之常用场景 outline属性的妙用技巧隐藏滚动条或更改滚动条样式纯 ...
精通CSS高级WEB标准解决方案（第三版）笔记
精通CSS高级WEB标准解决方案(第三版)笔记 1 CSS选择符 1.1 类型选择符 1.2 ID选择符 1.3 类选择符 1.4 后代选择符 1.5 子选择符 1.6 相邻同辈选择符 1.6 一般同 ...

多媒体嵌入及css高级应用