animation: name duration timing-function delay iteration-count direction;（选择器名称，持续时间，速度曲线，延迟时间，播放次数，是否反向播放）

在项目中有对于一个元素无限放大缩小的需求，可以使用动画animation处理，可以自己定义一个选择器

eg: @keyframes circle{

　　0%{

　　　　width: 18%;

　　}

　　100%{

　　　　width: 20%;

　　　　}

}

.guide{

　　animation: move .8s ease 0s infinite alternate；

　　-webkit-animation: move .8s ease 0s infinite alternate；

　　-moz-animation: move .8s ease 0s infinite alternate；

　　-o-animation: move .8s ease 0s infinite alternate；

　　-ms-animation: move .8s ease 0s infinite alternate；

}

 

html5 提供了vedio 元素可以处理视频播放，在ios 和 android 中底图封面的展示是不同的 在vedio加入poster 属性 iphone 中可以看视频有封面，而在android中则有的有封面有的只是展示黑色的背景，对于这个兼容性，可以自己加一个img 来做封面

 

eg:

<video class="single-wrapper" controls loop="" autoplay id="fullId" preload="auto">

<source src="http://o9xrzyznl.bkt.clouddn.com/info1.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

您的浏览器不支持 video 标签。

</video>

 

<div class="guide" style="width: 100%;height: 200px;top: 0;left:0;position: absolute;bottom:0;right:0;margin:auto;" id="InfoId">

<img src="/public/marketing/m/brochure/images/infobg.png?v={

{version}}" alt="" style="width:100%;height:100%;" id="posterInfoId">

</div>

因为vedio 层级关系是最高的，所以首先要吧vedio 的width 设置为1px; 当点击播放的时候，在把vedio 改成你需要的width, 然后把包裹图片的div 隐藏掉。

$('#fullId').css('width', '1px');

$('#posterInfoId').click(function() {

$('#InfoId').hide();

$('#fullId')[0].play();

$('#fullId').css({ 'width': '100%', 'top': 0 });

})

 

在这个页面中，我们有5屏展示，用的是swiper 。在弹出层之后，要防止swiper 滚动，可以使用 swiper 的锁屏方法 

var mySwiper = new Swiper('.swiper-container');

mySwiper.lockSwipes()

对于解锁使用的是

mySwiper.unlockSwipes()

 页面访问二维码：