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

前言

大厂h5开源视频系列

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

该h5分了3部分视频

看视屏学习

第一集

第二集

第三集

欢迎关注以往的文章：

• 大厂h5开源视频系列-京东校招宣传
• 大厂h5开源视频系列-网易云音乐年度总结

线上连接请复制地址查看（直接点击会被重定向的啦） 👉👉 [腾讯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:
        }
      }
    }
  })
复制代码

按道理来讲这个h5没有什么很难的点，可是满满的都是细节和心血，你们写h5的时候可能较少会想到一些花里胡哨的效果，正如咱们所说的，css没有太难理解的代码，只是咱们不知道怎么去玩转它，以后咱们就一块儿手拉手慢慢的来看大厂的开发是怎么666起来的吧！

欢迎关注本系列文章，有问题能够加入👇👇👇群聊和我一块儿讨论。

该h5项目的完整源码会分享到群，声明：该h5代码由腾讯前端出品，我我的手拓学习版本，非商业用途，单纯为了学习交流