JS 版星级评分

如图所示,在曾经曾用 CSS3 的方案实现过。现在用 JavaScript 重新实现。

演示地址:https://antmoe.gitee.io/project/2020/05/01/index.html

遇到的问题

  1. JavaScript 不能直接操纵伪类元素,因此只能用控制类的方式
  2. 没有搞明白三种状况
    • 第一次点击
    • 第二次点击是加星还是减星
    • 判断循环判断循环(代码太烂
  3. 部分过渡动画存在一定缺陷
  4. 嵌套过于多(代码太烂

解决方案

  1. 由于五个五角星的实现依靠五个一模一样的<i>标签,因此使用事件委托方式

  2. 定义一个列表,用于存储当前页面中的所有星(<i>标签)

  3. 定义一个变量,用作用户是否第一次操作的标志。(即判断是否是第一次操作)

    • 如果是第一次操作,那么直接循环添加类名即可
    • 不是第一次操作,需要判断是否添加过类名
  4. 在用户第一次操作后,需要判断是加星还是减星

    即判断当前点击的元素是否含有星

    • 如有有星星,取消右边和当前点击的星
    • 如果没有星,将左边所有未点亮的星和当前点击的星点亮

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>星星评级动态效果</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"
    />

    <style>
      body {
        background: #222;
      }

      .rating {
        font-family: "Ionicons";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .rating i {
        position: relative;
        margin-right: 6px;
        font-size: 5em;
        color: gold;
        cursor: pointer;
      }

      .rating i:hover::before {
        content: "\f384";
        opacity: 1;
        transition: 0.5s;
        transform: scale(1.2);
      }

      .active::before {
        content: "\f384";
        opacity: 1;
        transition: 0.5s;
      }
    </style>
  </head>

  <body>
    <div class="rating">
      <i class="icon ion-md-star-outline"></i>
      <i class="icon ion-md-star-outline"></i>
      <i class="icon ion-md-star-outline"></i>
      <i class="icon ion-md-star-outline"></i>
      <i class="icon ion-md-star-outline"></i>
    </div>
    <script>
      var rating = document.getElementsByClassName("rating")[0];
      var icon = document.getElementsByClassName("icon");
      var iconList = [];
      for (var i = 0; i < icon.length; i++) {
        iconList.push(icon[i]);
      }
      // 没有点过
      var flag = true;
      document.addEventListener("click", function (event) {
        var target = event.target;
        if (target.nodeName === "I") {
          var num = iconList.indexOf(target);
          if (flag) {
            for (var j = 0; j <= num; j++) {
              icon[j].className += " active";
            }
            flag = false;
          } else {
            // 判断加还是取消
            if (icon[num].className.indexOf(" active") === -1) {
              // 没有找到,则添加
              for (var m = num; m >= 0; m--) {
                if (icon[m].className.indexOf(" active") === -1) {
                  icon[m].className += " active";
                }
              }
            } else {
              // 否则,进行删星星
              for (var i = num; i <= icon.length; i++) {
                icon[i].className = icon[i].className.replace(" active", "");
              }
            }
          }
        }
      });
    </script>
  </body>
</html>

下载按钮动态效果

基于上次进行修改为 JavaScript 版很简单。只需要将 focus 触发的效果赋值于一个新的类。并未按钮绑定事件即可。

演示地址:https://antmoe.gitee.io/project/2020/05/02/index.html

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>下载按钮动态效果</title>
    <style>
      @keyframes circle {
        0%,
        15%,
        45%,
        75% {
          transform: translate(-50%, -50%) scale(0.8);
        }

        30%,
        60%,
        90% {
          transform: translate(-50%, -50%) scale(1.2);
        }

        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }

      @keyframes dot {
        8% {
          transform: scale(0);
        }

        16% {
          transform: scale(1) rotate(30deg) translateX(48px);
        }

        95% {
          transform: scale(1) rotate(1000deg) translateX(48px);
        }

        100% {
          transform: scale(0.125) rotate(1050deg) translate(52px);
        }
      }

      body {
        background-color: #000;
      }

      .button {
        display: block;
        width: 160px;
        height: 41px;
        background: transparent;
        border-radius: 10px;
        color: white;
        border: none;
        outline: none;
        cursor: pointer;
        margin: 100px auto;
        position: relative;
      }

      .button::after,
      .button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transform-origin: 50% 50%;
      }

      .button::before {
        width: 100%;
        height: 100%;
        background-color: #6d58ff;
        border-radius: 10px;
        transition: all 0.5s;
      }

      .button::after {
        content: "";
        width: 16px;
        height: 16px;
        background: #fff;
        z-index: 2;
        border-radius: 50%;
        transform: scale(0);
        /* 设置外部白色圆圈的圆心位置 */
        transform-origin: 0 0;
      }

      .button span {
        position: relative;
        z-index: 1;
      }

      .button svg {
        width: 15px;
        height: 13px;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        stroke: #fff;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transform: translate(-50%, -50%);
        stroke-dasharray: 17px;
        stroke-dashoffset: 17px;
        transition: stroke-dashoffset 0.3s ease;
        transition-delay: 3s;
      }

      .button:focus svg {
        stroke-dashoffset: 34px;
      }

      .transport::before {
        width: 41px;
        height: 41px;
        border-radius: 50%;
        animation: circle 3s linear forwards;
      }

      .transport::after {
        animation: dot 3s linear forwards;
      }

      .button:focus span {
        display: none;
      }
    </style>
  </head>

  <body>
    <button class="button">
      <span>下载</span>
      <svg view-Box="0 0 15 13">
        <polyline points="2 6.5 6 10.5 13 2.5"></polyline>
      </svg>
    </button>
    <script>
      // 获取按钮
      var buttonElement = document.getElementsByClassName("button")[0];
      // 获取文本
      var aElement = document.getElementsByTagName("span")[0];
      // 绑定事件
      buttonElement.addEventListener("click", function () {
        if (buttonElement.className.indexOf(" transport") === -1) {
          buttonElement.className += " transport";
          aElement.style.display = "none";
        } else {
          buttonElement.className = "button";
          aElement.style.display = "block";
        }
      });
    </script>
  </body>
</html>

百叶窗效果轮播图

https://antmoe.gitee.io/project/2020/05/03/index.html

基于上次进行修改为 JavaScript 版很简单。但需要注意的问题是:

图片是用四张小图拼成的,因此控制的是四张小图

其余内容基本与上一版轮播图一致。

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例--百叶窗效果</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
        position: relative;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      /* 图片容器 */
      .container .imgList .img {
        height: 100%;
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
      }

      /* 四个小部分 */
      .container .imgList .img .frag {
        float: left;
        height: 460px;
        width: 25%;
        background-size: 1226px 460px;
        opacity: 0;
        z-index: 0;
        transform-origin: center right;
        filter: saturate(0) blur(10px) brightness(0.6) contrast(4);
        transition: transform 0.6s, opacity 0.6s, filter 0.6s ease-out;
      }

      /* 每一个容器里的小部分显示的图片 */
      .container .imgList .img:nth-child(1) .frag {
        background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
      }

      .container .imgList .img:nth-child(2) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
      }

      .container .imgList .img:nth-child(3) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
      }

      .container .imgList .img:nth-child(4) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
      }

      .container .imgList .img:nth-child(5) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
      }

      /* 分割每一小部分需要显示的区域(位置) */
      .container .imgList .img .frag:nth-child(2) {
        background-position: -306.5px 0;
        transition-delay: 0.2s;
      }

      .container .imgList .img .frag:nth-child(3) {
        background-position: -613px 0;
        transition-delay: 0.3s;
      }

      .container .imgList .img .frag:nth-child(4) {
        background-position: -919.5px 0;
        transition-delay: 0.4s;
      }

      .container .imgList .img .frag:nth-child(5) {
        background-position: -1226px 0;
        transition-delay: 0.5s;
      }

      .container .slide-controls {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }

      .container .slide-controls .slide-left,
      .container .slide-controls .slide-right {
        width: 41px;
        height: 69px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-image: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png);
        cursor: pointer;
        z-index: 2;
      }

      .container .slide-controls .slide-left {
        left: 0;
        background-position: -84px 0;
      }

      .container .slide-controls .slide-left:hover {
        background-position: 0 0;
      }

      .container .slide-controls .slide-right {
        right: 0;
        background-position: -124px 0;
      }

      .container .slide-controls .slide-right:hover {
        background-position: -42px 0;
      }

      /* 导航 */
      .container .nav {
        width: 100px;
        height: 20px;
        position: absolute;
        left: 50%;
        right: 0;
        bottom: 8px;
        transform: translateX(-50%);
        z-index: 2;
      }

      .container .nav .slide-nav {
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        border-color: hsla(0, 0%, 100%, 0.3);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.4);
        cursor: pointer;
        margin: 0 4px;
        float: left;
        z-index: 3;
      }

      .container .nav .slide-nav:hover {
        background: hsla(0, 0%, 100%, 0.4);
        border-color: rgba(0, 0, 0, 0.4);
      }
    </style>
    <script
      type="text/javascript"
      nonce="4db1ec836d6049f58177b1533ea"
      src="//local.adguard.org?ts=1588483546206&amp;type=content-script&amp;dmn=antmoe.gitee.io&amp;css=1&amp;js=1&amp;gcss=1&amp;rel=1&amp;rji=1&amp;stealth=1&amp;uag="
    ></script>
    <script
      type="text/javascript"
      nonce="4db1ec836d6049f58177b1533ea"
      src="//local.adguard.org?ts=1588483546206&amp;name=AdGuard%20Popup%20Blocker&amp;name=AdGuard%20Assistant&amp;name=AdGuard%20Extra&amp;type=user-script"
    ></script>
  </head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 左右切换菜单 -->
      <div class="slide-controls">
        <div class="slide-left"></div>
        <div class="slide-right"></div>
      </div>
      <!-- 图片列表 -->
      <div class="imgList">
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
      </div>
      <!-- 轮播图的导航 -->
      <div class="nav">
        <div class="slide-nav"></div>
        <div class="slide-nav"></div>
        <div class="slide-nav"></div>
        <div class="slide-nav"></div>
        <div class="slide-nav"></div>
      </div>
    </div>
    <script>
      // 图片列表容器
      var imgList = document.getElementsByClassName("imgList")[0];
      // 图片列表
      var imgs = imgList.getElementsByClassName("img");
      // 底部导航栏
      var slideElements = document.getElementsByClassName("slide-nav");
      var slideRight = document.getElementsByClassName("slide-right")[0];
      var slideLeft = document.getElementsByClassName("slide-left")[0];
      // 导航条
      var navElement = document.getElementsByClassName("nav")[0];
      // 用于存放nav
      var arr = [];
      for (var i = 0; i < slideElements.length; i++) {
        arr.push(slideElements[i]);
      }
      var num = 0;
      // 控制图片显示及消失
      function show(num) {
        var drag = imgs[num].getElementsByClassName("frag");
        for (var i = 0; i < drag.length; i++) {
          drag[i].style.opacity = 1;
          drag[i].style.zIndex = 1;
          drag[i].style.filter =
            "saturate(1) blur(0px) brightness(1) contrast(1)";
          drag[i].style.transition =
            "rotateY(90deg) translateZ(180deg) scale(1.5)";
        }
        slideElements[num].style.backgroundColor = "hsla(0, 0%, 100%, .4)";
        slideElements[num].style.borderColor = "rgba(0, 0, 0, .4)";
      }
      function hidden() {
        var drag = document.getElementsByClassName("frag");
        for (var i = 0; i < drag.length; i++) {
          drag[i].style.opacity = 0;
          drag[i].style.zIndex = 0;
          drag[i].style.transform = null;
          drag[i].style.filter = null;
        }
        for (var m = 0; m < slideElements.length; m++) {
          slideElements[m].style.backgroundColor = null;
          slideElements[m].style.borderColor = null;
        }
      }
      // 初始初始化页面
      show(0);
      // 向右切换按钮的动态效果
      slideRight.addEventListener("click", function () {
        num++;
        console.log(num, num === imgs.length);
        hidden();
        if (num === imgs.length) {
          num = 0;
          console.log(num);
          show(num);
        } else {
          show(num);
        }
      });
      // 向左切换按钮的动态效果
      slideLeft.addEventListener("click", function () {
        hidden();
        if (num <= 0) {
          num = imgs.length - 1;
          show(num);
        } else {
          show(num - 1);
          num--;
        }
      });
      // 导航器的动态效果
      navElement.addEventListener("click", function (event) {
        var target = event.target;
        num = arr.indexOf(target);
        console.log(num);
        if (target.className === "slide-nav") {
          hidden();
          show(num);
        }
      });
    </script>
  </body>
</html>

模仿快手官网

https://antmoe.gitee.io/project/2020/05/04/index.html

相对来说 , 快手官网还是较为简单的。大概可以分为四个部分

  1. 头部

    包含左侧 logo 和右侧导航条

    需要注意的是导航条是二级目录。

  2. 中间

    一行字,一张图,两个按钮

  3. 底部

    也就是版权声明

  4. 背景

实现思路

  1. 头部

    头部需要注意的只是二级导航。其实现很简单。html 结构使用父子级(子级 display 为 none)。当悬停到父级时,将子级显示即可。

  2. 主区域部分

    常规操作即可。

  3. 底部

    常规操作

  4. 背景

    使用视频背景简单的做法就是写入一个新的 div,div 内部放一个video标签。

    <div class="video-wrap">
      <video id="video" class="video" loop="" muted="" autoplay="">
        <source
          src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_video.c8e339ab.mp4"
          type="video/mp4"
        />
        抱歉,您的浏览器不支持内嵌视频
      </video>
    </div>

    将其进行绝对定位,也就是固定在整个页面。

    .video-wrap .video {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模仿快手官网小demo</title>
    <style>
      body {
        background-color: #000;
        overflow: hidden;
        color: white;
      }

      li,
      ol,
      ul {
        list-style: none;
        padding: 0;
      }

      a {
        background-color: rgba(0, 0, 0, 0);

        text-decoration: none;
        color: white;
      }

      @font-face {
        font-family: "iconfont";
        src: url("iconfont.eot?t=1588408129484");
        /* IE9 */
        src: url("iconfont.eot?t=1588408129484#iefix") format("embedded-opentype"),
          /* IE6-IE8 */
            url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMIAAsAAAAABrQAAAK6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBIIEcATYCJAMMCwgABCAFhG0HOxvfBRHVk1dkf4Q4xnYIzQxJ6dLPWNbsF8rRCZXgfHF7If9lWxgy06CkoBVIAAAAAIAgwjG9T1JEt6m2Q8lkp6ZQEcopJOHRzhMrliiBJLnCBhw0hDwNgDdAgEz8AOiJHZ4qfQfYyiwXslphAw54ogkzW1Yf7P2fs6qRURGmKGfRjm0xaTn/pRngnRMkjLu7PH2KJmjZFty1sTBaoF59Ai7jihawmas7nT9VuY3wM2TP57mc3gQ6O5ofKKc1cYxt9fwwwDigAMdatIVLKOOG6eULGsjNEMBJqmxSU2csiEH3EkB6u/oSzCUwGFa2I1hrJloL5Viwqzk1VsLvy+cSFBaNHtjQrhvYyy/b2uRnk0+QBAFOtwAayAYGpLG20AAI4zTOQohhX60EXkr+v/BdyF55BfLX2Uo3AOnQpu7I4OzcmgFOQQGgAbDmS+kgB7HhgwUJh9s/C3uj6dlymvhaJt1jBwsZj+acvxvLqn3XRfz3GXiN3sxnzjiyKOxTpPR77t+KNNA/z9APR43mY86kmWathNY5Gzpow3nLvwr0q00VAgh0r444xP3AAHD/mgNt/9KA/SRBgR8WsE2LWZh0XhsA6ZwehjThHj0V4MQJJHUk6Hm8M9I7B4I9ZxoRspHCobETIw2bDQsucmDFTjmcZKmf7iJkGBDjADJNAQh+W1B4OYDG75I07BMsRH3Dij/gpFFY0EUitpwkGCtmkNygTLkj69ZJVL3F/NTEkjWFwhGlL9PgO16xvMIOZY4h/TkPVAlIuIUl2A6bhsEIV5iqU6iaqetS3Y2clFtrQoKxYgbJDcqUO/Lr66T0+S3mpyaWFlWueUTpy+bBd7we5Mre9VLdyzX9OQ9UCUi4hSVoh03DYOrbVZiqU4zImalralFfu7O+s/2+DYATvYIWJVoM9MdnO+NLN4jiJ2NZAAA=")
            format("woff2"), url("iconfont.woff?t=1588408129484") format("woff"),
          url("iconfont.ttf?t=1588408129484") format("truetype"),
          /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url("iconfont.svg?t=1588408129484#iconfont") format("svg");
        /* iOS 4.1- */
      }

      .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .icon-nav-down:before {
        content: "\e6b9";
      }

      .icon-nav-up:before {
        content: "\e6ba";
      }

      .video-wrap .video {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .header {
        position: relative;
        z-index: 2;
        padding: 29px 5.875% 29px 7.625%;
      }

      .header .logo {
        float: left;
        width: 7.6875%;
        height: 3.3125%;
        cursor: pointer;
      }

      .header .logo img {
        width: 100%;
      }

      .header .list,
      .header .volumn {
        float: right;
      }

      .header .list {
        padding: 0px 100px 0;
      }

      .header .list .item:first-child {
        margin-left: 0;
      }

      .header .list .item {
        position: relative;
        display: inline-block;
        margin-left: 50px;
      }

      .header .list .item .nav {
        position: relative;
        display: inline-block;
        height: 20px;
        overflow: visible;
        padding-bottom: 6px;
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
        transition: border-color 0.3s ease-in;
      }

      .header .list .down-item {
        position: absolute;
        display: none;
        width: 120px;
        left: 0;
        top: 26px;
        border-radius: 2px 2px 6px 6px;
        background-color: hsla(0, 0%, 100%, 0.3);
      }

      .header .list .item .nav {
        font-size: 16px;
        line-height: 22px;
      }

      .header .list .sub-menu .icon-nav {
        display: inline-block;
      }

      .header .list .sub-menu .icon-nav::before {
        content: "\e6b9";
      }

      .header .list .item .iconfont {
        position: relative;
        left: -1px;
        color: #fff;
        font-size: 12px;
      }

      .header .sub-menu:hover .down-item {
        display: block;
      }

      .header .sub-menu:hover .icon-nav::before {
        content: "\e6ba";
      }

      .header .list .down-item li {
        line-height: 50px;
        text-align: center;
      }

      .header .list .down-item li a {
        color: white;
        transition: all 0.5s;
      }

      .header .list .down-item li:first-child {
        padding-top: 10px;
      }

      .header .list .down-item li:last-child {
        padding-bottom: 10px;
      }

      .header .list .down-item li:hover > a {
        color: #ff5000;
        text-shadow: none;
      }

      /* 主区域部分 */
      .main {
        position: absolute;
        left: 7.625%;
        top: 36.333%;
      }

      .main .kwai-slogan {
        margin-bottom: 18px;
        font-weight: 500;
        font-size: 50px;
        color: #fff;
        text-align: left;
        line-height: 72px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }

      .main .qr-code {
        width: 137px;
        width: 8.5625vw;
        margin: 0 2.1875vw 0 0;
        text-align: center;
      }

      .main .btn-wrap,
      .main .qr-code {
        display: inline-block;
        vertical-align: top;
      }

      .main .qr-code .image {
        width: 100%;
        height: 140px;
        height: 8.75vw;
        margin-bottom: 3px;
        border-radius: 6px;
      }

      .main .qr-code .text {
        font-size: 12px;
        line-height: 17px;
        color: #d8d8d8;
      }

      .main .btn-wrap .btn {
        display: block;
        width: 190px;
        height: 58px;
        width: 11.875vw;
        height: 3.625vw;
        background: none no-repeat 50% / contain;
        border-radius: 30px;
        cursor: pointer;
        -webkit-transition: background-image 0.3s;
        -o-transition: background-image 0.3s;
        transition: background-image 0.3s;
        color: #fff;
        font-size: 28px;
        line-height: 58px;
      }

      .main .btn-wrap .ios {
        background-image: url(https://static.yximgs.com/udata/pkg/fe/ios_normal.png);
        margin-bottom: 28px;
      }

      .main .btn-wrap .android {
        background-image: url(https://static.yximgs.com/udata/pkg/fe/android_normal.png);
      }

      /* 页脚 */
      .footer {
        position: absolute;
        bottom: 0;

        width: 100%;
        height: 87px;
        padding: 0 0 23px;
        text-align: center;
      }

      .footer .com-footer {
        margin: 0 auto;
        text-align: center;
      }

      .footer .com-footer .list a {
        margin-right: 30px;
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="video-wrap">
      <video id="video" class="video" loop="" muted="" autoplay="">
        <source
          src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_video.c8e339ab.mp4"
          type="video/mp4"
        />
        抱歉,您的浏览器不支持内嵌视频
      </video>
    </div>
    <div class="header">
      <a href="#" class="logo"
        ><img
          src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_home_logo.png"
          alt="快手"
        />
      </a>
      <ul class="list">
        <li class="item">
          <a href="/" class="nav checked" title="首页">首页</a>
        </li>
        <li class="item sub-menu">
          <a
            href="https://live.kuaishou.com"
            class="nav "
            title="快手直播"
            target="_blank"
            >快手直播</a
          >
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li>
              <a href="https://live.kuaishou.com" target="_blank">快手直播</a>
            </li>
            <li>
              <a href="https://live.kuaishou.com/live-partner" target="_blank"
                >直播伴侣</a
              >
            </li>
          </ul>
        </li>
        <li class="item sub-menu">
          <a href="javascript:void(0);" class="nav " title="系列产品"
            >系列产品</a
          >
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li><a href="/kuaiying">快影</a></li>
            <li>
              <a href="http://www.acfun.cn/" target="_blank" rel="nofollow"
                >AcFun</a
              >
            </li>
            <li>
              <a href="https://1tian.kuaishou.com/?f=www" target="_blank"
                >一甜相机</a
              >
            </li>
          </ul>
        </li>
        <li class="item">
          <a
            href="https://music.kuaishou.com"
            class="nav "
            title="音乐人"
            target="_blank"
            >音乐人</a
          >
        </li>
        <li class="item sub-menu">
          <a href="javascript:void(0);" class="nav " title="创作者服务"
            >创作者服务</a
          >
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li><a href="/verify/" target="_blank">用户认证</a></li>
            <li>
              <a
                href="https://cp.kuaishou.com/article/publish/video?origin=www.kuaishou.com"
                target="_blank"
                >上传视频</a
              >
            </li>
            <li>
              <a href="https://cp.kuaishou.com/" target="_blank"
                >创作者服务平台</a
              >
            </li>
          </ul>
        </li>
        <li class="item">
          <a
            href="https://pay.ssl.kuaishou.com/pay"
            class="nav "
            title="快币充值"
            >快币充值</a
          >
        </li>
        <li class="item sub-menu">
          <a href="/about/contact" class="nav " title="联系我们">联系我们</a>
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li>
              <a href="https://e.kuaishou.com/" target="_blank" rel="nofollow"
                >商务合作</a
              >
            </li>
            <li><a href="/about/contact">联系我们</a></li>
            <li><a href="/about/">关于我们</a></li>
            <li>
              <a href="https://www.kwaishop.com/" target="_blank" rel="nofollow"
                >快手电商</a
              >
            </li>
            <li>
              <a href="https://mcn.kuaishou.com/" target="_blank" rel="nofollow"
                >机构入驻</a
              >
            </li>
            <li>
              <a
                href="https://zhaopin.kuaishou.com/"
                target="_blank"
                rel="nofollow"
                >加入我们</a
              >
            </li>
            <li><a href="/help/report">违规举报</a></li>
          </ul>
        </li>
        <li class="item sub-menu">
          <a href="javascript:void(0);" class="nav " title="社会责任"
            >社会责任</a
          >
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li><a href="/csr/" target="_blank">快手行动</a></li>
            <li><a href="/committee/">专家委员会</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="main">
      <h1 class="kwai-slogan">快手,<br />记录世界&nbsp;记录你</h1>
      <div class="qr-code">
        <img
          src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_qrcode.png"
          alt="二维码"
          class="image"
        />
        <span class="text">扫码下载&nbsp;快手</span>
      </div>
      <div class="btn-wrap">
        <a
          href="https://apps.apple.com/cn/app/快手/id440948110"
          class="btn ios"
        ></a>
        <a
          href="https://m.kuaishou.com/download/kwai?platform=android&amp;f=www_home"
          class="btn android"
        ></a>
      </div>
    </div>
    <div class="footer">
      <div class="com-footer">
        <div class="list">
          <a href="//www.kuaishou.com/about/" class="item" title="关于快手"
            >关于快手</a
          >
          <a
            href="//www.kuaishou.com/help/feedback"
            class="item"
            title="快手帮助中心"
            >帮助中心</a
          >
          <a
            href="https://zhaopin.kuaishou.com/"
            target="_blank"
            class="item"
            title="快手招聘"
            >加入我们</a
          >
          <a
            href="//www.kuaishou.com/about/contact"
            class="item"
            title="联系快手"
            >联系我们</a
          >
          <a href="//www.kuaishou.com/about/policy" target="_blank" class="item"
            >法律声明</a
          >
        </div>
        <p class="info">
          <span>www.kuaishou.com <span id="this-year">2020</span></span>
          <span>@ All rights Reserved</span>
          <span>京网文(2017)2551-280号</span>
          <span>京ICP备07035647号-4</span>
          <a
            target="_blank"
            rel="nofollow"
            href="https://zzlz.gsxt.gov.cn/businessCheck/verifKey.do?showType=p&amp;serial=11000020190617100242000003563691-SAIC_SHOW_10002020190621144025721&amp;signData=MEQCIP0/+UH+ntaa/CsUaIa29DiFE/5haWZtEr21SBp7ZH3FAiAaZbzsn7SkDMMICyfCAsZly9BxiPl94sRConkJ4tEgzw=="
            ><span class="license-icon"></span>
          </a>
          <a
            class="police-link"
            target="_blank"
            rel="nofollow"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020421"
            >京公网安备 11010802020421号</a
          >
        </p>
      </div>
    </div>
  </body>
</html>