大厂h5开源视频系列-腾讯2012世界杯赛程魔方-CSDN博客

前言

大厂h5开源视频系列

是一个专题，前两篇我们一起学习研究了京东，网易前端工程师对于h5的唯美细腻的态度，在这个专题中我们会解析一些酷酷的线上h5,在每一个细节，每一个细腻的过渡背后都能看到前端工程师付出的心血，本篇带来的是 ?? 腾讯2012世界杯赛程魔方

该h5分了3部分视频

看视屏学习

第一集

第二集

第三集

欢迎关注以往的文章：

线上链接请复制地址查看（直接点击会被重定向的啦） ?? [腾讯2012世界杯赛程魔方]（sports.qq.com/isocce/worl…

当我第一次看到这个h5的时候，内心是...挖槽！（无奈老夫没文化，一句卧槽走天下！css的世界太美妙，要就整个花里胡哨）。其实css的世界就像衣服，没有不好看的衣服，只是我们会不会搭配的问题，我们先来看一眼腾讯的前端工程师的精心搭配写出来的魔方效果吧

和往常我们看到的不太一样，该h5使用了一个3D翻转切屏的效果，可谓有点意思，那么我们此次就来剖析一下这个酷酷的h5的实现方式

分解每一屏

第一屏（loading）

世界杯的loading做成这样像滚动的足球一样的设计，先给ui设计师加个鸡腿。这个loading页面的实现其实没有什么太复杂的操作，解析一下就是

一个loading文字( 字体：font-family:Impact )
两个方向和转速都不一样的圆环再带上阴影效果，(当然圆环作者是用50%的border-radius并非图片)
一截一截的颜色只要将盒子边框的颜色设置成不一样就可以实现

那么这两个圆转动的圈圈实现的方式我就直接贴上代码吧，相信小伙伴们一看就明白的

 <!--loading  -->
    <div class="load" style="display:block;">
      <div class="loadImg">
        <div class="loadTxt">loading</div>
        <div class="circle"></div>
        <div class="circle1"></div>
      </div>
    </div>
复制代码

.circle{
  background-color: rgba(0,0,0,0);
  border: 5px solid rgba(251,241,107,0.9);
  opacity: .9;
  border-right-color: rgba(0,0,0,0);
  border-left-color: rgba(0,0,0,0);
  box-shadow: 0 0 30px #fbf49a;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  animation: spinPulse 1s infinite linear;
}

.circle1{
  background-color: transparent;
  border: 5px solid rgba(251,241,107,1);
  opacity: .9;
  border-right-color: rgba(0,0,0,0);
  border-left-color: rgba(0,0,0,0);
  box-shadow: 0 0 15px #fbf49a;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  position: relative;
  top: -50px;
  border-radius: 50%;
  animation: spinoffPulse 1s infinite linear;
}
/* 外层圆 */
@keyframes spinPulse {
  0%{
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px #2187e7;
  }
  50%{
    -webkit-transform: rotate(145deg);
            transform: rotate(145deg);
    opacity: 1;
  }
  100%{
    -webkit-transform: rotate(-320deg);
            transform: rotate(-320deg);
    opacity: 0;
  }
}
/* 内层圆 */
@keyframes spinoffPulse {
  0%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
复制代码

OK吧，分别写两个动画，一些加前缀的兼容性代码没有贴出来，省得看的不清爽。接着才是这个h5最秀的地方

第二屏（赛程首页）

其实已经没有第三屏了，首页出来的那一刻所有屏都出来了，只是......只是出现的位置在后方了啦，来来来，我把底子翻给你看

看到这一首页出来的这一刻，其他页面此时在哪里，在干嘛，看！look！watch！see！

这是我将首页display:none掉的效果，哇！又想说一句卧槽！原来是这样的，其他页面全部都出现在同一屏里面只是悄悄躲在了后面，并被首页遮挡了而已，看这些页面的摆放位置是很讲究的

首先就是将所有的页面都装在同一个容器里，然后将这个容器往Z轴向里平移一个距离

接着再每个页面都给定一个初始的状态，上放下方前方的页面又都让其平移出来

transform: translateZ(333.5px)
复制代码

于是只有一个页面的位置都处在上图（ABCDEFGH）这个页面的位置，也就是往我们的窗口朝里面移了333.5像素

接着给我们需要给最里面的那个页面一个

transform: rotateX(180deg)
复制代码

然后上面的页面再给一个

transform: rotateX(-270deg)
复制代码

下面的页面给一个

transform: rotateX(-90deg)
复制代码

冷静：这里给里面的页面一个绕X轴旋转180度，想象一下一个正方体，我们要让正方体背面（我们看不到的）的那个面以翻转的效果出现到正前方，可不就是需要先把它头尾倒转嘛。。。同理，我们上下两个面需要翻转到正前方保证页面正常显示，可不就是要先给上下页面一个rotateX嘛！

滑屏事件

作者采用了一个第三方的滑屏插件alloyTeam开源的alloyFinger来实现的监听手指的滑动

简单介绍一下alloyFinger的用法，点上方的alloyFinger，到github上就能下载alloy的库，下载到项目中，在我们的项目中引入这个包

<script src="./lib/alloy_finger/alloy_finger.js"></script>
复制代码

 var screen = document.querySelector('.screen'); // 获取页面上当前正前方的那个面（每个面翻转到正前方的时候作者都手动给其加了一个screen的类名）
  var gesture = new AlloyFinger(screen,{ // 执行滑屏事件
    swipe:function(evt){
      var direction = evt.direction;
      var current = getCurrentPage();
      if (direction == "Up") { // 监测手指上滑
        switch (current) {
          case 0:$('.btn1').click();break; // 这里三个是首页的按钮点击事件
          case 1:$('.btn2').click();break; // 点击这三个按钮也执行页面的翻转
          case 2:$('.btn3').click();break; // 嘿嘿
          case 3:$('.screen').attr("class","screen ease");break;
          default:
        }
      }else if (direction == "Down"){ // 监测手指下滑
        switch (current) {
          case 0:return;
          case 1:$('.screen').attr("class","screen ease");break;
          case 2:$('.btn1').click();break;
          case 3:$('.btn2').click();break;
          default:
        }
      }
    }
  })
复制代码