关闭

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

502人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:57821次
    • 积分:1448
    • 等级:
    • 排名:千里之外
    • 原创:88篇
    • 转载:16篇
    • 译文:0篇
    • 评论:2条