很多博客和网站都为了增加权重，设置了外链中转，现在就简单实现一下这个效果。

跳转页面

其实就是一个简单页面，接收页面hash参数，然后再跳转到真正的链接。你还可以进行自定义设置，可以加一个特效。

css3动画特效：

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
body {
  margin: 0;
  overflow: hidden;
}
.bouncing-loader {
  display: flex;
  justify-content: center;
  align-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f1eeee;
}
.bouncing-loader > div {
  margin-top: 500px;
  width: 2rem;
  height: 2rem;
  background-color: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

页面代码：

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

js处理：

let url = window.location.search;
let outLink = [
  {
    id: 1,
    name: 'csdn',
    url: 'https://blog.csdn.net/fed_Mr.Mark ',
    hash: '12swjed23dewdef24334'
  }
]
url = url.slice(1, ).split('=')[1];
let realUrl = '';
for (let i = 0; i < outLink.length; i++) {
  const element = outLink[i];
  if (url == element.hash) {
    realUrl = element.url;
  }
}
if (realUrl) {
  setTimeout(() => {
    location = realUrl;
  }, 3000);
} else {
  alert('暂无链接！');
  window.history.back();
}

正常页面

<a href="redirect/?url=12swjed23dewdef24334">个人博客</a>

最后

点击链接就可以到跳转页面，然后再到要去的页面。