HTML5+CSS3-动画、视频、音频、canvas

妖狐艹你老母 2022-08-22 15:13 234阅读 0赞

1、 动画

语法：第一步

@-webkit-keyframes 命名\{

From\{-------初始位置

\}

To\{--------------结束位置

\}

\}

注意：设多个，则用百分比，如：

@-webkit-keyframes 命名\{

0%\{-------初始位置

\}

10%\{--------------中间位置

\}

20%\{--------------中间位置

\}

…………………………….

\}

第二步：调用

.div1\{

Animation：命名 3s;

\}

例子：from和to

<style type="text/css">

.div1\{

width:700px;

height:300px;

animation:donghua3s;

\}

@-webkit-keyframes donghua\{

from\{

background-color:red;

\}

to\{

background-color:yellow;

\}

\}

</style>

例子二：百分比

<style type="text/css">

.div1\{

width:700px;

height:300px;

animation:donghua3s;

\}

@-webkit-keyframes donghua\{

0%\{

background-color:red;

\}

10%\{

background-color:yellow;

\}

20%\{

background-color:green;

\}

\}

</style>

2、 视频

<video src=”文件路径” controls=”controls”(控制器，可简写为controls) autoplay=”autoplay”(自动播放，可简写为autoplay) loop=”loop”(重复次数) poster=”封面图路径” width=”” height=””>

当前浏览器不支持\-------------------------（如果浏览器不支持，直接显示这句话）

</video>

避免其余浏览器不支持：

解决方法：放多个type类型的视频文件，优先级是第一个

<video controls=”controls”(控制器，可简写为controls) autoplay=”autoplay”(自动播放，可简写为autoplay) loop=”loop”(重复次数) poster=”封面图路径” width=”” height=””>

当前浏览器不支持\-------------------------（如果浏览器不支持，直接显示这句话）>

<source src=”视频路径” type=”video/mp4”></source>

<source src=”视频路径” type=”video/flv”></source>

<source src=”视频路径” type=”video/avi”></source>

……………………..

</video>

3、 音频

<audio src=”文件路径” controls=”controls”(控制器，可简写为controls) autoplay=”autoplay”(自动播放，可简写为autoplay) loop=”loop”(重复次数) >----(音频没有宽度和高度和poster设置)

当前浏览器不支持\-------------------------（如果浏览器不支持，直接显示这句话）

</ audio >

避免其余浏览器不支持：

解决方法：放多个type类型的视频文件，优先级是第一个

< audio controls=”controls”(控制器，可简写为controls) autoplay=”autoplay”(自动播放，可简写为autoplay) loop=”loop”(重复次数) >

当前浏览器不支持\-------------------------（如果浏览器不支持，直接显示这句话）>

<source src=”视频路径” type=” audio /mp4”></source>

<source src=”视频路径” type=” audio /mp3”></source>

……………………..

</ audio >

4、 画布,绘制图形

<canvas width=”” height=””></canvas>

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 html画布动画,HTML5画布CANVAS动画。

就剩那两个大半圆不知道怎么用代码表示了，求大神给看下，怎么设置的才可以以自己的圆心来转。实现旋转的八卦。不能上传视频，有个转的过程图，在最下面。 your browser d

柔光的暖阳◎/ 2022年10月06日 11:45/ 0 赞/ 310 阅读

相关 HTML5音频视频

1.video 视频元素属性名称说明 src 视频资源的URL width 视频宽度 height 视频高度 autoplay 设置后，表示立刻开始播放视

冷不防/ 2022年09月24日 13:15/ 0 赞/ 324 阅读

相关 css3音频Loading动画

[下载地址https://yy123.ink/frontDetail/10701![icon-default.png_t_L892][]https://yy123.ink/fr

淡淡的烟草味﹌/ 2022年09月13日 01:58/ 0 赞/ 226 阅读

相关 HTML5 Canvas下雨动画背景

[下载地址][Link 1]Canvas模拟下雨效果，可以当做网页下雨背景，不错的下雨动画特效。 ![1630568787.png][] dd: [Link 1]: h

╰+攻爆jí腚メ/ 2022年09月10日 05:10/ 0 赞/ 275 阅读

相关 HTML5+CSS3-动画、视频、音频、canvas

1、动画语法：第一步 @-webkit-keyframes 命名\{ From\{-------初始位置 \} To\{--------

妖狐艹你老母/ 2022年08月22日 15:13/ 0 赞/ 235 阅读

相关 HTML5&CSS3笔记：CSS3过渡、变形和动画

目前的情况是，如果页面上需要一些动画效果，要么你自己编写 JavaScript，要么使用 JavaScript 框架(如 jQuery)来提高效率。但是，虽然 CSS3 不

比眉伴天荒/ 2022年07月15日 16:54/ 0 赞/ 267 阅读

相关 html5的canvas旋转动画

<!DOCTYPE HTML> <html> <body> <canvas id="myCanv

以你之姓@/ 2022年07月13日 06:16/ 0 赞/ 257 阅读

相关 HTML5——多媒体：audio音频、video视频

1. audio音频标签、video视频标签 ![70][] 2. 特性：（1）autoplay：自动播放；注意：在谷歌浏览器中autoplay有时会失效（其他浏览器没

痛定思痛。/ 2022年05月11日 05:08/ 0 赞/ 702 阅读

相关 HTML5 音频 / 视频 DOM 操作

目录 HTML5 音频 / 视频 DOM 操作 HTML5 Audio/Video 方法 HTML5 Audio/Video 属性 HTML5 Audio/Video

清疚/ 2022年05月09日 13:40/ 0 赞/ 256 阅读

相关 html5之canvas动画

<DOCTYPE html> <html> <head> <title>canvas简单动画</title> <script src="

た入场券/ 2022年03月18日 08:56/ 0 赞/ 349 阅读