php教程

PHP页面过度跳转效果代码

精准像素 2020-08-30 人阅读

PHP+CSS3小脑袋无限吃球球动态效果,页面过度跳转,具体效果如下图

PHP页面过度跳转效果代码

PHP页面过度跳转效果代码

 <?php 
$t_url=$_GET['url'];
if(!empty($t_url)) {
 preg_match('/(http|https):///',$t_url,$matches);
 if($matches){
 $url=htmlspecialchars($t_url);
 $title='亲爱的朋友记得常回来哦...';
 } else {
 preg_match('/./i',$t_url,$matche);
 if($matche){
 $url='http://'.htmlspecialchars($t_url);
 $title='亲爱的朋友记得常回来哦...';
 } else {
 $url='http://www.11px.cn/';
 $title='参数错误,正在返回首页...';
 }
 }
} else {
 $title='参数缺失,正在返回首页...';
 $url='http://www.11px.cn/';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="1;url='<?php echo $url;?>';">
<title><?php echo $title;?></title>
<div id="circle"></div>
<div id="circletext"></div>
<div id="circle1"></div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="1;url='<?php echo $url;?>';">
<title><?php echo $title;?></title>
<style type="text/css">
        body{background:#999;margin:0;}.loader{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s;position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;}@-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}}.loader-inner{position:absolute;z-index:300;top:40%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}@-webkit-keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}}@keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}}@-webkit-keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}}@keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}}@-webkit-keyframes pacman-balls{75%{opacity:0.7;}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}}@keyframes pacman-balls{75%{opacity:0.7;}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}}.pacman > div:nth-child(2){-webkit-animation:pacman-balls 1s 0s infinite linear;animation:pacman-balls 1s 0s infinite linear;}.pacman > div:nth-child(3){-webkit-animation:pacman-balls 1s 0.33s infinite linear;animation:pacman-balls 1s 0.33s infinite linear;}.pacman > div:nth-child(4){-webkit-animation:pacman-balls 1s 0.66s infinite linear;animation:pacman-balls 1s 0.66s infinite linear;}.pacman > div:nth-child(5){-webkit-animation:pacman-balls 1s 0.99s infinite linear;animation:pacman-balls 1s 0.99s infinite linear;}.pacman > div:first-of-type{width:0px;height:0px;border-right:25px solid transparent;border-top:25px solid #e1244e;border-left:25px solid #e1244e;border-bottom:25px solid #e1244e;border-radius:25px;-webkit-animation:rotate_pacman_half_up 0.5s 0s infinite;animation:rotate_pacman_half_up 0.5s 0s infinite;}.pacman > div:nth-child(2){width:0px;height:0px;border-right:25px solid transparent;border-top:25px solid #e1244e;border-left:25px solid #e1244e;border-bottom:25px solid #e1244e;border-radius:25px;-webkit-animation:rotate_pacman_half_down 0.5s 0s infinite;animation:rotate_pacman_half_down 0.5s 0s infinite;margin-top:-50px;}.pacman > div:nth-child(3),.pacman > div:nth-child(4),.pacman > div:nth-child(5),.pacman > div:nth-child(6){background-color:#e1244e;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);-ms-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:100px;}.loader-text{margin:20px 0 0 -16px;display:block;font-size: 18px;}
    </style>
</head>
<body>
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <span class="loader-text">页面加载中,请稍候...</span>
        </div>
    </div>
</body>
</html>

代码使用方法

复制以上代码,报错到一个PHP文件中,浏览器访问:域名/ulr.php?需要跳转的地址,如:域名/url.php?http://www.11px.cn/

相关推荐
  • 跳转页面模板
  • HTML广告跳转过度页面
    HTML广告跳转过度页面

    一款HTML广告跳转过度页面,存HTML+CSS+JS制作,就一个页面,模板的作用主要就是提示用户这是第三方广告,交易前请谨慎。 把文件传到根目录,然后挂广告的链接格式:https://你的域名/ad.html?url=广告商域...

    html模板 209 11个月前
  • HTML简洁的loading加载页面跳转网站模板
    HTML简洁的loading加载页面跳转网站模板

    简单的HTML+JS+CSS页面loading跳转效果网站模板,修改非常简单。模板页面最下面的JS中的url变量为最后跳转的地址,修改这个为您的地址就可以了。...

    html模板 481 1年前
  • 简单的404跳转网站模板
    简单的404跳转网站模板

    简单的404跳转网站模板,删除了自带的广告链接,所有图片素材全部本地化。

    html模板 174 11个月前