发现了一个背景色线性变化的网页，果断保存一下源代码

网页效果

 

网页源代码：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>正在跳转</title>
  <style>
    body {
      width: 100vw;
      height: 100vh;
      color: #fff;
      margin: 0;
      background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
      background-size: 400% 400%;
      -webkit-animation: Gradient 10s ease infinite;
      -moz-animation: Gradient 10s ease infinite;
      animation: Gradient 10s ease infinite;
      overflow: hidden;
    }

    @-webkit-keyframes Gradient {
      0% {
        background-position: 0% 50%
      }
      50% {
        background-position: 100% 50%
      }
      100% {
        background-position: 0% 50%
      }
    }

    @-moz-keyframes Gradient {
      0% {
        background-position: 0% 50%
      }
      50% {
        background-position: 100% 50%
      }
      100% {
        background-position: 0% 50%
      }
    }

    @keyframes Gradient {
      0% {
        background-position: 0% 50%
      }
      50% {
        background-position: 100% 50%
      }
      100% {
        background-position: 0% 50%
      }
    }

    h1 {
      font-size: 3.2vh;
      font-weight: 300;
      text-align: center;
      position: absolute;
      top: 42%;
      right: 0;
      left: 0;
      margin: 0;
      padding: 0;
    }

    h1::after {
      position: absolute;
    }

    h1.stage1::after {
      content: '.';
    }

    h1.stage2::after {
      content: '..';
    }

    h1.stage3::after {
      content: '...';
    }

    h1.stage4::after {
      content: '....';
    }

    h1.stage5::after {
      content: '.....';
    }

    h1.stage6::after {
      content: '......';
    }

    .goto {
      cursor: pointer;
      display: inline-block;
      width: 15vh;
      color: #eee;
      font-size: 2.2vh;
      font-weight: 500;
      text-align: center;
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      margin: 0 auto;
      padding: 1.9vh;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1 class="stage1">正在跳转</h1>
  <span class="goto">奇怪的地方</span>
  <script>
    (function () {
      var link = getQueryString('link') || ~~(Math.random() * 100);
      var homepage = 'http://a.topurl.cn/future/?from=short_url&link=' + link + '#/more';
      var timer = null;
      var stage = 1;
      var h1 = document.querySelector('h1');

      document.querySelector('.goto').onclick = function () {
        clearTimeout(timer);
        timer = null;
        location.href = homepage;
      }

      if(!timer) {
        setInterval(function () {
          stage = stage >=6 ? 1 : stage+1;
          h1.className = 'stage'+stage;
        }, 650);
        timer = setTimeout(function () {
          var url = getQueryString('url');
          try {
            url = window.atob(url);
          } catch (e){
            url = '';
          }
          url = decodeURI(url) || homepage;
          location.href = url;
        }, 4000);
      }
    })();

    function getQueryString (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var split = window.location.href.split('?');
      var len = split.length;
      if (len == 1) {
        return '';
      }
      var r = split[len - 1].match(reg);
      if (r != null) {
        return decodeURIComponent(r[2]).split('#')[0];
      }
      return '';
    }
  </script>
</body>
</html>

 

posted @ 2020-11-03 15:55  我喜欢旅行  阅读(185)  评论(0)  编辑  收藏  举报