HTML5+CSS3实现自定义动画,媒体音频播放,本地存储localStorage和sessionStorage.

animation:动画

动画名称:animation-name:ning;

动画的持续时间:animation-duration;

动画的过渡类型:animation-timing-function:默认为ease;    linear线性过渡   ease平滑过渡   ease-in 由慢到快;ease-out由慢到快   ease-in-out  由慢到快再到慢  

动画延迟时间:animation-delay

动画方向:animation-direction:alternate反方向;normal正方向;

与动画配合使用的是@keyframes和from-to

@keyframes animation{transform:tranlate(20);}

from-to

animation和transform配合会做出一些不错的动画:

媒体音频播放:audio   video

介绍:html4,网页没有显示视频的标准,需要借助插件来实现,插件过多或者插件自身的问题,很容易造成浏览器的假死,造成用户体验不佳。为了丰富web页面,W3C在HTML5中加入了多媒体标签和相关的API,目标就是干掉flash这样的插件。

audio


HTML5+CSS3实现自定义动画,媒体音频播放,本地存储localStorage和sessionStorage._第1张图片

video


HTML5+CSS3实现自定义动画,媒体音频播放,本地存储localStorage和sessionStorage._第2张图片

解决格式问题:浏览器支持的video和audio的格式不同,借助source标签,可以解决格式问题

         

           

             您的浏览器不支持video标签

浏览器本地存储sessionStorage和localStorage

在较高版本的浏览器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStrorage来取代globalStorage。

html中的web Storage包括了两种存储方式:sessionStorage和localStorage。

本地存储的优势:1、跨浏览器 2、解决了请求头常带存储信息的问题 3、解决了4k大小的问题 4、解决了关系型存储。

存储的形式:key-value  键值对

存储的内容:数组、json数据、图片、脚本、样式文件

注意事项:提前判断浏览器是否支持;写数据需要异常处理,避免容量超出,避免把敏感信息存入localStroage;key的唯一值,重复使用,新值会覆盖旧值。

HTML5+CSS3实现自定义动画,媒体音频播放,本地存储localStorage和sessionStorage._第3张图片

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会随之销毁。因此sessionStorage不是一种持久的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

语法:

保存:sessionStorage.setltem(key,value);

           localStorage(key,value);

读取:var v = sessionStorage.getltem(key);

          var v = localStorage.getltem(key);

移除:sessionStorage.removeltem(key);

            localStorage.removeltem(key);

清除:sessionStorage.clear();

           localStorage.clear(

你可能感兴趣的:(HTML5+CSS3实现自定义动画,媒体音频播放,本地存储localStorage和sessionStorage.)