大厂h5开源视频系列-京东校招宣传

时间 2019-11-07

标签大厂 h5 开源视频系列京东宣传繁體版

原文原文链接

前言

大厂h5开源视频系列 是一个专题，在这个专题中咱们会解析一些酷酷的线上h5,在每个细节，每个细腻的过渡背后都能看到前端工程师付出的心血，本篇带来的是👉👉 京东校招宣传css

线上连接请戳👉👉京东校招宣传小伙伴们能够自行感觉一下，每一屏的动画加上背景音乐是否是让你不禁自主的 WANNA DAN DAN DAN DAN DANCE， html

就想一心投入京东物流事业（送快递的）行业中。

咱们一块儿学习一下这个h5里面比较有意思的几个部分

学完以后但愿你们早日能去和东哥作兄弟😬前端

loading 部分

每一个h5的loading,为了减小用户焦虑，各家可谓是费劲心思，最多见的有转圈，进度条... css3

分析：

一个长方体上下运动,左右旋转
周围竖线从上往下运动

咱们先构造html结构,一个立方体,如gif咱们只要5个面，底部那个面是不须要的，加上四根竖线：git

<div class="loading" id="J-loading">
    <div class="c-cube-1">
      <div class="c-cube">
        <div class="c-cube__side c-cube__side--front"></div>
        <div class="c-cube__side c-cube__side--back"></div>
        <div class="c-cube__side c-cube__side--right"></div>
        <div class="c-cube__side c-cube__side--left"></div>
        <div class="c-cube__side c-cube__side--top"></div>
      </div>
    </div>
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
    <div class="line line-4"></div>
    <p class="progress-text origin-font" id="J-progress-text">66%</p>
  </div>
复制代码

布局中涉及的难点github

立方体绘制主要仍是运用 transform (rotateY, rotateX, translateZ) 把每一个面平移旋转以后固定在该放的位置
立方体边框绘制:是红色到白色渐变的，关键代码

border: 1px solid;
border-image: linear-gradient(#ff1224, rgba(255, 18, 36, 0)) 2 100%;
border-top: none;
border-bottom: none;
height: 5em;
width: 1em;
复制代码

重要属性 border-image,这个属性能够说是CSS3中的一员大将，还不了解的同窗能够参考bash

鑫旭老师的 border-image 讲解前端工程师

布局完了以后就到了咱们的动画：dom

立方体的上下运动咱们只要控制 translateY方向上的位移就好,animation-direction：alternate 让动画正向反向播放。ide

.loading .c-cube-1 {
  animation: cube-up-down-1 .8s ease-in-out infinite alternate;
}
@keyframes cube-up-down-1 {
  0% {
    transform: translateZ(0)
 } to {
    transform: translate3d(0, -.4rem, 0)
}
}
复制代码

左右旋转,设置的就是 rotateY

.loading .c-cube {
  animation: spin-cube-right 1.2s linear infinite;
}
@keyframes spin-cube-right {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg)
  }
  to {
    transform: rotateX(-33.5deg) rotateY(225deg)
  }
}
复制代码

第一屏 Slogon 页面

html里面放的是一句口号

<div class="slogon">这是一家以速度见长的公司</div>
复制代码

最终显示给用户看的是一个背景图片，那么文字哪里去了呢？这里做者使用了

text-indent: -133.32rem; 
复制代码

将文字缩进到了一个用户看不到的地方，虽然看不到，但有利于 SEO。咱们的 slogn(你很年轻理应更快)，从下往上淡入。注意：animation-fill-mode: both; 就是 forwards, backwards 的结合。

.p1.swiper-slide-active .slogon {
  animation: fadeInUp .5s .3s both;
}
@keyframes fadeInUp{
  0% {
    opacity: 0;
    transform: translate3d(0,100%,0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
复制代码

后续几屏都是以快为主题的场景页面

这几屏有几个特色，一个快字，一个宣传语，可能是布局

里面的数字滚动，做者采用了

odometer 一个数字滚动的css/js库外加一个自定义的字体

这里就不过多介绍

燃这个主题页

分析：

文字从右往左依次淡入
两根立体柱子的倾斜方向运动 html基本结构

<div class="swiper-slide p8">
        <div class="logo-ran">燃</div>
        <div class="text-slogon">
          更快到达你想要的将来
        </div>
        <div class="cube-cnt-2">
          <div class="cube-2">
            <span></span>
          </div>
        </div>
        <div class="cube-cnt-3">
          <div class="cube-3">
            <span></span>
          </div>
        </div>
        <div class="text-title">
          京东2018校园招聘
        </div>
        <div class="text-detail">
          招聘人群： 2018年毕业<br>
          全日制本科、硕士、博士
        </div>
        <div class="logo-jd">京东招聘</div>
</div>
复制代码

第一部分文字从右往左淡入,透明度的变化 + translateX方向的偏移

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(50%,0,0);
}
100% {
    opacity: 1;
    transform: none;
}
}
复制代码

那怎么依次进入呢？

.p8.swiper-slide-active .logo-ran {
  animation: fadeInRight .5s .3s both;
}
.p8.swiper-slide-active .text-slogon {
  animation: fadeInRight .5s .4s both;
}
.p8.swiper-slide-active .text-title {
  animation: fadeInRight .5s .6s both;
}
.p8.swiper-slide-active .text-detail {
  animation: fadeInRight .5s .7s both;
}
复制代码

答案是：animation-delay能够作到

第二部分，立体柱子怎么作的呢？

柱体：是一个背景渐变

background-image: linear-gradient(-90deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
复制代码

HSLA 和 RGBA 同样是两种色彩模式，RGBA指的是“红色、绿色、蓝色、Alpha透明度，HSLA指的是“色调、饱和度、亮度、Alpha透明度” 。

柱顶：是一个正方形旋转 + 倾斜

width: .70667rem;
height: .70667rem;
background-color: #fff;
transform: rotate(51deg) skew(20deg);
复制代码

这里真的惊呆了，感叹做者的构思巧妙，一个障眼法让用户看上去就像立体的柱子。一样咱们柱子倾斜移动也是须要用到 transform：translateY translateX

.cube-cnt-2 {
    animation: cube-cnt-1-anim 1.5s ease-in-out infinite alternate;
}
@keyframes cube-cnt-1-anim {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: translate3d(.10667rem,-.10667rem,0);
    }
}
复制代码