WordPress如何通过代码实现 外链go 跳转 -防止权重流失

WordPress如何通过代码实现 外链go 跳转 -防止权重流失

一般我们能用代码实现的效果就不要使用插件,插件过多不仅会影响网站速度,还可能跟使用的主题不兼容,带来很多麻烦。那么对于站内链接,直接跳转即可。但对于外链,需要有一个中间跳转,为什么要这么做呢?肯定是有用的,谁不会闲的蛋疼,去搞这些没用的东西,基本上来说网站的外链跳转可以隐藏来源、帮我们过滤掉一些广告、也有助于搜索引擎优化,但这里你不要想太多,一般的网站权重基本上都是0,加不加无所谓了,但是为了网站能够好看一点,加上或许能吸引用户呢?😃大多数的WordPress主题已经自带有外链跳转,对于没有的小伙伴,可以尝试下面的教程,也搜集了相关资料,特别对于小白来说也是比较简单的,总共有五种样式,看个人爱好选择。

WordPress如何通过代码实现 外链go 跳转 -防止权重流失 WordPress如何通过代码实现 外链go 跳转 -防止权重流失 WordPress如何通过代码实现 外链go 跳转 -防止权重流失 WordPress如何通过代码实现 外链go 跳转 -防止权重流失 WordPress如何通过代码实现 外链go 跳转 -防止权重流失 WordPress如何通过代码实现 外链go 跳转 -防止权重流失

外链跳转样式一

在网站根目录,就是在wp-content呢级目录下面新建文件夹go,在里面创建文件index.php,放入代码:

<?php  
// 请将这里的网址改为自己的(顶级)域名地址  
$myDomain = 'e1yu';  

// 这里用正则提取 $_SERVER["QUERY_STRING"] 而不是直接 get url  
// 是因为如果链接中自身带有 GET 参数则会导致获取不完整  
preg_match('/url=(.*)/i', $_SERVER["QUERY_STRING"], $jumpUrl);   

// 如果没获取到跳转链接,直接跳回首页  
if(!isset($jumpUrl[1])) {  
    header("location:/");  
    exit();  
}  

$jumpUrl = $jumpUrl[1];  

// 判断是否包含 http:// 头,如果没有则加上  
preg_match('/(http|https):\/\//', $jumpUrl, $matches);      

$url = $matches? $jumpUrl: 'http://'. $jumpUrl;  


// 判断网址是否完整  
preg_match('/[\w-]*\.[\w-]*/i', $url, $matche);      

// 是否需要给出跳转提示  
$echoTips = false;  

if($matche){  
    // 如果是本站的链接,不展示动画直接跳转  
    if(isMyDomain($url, $myDomain)) {  
        header("location:{$url}");  
        exit();    // 后续操作不再执行  
    }  

    $title = '页面加载中,请稍候...';  
    $fromUrl = isset($_SERVER["HTTP_REFERER"])? $_SERVER["HTTP_REFERER"]: ''; // 获取来源url  

    // 如果来源和跳转后的地址都不是本站,那么就要给出提示  
    if(!isMyDomain($fromUrl, $myDomain)) {  
        $echoTips = true;  
    }  
} else {    // 网址参数不完整  
    $url = '/';  
    $title = '参数错误,正在返回首页...';  
}  

/** 
 * 判断是不是自己的域名 
 * @param $domain 要进行判断的域名 
 * @param $my 自己的域名 
 * @return 对比结果 
 */  
function isMyDomain($domain, $my) {  
    preg_match('/([^\?]*)/i', $domain, $match);  
    if(isset($match[1])) $domain = $match[1];  
    preg_match('/([\w-]*\.[\w-]*)\/.*/i', $domain.'/', $match);  
    if(isset($match[1]) && $match[1] == $my) return true;  
    return false;  
}  

?> 

接着需要在index.php文件的最后添加跳转样式代码,如果想要更换样式只需要修改这里即可:

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<?php  
if($echoTips) {  
    echo '<title>跳转提示</title>';  
} else {  
    echo '<meta http-equiv="refresh" content="0;url='.$url.'">';  
    echo '<title>'.$title.'</title>';  
}  
?>  
<style>  
body{background:#fff;font-family:Microsoft Yahei;-webkit-animation:fadeIn 1s linear;animation:fadeIn 1s linear}  
@-webkit-keyframes fadeIn{from{opacity:0}  
to{opacity:1}  
}@keyframes fadeIn{from{opacity:0}  
to{opacity:1}  
}#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #2187e7;width:50px;height:50px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite ease-in-out;-o-animation:spinPulse 1s infinite ease-in-out;-ms-animation:spinPulse 1s infinite ease-in-out}  
#circle1{background-color:rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #2187e7;width:30px;height:30px;margin:0 auto;position:fixed;left:40px;bottom:40px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear}  
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050}  
50%{-webkit-transform:rotate(145deg);opacity:1}  
100%{-webkit-transform:rotate(-320deg);opacity:0}  
}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}  
100%{-webkit-transform:rotate(360deg)}  
}#loading-text{position:fixed;left:110px;bottom:35px;color:#736D6D}  
@media screen and (max-width:600px){#circle,#circle1{left:0;right:0;top:0;bottom:0}  
#circle{margin:120px auto}  
#circle1{margin:130px auto}  
#loading-text{display:block;text-align:center;margin-top:220px;position:static;margin-left:10px}  
}  
.warning{max-width: 500px;margin: 20px auto;}  
.wtitle {font-size: 22px;color: #d68300;}  
.wurl {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #827777;}  
.btn {display: inline-block;line-height: 20px;cursor: pointer;border: 1px solid #A9A6A6;padding: 6px 10px;font-size: 14px;text-decoration: none;}  
.btn-green {color: #fff;background-color: #238aca;border: 1px solid #238aca;}  
.btn:hover {background-color: #A9A6A6;border: 1px solid #A9A6A6;color: #fff;}  
</style>  
</head>  
<body>  
    <?php if($echoTips) { ?>  
    <div class="warning">  
        <p class="wtitle">您将要访问:</p>  
        <p class="wurl" title="<?php echo $url;?>"><?php echo $url;?></p>  
        <p>该网站不属于ZJJ博客,我们无法确认该网页是否安全,它可能包含未知的安全隐患。</p>  
        <a class="btn btn-green" href="<?php echo $url;?>" rel="nofollow" target="_blank">继续访问</a>  
        <a class="btn" href="http://e1yu" rel="nofollow">返回首页</a>  
    </div>  
    <script>  
    function closePage() {  
        // 通用窗口关闭  
        window.opener=null;  
        window.open('','_self');  
        window.close();  
        // 微信浏览器关闭  
        WeixinJSBridge.call('closeWindow');  
    }  
    </script>  
    <?php } else { ?>  
    <div id="circle"></div>  
    <div id="circle1"></div>  
    <p id="loading-text">页面加载中,请稍候...</p>  
    <?php } ?>  
</body>  
</html>

之后我们就可以通过访问https://e1yu/go/?url=外链的方式访问站外的链接了,这时候我们要把以前的外链全部修改为这种连接样式,在function.php文件中放入代码:

//文章内外链添加go跳转
function the_content_nofollow($content){
    preg_match_all('/<a(.*?)href="(.*?)"(.*?)>/',$content,$matches);
    if($matches){
        foreach($matches[2] as $val){
            if(strpos($val,'://')!==false && strpos($val,home_url())===false && !preg_match('/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)){
                $content=str_replace("href=\"$val\"", "href=\"".home_url()."/go/?url=$val\" ",$content);
            }
        }
    }
 return $content;
}
add_filter('the_content','the_content_nofollow',999);
//评论者链接添加go跳转
function add_redirect_comment_link($text = ''){
    $text=str_replace('href="', 'href="'.get_option('home').'/go/?url=', $text);
    return $text;
}
add_filter('get_comment_author_link', 'add_redirect_comment_link', 5);
add_filter('comment_text', 'add_redirect_comment_link', 99); 

外链跳转样式二

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="robots" content="noindex, nofollow" />
    <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
    <meta charset="UTF-8">
<!--[if IE 8]>
    <style>
        .ie8 .alert-circle,.ie8 .alert-footer{display:none}.ie8 .alert-box{padding-top:75px}.ie8 .alert-sec-text{top:45px}
    </style>
<![endif]-->

    <title><?php echo $title;?></title>
    <style>
        body{margin:0;padding:0;background:#E6EAEB;font-family:Arial,'微软雅黑','宋体',sans-serif}.main{position:absolute;left:calc(50% - 200px);top:calc(50% - 13em)}.alert-box{display:none;position:relative;margin:auto;padding:180px 85px 22px;border-radius:10px 10px 0 0;background:#FFF;box-shadow:5px 9px 17px rgba(102,102,102,.75);width:286px;color:#FFF;text-align:center}.alert-box p{margin:0}.alert-circle{position:absolute;top:-50px;left:111px}.alert-sec-circle{stroke-dashoffset:0;stroke-dasharray:735;transition:stroke-dashoffset 1s linear}.alert-sec-text{position:absolute;top:11px;left:190px;width:76px;color:#000;font-size:68px}.alert-sec-unit{font-size:34px}.alert-body{margin:35px 0}.alert-head{color:#242424;font-size:28px}.alert-concent{margin:25px 0 14px;color:#7B7B7B;font-size:18px}.alert-concent p{line-height:27px}.alert-btn{display:block;border-radius:10px;background-color:#4AB0F7;height:55px;line-height:55px;width:286px;color:#FFF;font-size:20px;text-decoration:none;letter-spacing:2px}.alert-btn:hover{background-color:#6BC2FF}.alert-footer{margin:0 auto;height:42px;width:120px}.alert-footer-icon{float:left}.alert-footer-text{float:left;border-left:2px solid #EEE;padding:3px 0 0 5px;height:40px;color:#0B85CC;font-size:12px;text-align:left}.alert-footer-text p{color:#7A7A7A;font-size:22px;line-height:18px}
    </style>
</head>
<body class="ie8" style="">
<div class="main">
    <div id="js-alert-box" class="alert-box" style="display:block">
        <svg class="alert-circle" width="234" height="234"><circle cx="117" cy="117" r="108" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle><circle id="js-sec-circle" class="alert-sec-circle" cx="117" cy="117" r="108" fill="transparent" stroke="#F4F1F1" stroke-width="18" transform="rotate(-90 117 117)" style="stroke-dashoffset:-514px"></circle><text class="alert-sec-unit" x="100" y="172" fill="#BDBDBD">秒</text></svg>
        <div id="js-sec-text" class="alert-sec-text">
        3
        </div>
        <div class="alert-body">
            <div id="js-alert-head" class="alert-head">
            <?php echo $title;?>
            </div>
            <div class="alert-concent">
            <p>一万年很久,只争朝夕</p>
            </div>
            <a id="js-alert-btn" class="alert-btn" href="<?php echo $url;?>">立即前往</a>
        </div>
        <div class="alert-footer clearfix">
            <svg width="46px" height="42px" class="alert-footer-icon"><circle fill-rule="evenodd" clip-rule="evenodd" fill="#7B7B7B" stroke="#DEDFE0" stroke-width="2" stroke-miterlimit="10" cx="21.917" cy="21.25" r="17"></circle><path fill="#FFF" d="M22.907,27.83h-1.98l0.3-2.92c-0.37-0.22-0.61-0.63-0.61-1.1c0-0.71,0.58-1.29,1.3-1.29s1.3,0.58,1.3,1.29 c0,0.47-0.24,0.88-0.61,1.1L22.907,27.83z M18.327,17.51c0-1.98,1.61-3.59,3.59-3.59s3.59,1.61,3.59,3.59v2.59h-7.18V17.51z M27.687,20.1v-2.59c0-3.18-2.59-5.76-5.77-5.76s-5.76,2.58-5.76,5.76v2.59h-1.24v10.65h14V20.1H27.687z"></path><circle fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" cx="35.417" cy="10.75" r="6.5"></circle><polygon fill="#7B7B7B" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="35.417,12.16 32.797,9.03 31.917,10.07 35.417,14.25 42.917,5.29 42.037,4.25 "></polygon></svg>
            <div class="alert-footer-text">
                <p>secure</p>安全加密
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
function alertSet(e) {
    document.getElementById("js-alert-box").style.display = "block", document.getElementById("js-alert-head").innerHTML = e;
    var t = 5,
        n = document.getElementById("js-sec-circle");
    document.getElementById("js-sec-text").innerHTML = t, setInterval(function() {
        //禁止其他网站调用此跳转
        //var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
        //if (!MyHOST.test(document.referrer)) {
        // location.href="http://" + MyHOST;
        //}
        if (0 == t) location.href = "<?php echo $url;?>";
        else {
            t -= 1, document.getElementById("js-sec-text").innerHTML = t;
            var e = Math.round(t / 5 * 735);
            n.style.strokeDashoffset = e - 735
        }
    }, 970)
}
</script>
<script>alertSet("<?php echo $title;?>");</script>
</body>
</html> 

外链跳转样式三

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
    //禁止其他网站使用我们的跳转页面
    var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
    if (!MyHOST.test(document.referrer)) {
         location.href="http://" + MyHOST;
    }
    location.href="<?php echo $url;?>";
}
//延时1S跳转,可自行修改延时时间
setTimeout(link_jump, 1000);
//延时50S关闭跳转页面,用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style type="text/css">
body{background:#555}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:45%;left:50%;margin-left:-100px;margin-top:2px;color:#000;letter-spacing:1px;font-size:20px;font-family:Arial}.spinner{position:absolute;top:45%;left:50%;display:block;margin-left:-160px;width:1px;height:1px;border:20px solid rgba(255,0,0,1);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}
</style>
</head>
<body>
<div class="loading">
  <div class="spinner-wrapper">
    <span class="spinner-text">鳄鱼君Ba  正在为您努力加载中,请稍候...</span>
    <span class="spinner"></span>
  </div>
</div>
</body>
</html> 

外链跳转样式四

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="robots" content="noindex, nofollow" />
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href="http://" + MyHOST;
}
}
//延时 2S 跳转,可自行修改延时时间
setTimeout(link_jump, 1000);
//延时 50S 关闭跳转页面,用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style>body{margin:0;padding:0 30px;background:#fff;font-size:12px}img{border:none}a{text-decoration:none;cursor:pointer;outline:0}a:hover{text-decoration:underline}a,a:link,a:visited{color:#1e5494}a.btn_blue:focus{border-color:#93d4fc;box-shadow:0 0 5px #60caff}a.btn_blue{display:inline-block;padding:6px 25px;margin:0;font-size:14px;font-weight:700;text-align:center;border-radius:3px;border:1px solid #0d659b;color:#fff;color:#fff!important;background-color:#238aca;background:-moz-linear-gradient(top,#238aca,#0074bc);background:-webkit-linear-gradient(top,#238aca,#0074bc);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#238aca', endColorstr='#0074bc');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#238aca', endColorstr='#0074bc')"}a.btn_blue:hover{text-decoration:none;background-color:#238aca;background:-moz-linear-gradient(top,#2a96d8,#0169a9);background:-webkit-linear-gradient(top,#2a96d8,#0169a9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a96d8', endColorstr='#0169a9');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a96d8', endColorstr='#0169a9')"}a.btn_blue:active{background-color:#238aca;background:-moz-linear-gradient(top,#0074bc,#238aca);background:-webkit-linear-gradient(top,#0074bc,#238aca);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0074bc', endColorstr='#238aca');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0074bc', endColorstr='#238aca')";outline:0}.remind_block{overflow:hidden}.remind_block .remind_content{overflow:hidden}.remind_block .remind_title{margin-bottom:10px;padding-top:3px;font-weight:700;font-size:20px;font-family:"Microsoft YaHei","lucida Grande",Verdana}.remind_block .remind_detail{line-height:1.5;font-size:16px;color:#535353}.warning .remind_title{color:#16a085}.container{max-width:640px;margin:0 auto;padding-top:25px}.header{margin-bottom:5px}.footer{margin-top:18px;text-align:center;color:#a0a0a0;font-size:10px}.content{border:1px solid #bbb;box-shadow:0 0 3px #d4d4d4}.c-container{padding:30px}.c-footer{padding:10px 15px;background:#f1f1f1;border-top:1px solid #bbb;overflow:hidden}.c-footer-a1,.c-footer-a2{float:left}.c-footer-a2{margin:8px 0 0 15px}.safety-url{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #dfdfdf;word-wrap:break-word;word-break:break-all}</style>
</head>
<body>
<div class="container">
<div class="header">
<img width="133" height="50" src="http://www.quanbaike.com/img/logo.png">
</div>
<div class="content">
<div class="c-container warning">
<div id="remind_block" class="remind_block" style="height: 260px;">
<div class="remind_content">
<div class="remind_title">
您将要访问
</div>
<div class="remind_detail">
<div class="safety-url">
<?php echo $url;?>
</div>
<span style="color:#CC0000;font-weight:800;">温馨提示:</span><br/>该网页不属于 “鳄鱼君Ba www.e1yu.com”所有,我们无法确认该网页是否安全,它可能包含未知的安全隐患,请注意保护好个人信息!
</div>
</div>
</div>
</div>
</div>
<div class="c-footer">
<a href="<?php echo $url;?>" rel="nofollow" class="c-footer-a1 btn_blue">继续访问</a><a class="c-footer-a2" href="http://www.e1yu/" rel="nofollow">返回主页</a>
</div>
</div>
</body>
</html> 

外链跳转样式五

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="renderer" content="webkit"> 
<meta name="author" content="mengkun">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="refresh" content="1;url='<?php echo $url;?>';">
<title>页面加载中,请稍候...</title>
</head>
<body>
<div class='center-box'>
    <div class='loader_overlay'></div>
    <div class='loader_cogs'>
        <div class='loader_cogs__top'>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_hole'></div>
        </div>
        <div class='loader_cogs__left'>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_hole'></div>
        </div>
        <div class='loader_cogs__bottom'>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_hole'></div>
        </div>
    </div>
    <p class="loading-text">页面加载中<dot>...</dot></p>
</div>
<script>
function closePage() {
    /* 设个定时器,如果页面未关闭,则跳转至首页 */
    setTimeout(function() { 
        window.location.href = 'https://mkblog.cn';
    }, 200);
    
    /* 通用窗口关闭 */ 
    window.opener=null;
    window.open('','_self');
    window.close();
    /* 微信浏览器关闭 */ 
    WeixinJSBridge.call('closeWindow');
}
</script>
<style>
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,select,p,blockquote,th,td{margin:0;padding:0}
ol,ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
body{font-family:"Microsoft YaHei",Arial,sans-serif;font-size:12px;color:#333}
a{color:#747474;text-decoration:none;cursor:pointer}
input,button{outline:none}
html,body{height:100%}
body{background-color:#fcfcfc}
body{height:100vh;font-family:"微软雅黑";overflow:hidden}
html,body{width:100%;height:100%}
body .center-box{left:0;right:0;top:0;bottom:150px;height:250px;width:100%;max-width:600px;position:absolute;margin:auto;z-index:10;text-align:left;box-sizing:border-box;padding:10px}
.jump-tips h3{width:100%;height:48px;font-size:28px;line-height:44px;padding-left:57px;box-sizing:border-box;position:relative}
.jump-tips h3 span{width:46px;height:46px;background-color:#f34c3c;border-radius:50%;display:inline-block;position:absolute;left:0;top:0}
.jump-tips h3 span i{width:4px;height:20px;background-color:#fff;border-radius:2px;display:block;margin:10px auto 4px}
.jump-tips h3 span em{width:4px;height:4px;background-color:#fff;border-radius:2px;display:block;margin:0 auto}
.jump-tips dl{width:100%;height:auto;overflow:hidden;box-sizing:border-box;padding-left:57px;margin-top:22px;color:#404040;font:14px/24px "微软雅黑"}
.jump-tips dl dt a{color:#2b92f2}
.jump-tips dl dt a:hover{text-decoration:underline}
.jump-tips dl dd{width:100%;height:auto;overflow:hidden;box-sizing:border-box;margin-top:10px;color:#858585;font-size:12px}
.jump-tips .button{width:100%;height:33px;position:absolute;bottom:0;left:0}
.jump-tips .button .button-left{float:left;margin-left:58px}
.jump-tips .button .button-left label{width:110px;height:34px;color:#858585;font-size:12px;line-height:34px;box-sizing:border-box;padding-left:20px;position:relative;cursor:default;user-select:none}
.jump-tips .button .button-left label input{position:absolute;left:0;top:0px;background-color:#fff}
input[type='checkbox']{-webkit-appearance:none;border-radius:2px;height:16px;width:16px;background-color:#fff;border:1px solid #A6A6A6}
input[type='checkbox']:hover{border-color:#8C8C8C}
input[type='checkbox']:checked:hover{border-color:#0DC561}
input[type='checkbox']:checked::before{color:#808080;content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAACBSURBVCiRlc2xCcJQFEDRE7VI2oCV4A6CvaiIvQs4kLOIDmAvZAALxVZwAbGwsHoQUvwktz/cbFzt9SjDEL9BD1SiwhN5V1jigjk+XY+BZrhjHXCEK47IW9ASLwg4xQ5nFG0o4BcbvLHFCZMUCgg3rGr4kUJ12MRFCjVh4AUOKQR/PfIlGJGAEgYAAAAASUVORK5CYII=);font-size:13px;height:16px;left:0px;top:-3px;position:absolute}
.jump-tips .button .button-right{padding-right:10px;width:235px;height:33px;float:right;position:relative}
.jump-tips .button .button-right a:last-child{display:inline-block;width:107px;height:31px;border:1px solid #0DC561;background-image:linear-gradient(150deg,#15ca5f,#10ce67);color:#fff;border-radius:3px;text-align:center;font-size:14px;line-height:31px;cursor:pointer;user-select:none}
.jump-tips .button .button-right a:last-child:hover{border-color:#0BD166;background-image:linear-gradient(150deg,#10d560,#12dd6f)}
.jump-tips .button .button-right a:last-child:active{border-color:#0EC361;background-image:linear-gradient(150deg,#12c35a,#10cc65)}
.jump-tips .button .button-right a:first-child{width:108px;height:33px;color:#1c8af1;margin-right:12px;font:12px/33px "微软雅黑";cursor:pointer}
.jump-tips .button .button-right a:first-child:hover{text-decoration:underline}
body .loader_overlay{width:150px;height:150px;background:transparent;box-shadow:0px 0px 0px 1000px rgba(255,255,255,0.67),0px 0px 19px 0px rgba(0,0,0,0.16) inset;border-radius:100%;z-index:-1;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
body .loader_cogs{z-index:-2;width:100px;height:100px;top:-120px !important;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
body .loader_cogs__top{position:relative;width:100px;height:100px;-webkit-transform-origin:50px 50px;transform-origin:50px 50px;-webkit-animation:rotate 6s infinite linear;animation:rotate 6s infinite linear}
body .loader_cogs__top div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}
body .loader_cogs__top div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}
body .loader_cogs__top div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}
body .loader_cogs__top div.top_part{width:100px;border-radius:10px;position:absolute;height:100px;background:#f98db9}
body .loader_cogs__top div.top_hole{width:50px;height:50px;border-radius:100%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
body .loader_cogs__left{position:relative;width:80px;-webkit-transform:rotate(16deg);transform:rotate(16deg);top:28px;-webkit-transform-origin:40px 40px;transform-origin:40px 40px;-webkit-animation:rotate_left 3s .1s infinite reverse linear;animation:rotate_left 3s .1s infinite reverse linear;left:-24px;height:80px}
body .loader_cogs__left div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}
body .loader_cogs__left div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}
body .loader_cogs__left div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}
body .loader_cogs__left div.left_part{width:80px;border-radius:6px;position:absolute;height:80px;background:#97ddff}
body .loader_cogs__left div.left_hole{width:40px;height:40px;border-radius:100%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
body .loader_cogs__bottom{position:relative;width:60px;top:-65px;-webkit-transform-origin:30px 30px;transform-origin:30px 30px;-webkit-animation:rotate_left 2s infinite linear;animation:rotate_left 2s infinite linear;-webkit-transform:rotate(4deg);transform:rotate(4deg);left:79px;height:60px}
body .loader_cogs__bottom div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}
body .loader_cogs__bottom div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}
body .loader_cogs__bottom div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}
body .loader_cogs__bottom div.bottom_part{width:60px;border-radius:5px;position:absolute;height:60px;background:#ffcd66}
body .loader_cogs__bottom div.bottom_hole{width:30px;height:30px;border-radius:100%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
.loading-text{font-size:20px;position:absolute;bottom:-40px;text-align:center;left:0;right:0;color:#b9b9b9}
dot{display:inline-block;height:1em;line-height:1;text-align:left;vertical-align:-.25em;overflow:hidden}
dot::before{display:block;content:'...\A..\A.';white-space:pre-wrap;animation:dot 2s infinite step-start both}
@keyframes dot{33%{transform:translateY(-2em)}
66%{transform:translateY(-1em)}
}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}@keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}@-webkit-keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}
to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}
}@keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}
to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}
}@-webkit-keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}
to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}
}@keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}
to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}
}
@media screen and (max-width: 500px) {body .center-box {padding: 15px;}.button-left {display: none;}.jump-tips dl {padding-left: 5px;}.jump-tips .button .button-right {padding-right: 15px;}}
</style>

</body>
</html> 

外链跳转样式六

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="refresh" content="1;url='<?php echo $url;?>';">
<meta name="robots" content="noindex,follow">
<title>加载中</title>
<script type="text/javascript">
var msg = document.title;
msg = "" + msg;pos = 0;
function scrollMSG() {
	document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
	pos++;
	if (pos >  msg.length) pos = 0
	window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

<style>body{overflow:hidden;background:#17607D}.container{display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden;animation-delay:1s}.sk-cube-grid {width: 60px;height: 60px;margin-top:-45px;}.sk-cube-grid .sk-cube {width: 33.33%;height: 33.33%;background-color: #fff;float: left;-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;}.sk-cube-grid .sk-cube1 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}.sk-cube-grid .sk-cube2 {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}.sk-cube-grid .sk-cube3 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}.sk-cube-grid .sk-cube4 {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}.sk-cube-grid .sk-cube5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}.sk-cube-grid .sk-cube6 {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}.sk-cube-grid .sk-cube7 {-webkit-animation-delay: 0.0s;animation-delay: 0.0s;}.sk-cube-grid .sk-cube8 {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}.sk-cube-grid .sk-cube9 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}@-webkit-keyframes sk-cubeGridScaleDelay {0%,70%,100% {-webkit-transform: scale3D(1, 1, 1);transform: scale3D(1, 1, 1);}35% {-webkit-transform: scale3D(0, 0, 1);transform: scale3D(0, 0, 1);}}@keyframes sk-cubeGridScaleDelay {0%,70%,100% {-webkit-transform: scale3D(1, 1, 1);transform: scale3D(1, 1, 1);}35% {-webkit-transform: scale3D(0, 0, 1);transform: scale3D(0, 0, 1);}}</style>
</head>
<body>
	<div class="container">
		<div class="sk-cube-grid">
        	<div class="sk-cube sk-cube1"></div>
        	<div class="sk-cube sk-cube2"></div>
        	<div class="sk-cube sk-cube3"></div>
        	<div class="sk-cube sk-cube4"></div>
        	<div class="sk-cube sk-cube5"></div>
        	<div class="sk-cube sk-cube6"></div>
        	<div class="sk-cube sk-cube7"></div>
        	<div class="sk-cube sk-cube8"></div>
        	<div class="sk-cube sk-cube9"></div>
      	</div>
	</div>
</body>
</html>

这么多的样式,自己喜欢哪个添加哪个,都是换汤不换药的方式,更换样式只需要修改html即可,但前提是你需要建好文件,在function中加入替换url的代码,不然你需要手动替换,很麻烦的。最后你需要在你的robots文件中添加Disallow: /go/,禁止爬虫抓取这个页面,如果你还不知道robots的话,可以看一下这篇文章

分享到 :

发表评论

登录... 后才能评论