关闭

HTML5+CSS3-第六节(动画、视频、音频、canvas)

694人阅读 评论(0) 收藏 举报
分类:

1、 动画

 语法:第一步

@-webkit-keyframes 命名{

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

 

}

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

 

}

}

注意:设多个,则用百分比,如:

@-webkit-keyframes 命名{

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

 

}

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

 

}

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

 

}

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

}

 

第二步:调用

.div1{

         Animation:命名 3s;

}

 

例子:fromto

<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
0
查看评论

css3 做成的音频波动效果

音频波效果 #container{ position:relative; } #container span{ width:5px; ...
  • jjx0224
  • jjx0224
  • 2015-04-28 12:04
  • 3057

CSS3写跳动的音频(柱子)

音频波效果 *{margin:0;padding:0;list-style: none;} body{background-color: #fff;} .demo-music { position: absolute; ...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016-06-12 17:53
  • 483

【HTML5+css3】学习笔记之音频元素和视频元素

六、音频元素和视频元素两个概念: 容器(container)和编解码器(codec)视频容器: 音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放 时,音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、 子标题、字幕等相关信息。主...
  • as763190097
  • as763190097
  • 2015-11-28 21:51
  • 774

CSS3动画animation语音滚动

现的图像动画效果大致是这样的:语音滚动! 【代码效果】 CSS3动画animation语音滚动 html,body { padding: 0; margin: 0; } .rd_item{background-color: #959595;border-radius: 32...
  • weixin_38047955
  • weixin_38047955
  • 2017-04-03 17:23
  • 1266

访微信语音播放动画

  • 2015-03-13 15:55
  • 488KB
  • 下载

HTML5+CSS3实现的列表式音乐播放器特效源码

  • 2015-08-28 14:51
  • 229KB
  • 下载

HTML5+CSS3-第六节(动画、视频、音频、canvas)

1、 动画  语法:第一步 @-webkit-keyframes 命名{          From{-------初始位置   } To{--------------结束位置 ...
  • u012054869
  • u012054869
  • 2016-05-31 20:22
  • 694

html canvas js音频条动画源码 仿电喵的视频风的频谱

canvas js音频条动画源码 仿电喵的视频风的频谱 音频条动画源码 仿电喵的视频风的频谱
  • assfafa
  • assfafa
  • 2017-06-18 17:29
  • 507

HTML5音频与视频实例(带声音的导航、视频与canvas结合、自制播放器)

实例1:带声音的导航   无标题文档 *{ margin:0; padding:0;} #ul1{ width:1000px; height:30px;} #ul1 li{ list-style:none; width:100px;height:30px; b...
  • u013267266
  • u013267266
  • 2016-05-09 16:01
  • 3446

HTML5+CSS3制作音频播放器

  • 2013-06-30 19:46
  • 33KB
  • 下载
    个人资料
    • 访问:88730次
    • 积分:1811
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条