很多博客和网站都为了增加权重，设置了外链中转，现在就简单实现一下这个效果。
跳转页面
其实就是一个简单页面，接收页面hash参数，然后再跳转到真正的链接。你还可以进行自定义设置，可以加一个特效。
css3动画特效：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| @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;
}
|
页面代码：
1
2
3
4
5
| <div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
|
js处理：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| 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();
}
|
正常页面
1
| <a href="redirect/?url=12swjed23dewdef24334">个人博客</a>
|
最后
跳转效果
点击链接就可以到跳转页面，然后再到要去的页面。
