使用ionic2制作背景动画效果

在做手机App项目时，有时我们为了让背景更加好看，有时会考虑在引导页面或者登陆页面使用视频来展示效果，这时我们就需要用到ionic2的动画效果展示。
具体操作如下：
首先创建好项目后，我们需要准备自己的视频，将自己的视频文件保存在src/assets/ 下，因为我们打包后会放在assets文件夹下，若放其它目录下，打包后会出现找不到视频的问题。
接下来我们在config.xml文件下 <widget>标签下加入
<preference name="AllowInlineMediaPlayback" value="true"/>
为了利用h5新特性video 中的webkit-playsinline （将视频显示在背景中，制作各种动效）因此需要在config中打开这个特性
之后我们在需要展示视频的页面中写入相应的代码

<ion-content class="home">
  <div class="fullscreen-bg">
    <video class="fullscreen-bg__video" autoplay loop muted webkit-playsinline>
      <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="assets/Cloudy_Road.mp4" type='video/mp4' >
      <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="assets/Cloudy_Road.webm" type="video/webm">
    </video>  <!--  视频的展示-->
  </div>
<!--  悬浮在视频上的文字等-->
  <div class="center animated zoomIn">
    <h1>Beautiful App</h1>
    <h2>Fast. Easy. Cheap.</h2>
  </div>
</ion-content>

之后我们可以写一些css来控制视频的大小与自己想放在视频上的文字等信息代码如下：

.home {
    font-family: 'Lobster', cursive;
    color: white;
    text-shadow: 1px 0 0 gray, -1px 0 0 gray, 0 1px 0 gray, 0 -1px 0 gray,1px 1px gray, -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray;
    h1 {
        font-size: 5rem;
    }
}
.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.center {
    top: 50%;
    transform: translateY(-50%);
    position: absolute !important;
    text-align: center;
    width:100%;
}

通过以上css来控制以上 页面的展示效果，你也可以根据自己的需求自行写css样式来控制

最后我们的视频展示就写好了，我们在页面上就可以看到背景视频的展示效果了