祝大家新年快乐！教你做一个【虎年如意】的网站～

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”

前言

春节即将来到，作为铲屎官的作者，决定为这个新年奉献出自己的一份力量，发挥自己的特长，为大家出一个吉祥如意的页面，聊表心意，祝大家新年快乐鸭～～～

内容

这个页面是这样的

原版是网上找到的psd，作者进行了处理，我们可以对页面进行一下分割，分为：灯笼、门、背景、虎年如意、小脑斧、树和底部的花纹以及烟花爆炸💥。

为了快速的出页面，作者直接使用了开源的静态页面的一个技术选型：gatsby.js。

这个技术方案是基于react搭建好了的一个静态网页系统，默认graphQl来进行数据交换，底层架构师React，拥有react所有方便的操作，可以方便的将组件抽象出来，同时也延伸出来了一部分的生态，有兴趣的小伙伴可以自己研究一下，不是很复杂。

这次的页面比较简单，我们就从零开始先拉取一个项目。

首先，我们要在电脑上面安装一个gatsby-cli(直奔主题，我们的目的是快速复刻页面)

npm install -g gatsby-cli

然后创建一个gatsby项目

gatsby new happy-year

cd happy-year

npm install || yarm install

这时候项目就被运行了起来，运行起来的时候长这个样子

然后我们对项目进行清理，在src/pages中只留下index.js（核心诉求是删除不需要的文件，实现者自由发挥，留下一个页面就可以了）,文件如下

然后开始将素材进行拼接，其中比较简单的比如门之类的资源已经处理好了，实现者自取拿走即可，下面着重讲两个问题点，主要集中在Video部分，一个是黑色背景的mp4如何变为透明用样式展示在页面，一个是video自动播放处理。

我们先解决第一个问题：黑色底的mp4作为效果展示在页面中

首先我们要在页面中放一个video标签，将video尺寸设置为满屏。其次使用两个css样式mix-blend-mode、object-fit 混合模式和屏幕展示大小设置

// HTML
    <video
        width="100%"
        height="100%"
        muted
        controls={false}
        autoplay={true}
        loop={true}
        ref={video}
      >
      <source src={fire} type="video/mp4" />
    </video>
    
    // CSS
    video {
      mix-blend-mode: screen;
      object-fit: fill;
    }

其次是Video自动播放的处理，众所周知，video播放一向是“薛定谔的播放”，我们经常遇见加了autoplay但是并不播放的情况，这里有一个简单的video播放处理,代码如下：

const video = React.useRef()
  if (video.current) {
    const promise = video.current.play()
    if (promise !== undefined) {
      promise
        .catch(error => {
          // Auto-play was prevented
          // Show a UI element to let the user manually start playback
        })
        .then(() => {
          // Auto-play started
        })
    }
  }

看的出来，我们使用了useRef，也要记得将ref加入在video标签中哦～

其他处理差不多就没有非常复杂的了，资源放在下面，大家有需要的自取，创作不易，还请不要吝啬小手手帮作者点点赞哦，比心～

献丑了！大佬们轻拍，可以评论区赐教。

github 访问地址 ps: code里面是完整代码哦～