美观的PHP跳转页面代码

其他 2019-11-22 21:50:48 阅读次数: 0

代码简介

代码来源 无意中浏览她辰博客 也就是现在的SKin博客 go跳转代码 感觉很不错页面 F12搞下来了 分享给需要跳转的人使用 这里我说下 第8行代码 11代表是跳转的秒数 网址代表是要跳转的网址哦

代码如下

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="renderer" content="webkit">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8. <meta http-equiv="refresh" content="11;url='http://www.tx47.cn';">
  9. <title>页面加载中,请稍候...</title>
  10. </head>
  11. <body>
  12.  
  13.  
  14. <div class='center-box'>
  15. <div class='loader_overlay'></div>
  16. <div class='loader_cogs'>
  17. <div class='loader_cogs__top'>
  18. <div class='top_part'></div>
  19. <div class='top_part'></div>
  20. <div class='top_part'></div>
  21. <div class='top_hole'></div>
  22. </div>
  23. <div class='loader_cogs__left'>
  24. <div class='left_part'></div>
  25. <div class='left_part'></div>
  26. <div class='left_part'></div>
  27. <div class='left_hole'></div>
  28. </div>
  29. <div class='loader_cogs__bottom'>
  30. <div class='bottom_part'></div>
  31. <div class='bottom_part'></div>
  32. <div class='bottom_part'></div>
  33. <div class='bottom_hole'></div>
  34. </div>
  35. </div>
  36. <p class="loading-text">页面加载中<dot>...</dot></p>
  37. </div>
  38. <script>
  39. function closePage() {
  40. /* 通用窗口关闭 */
  41. window.opener=null;
  42. window.open('','_self');
  43. window.close();
  44. /* 微信浏览器关闭 */
  45. WeixinJSBridge.call('closeWindow');
  46. }
  47. </script>
  48. <style>
  49. 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}
  50. ol,ul{list-style:none}
  51. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
  52. input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
  53. input,textarea,select{*font-size:100%}
  54. body{font-family:"Microsoft YaHei",Arial,sans-serif;font-size:12px;color:#333}
  55. a{color:#747474;text-decoration:none;cursor:pointer}
  56. input,button{outline:none}
  57. html,body{height:100%}
  58. body{background-color:#fcfcfc}
  59. body{height:100vh;font-family:"微软雅黑";overflow:hidden}
  60. html,body{width:100%;height:100%}
  61. 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}
  62. .jump-tips h3{width:100%;height:48px;font-size:28px;line-height:44px;padding-left:57px;box-sizing:border-box;position:relative}
  63. .jump-tips h3 span{width:46px;height:46px;background-color:#f34c3c;border-radius:50%;display:inline-block;position:absolute;left:0;top:0}
  64. .jump-tips h3 span i{width:4px;height:20px;background-color:#fff;border-radius:2px;display:block;margin:10px auto 4px}
  65. .jump-tips h3 span em{width:4px;height:4px;background-color:#fff;border-radius:2px;display:block;margin:0 auto}
  66. .jump-tips dl{width:100%;height:auto;overflow:hidden;box-sizing:border-box;padding-left:57px;margin-top:22px;color:#404040;font:14px/24px "微软雅黑"}
  67. .jump-tips dl dt a{color:#2b92f2}
  68. .jump-tips dl dt a:hover{text-decoration:underline}
  69. .jump-tips dl dd{width:100%;height:auto;overflow:hidden;box-sizing:border-box;margin-top:10px;color:#858585;font-size:12px}
  70. .jump-tips .button{width:100%;height:33px;position:absolute;bottom:0;left:0}
  71. .jump-tips .button .button-left{float:left;margin-left:58px}
  72. .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}
  73. .jump-tips .button .button-left label input{position:absolute;left:0;top:0px;background-color:#fff}
  74. input[type='checkbox']{-webkit-appearance:none;border-radius:2px;height:16px;width:16px;background-color:#fff;border:1px solid #A6A6A6}
  75. input[type='checkbox']:hover{border-color:#8C8C8C}
  76. input[type='checkbox']:checked:hover{border-color:#0DC561}
  77. 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}
  78. .jump-tips .button .button-right{padding-right:10px;width:235px;height:33px;float:right;position:relative}
  79. .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}
  80. .jump-tips .button .button-right a:last-child:hover{border-color:#0BD166;background-image:linear-gradient(150deg,#10d560,#12dd6f)}
  81. .jump-tips .button .button-right a:last-child:active{border-color:#0EC361;background-image:linear-gradient(150deg,#12c35a,#10cc65)}
  82. .jump-tips .button .button-right a:first-child{width:108px;height:33px;color:#1c8af1;margin-right:12px;font:12px/33px "微软雅黑";cursor:pointer}
  83. .jump-tips .button .button-right a:first-child:hover{text-decoration:underline}
  84. 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}
  85. 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}
  86. 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}
  87. body .loader_cogs__top div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}
  88. body .loader_cogs__top div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}
  89. body .loader_cogs__top div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}
  90. body .loader_cogs__top div.top_part{width:100px;border-radius:10px;position:absolute;height:100px;background:#f98db9}
  91. 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}
  92. 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}
  93. body .loader_cogs__left div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}
  94. body .loader_cogs__left div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}
  95. body .loader_cogs__left div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}
  96. body .loader_cogs__left div.left_part{width:80px;border-radius:6px;position:absolute;height:80px;background:#97ddff}
  97. 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}
  98. 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}
  99. body .loader_cogs__bottom div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}
  100. body .loader_cogs__bottom div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}
  101. body .loader_cogs__bottom div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}
  102. body .loader_cogs__bottom div.bottom_part{width:60px;border-radius:5px;position:absolute;height:60px;background:#ffcd66}
  103. 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}
  104. .loading-text{font-size:20px;position:absolute;bottom:-40px;text-align:center;left:0;right:0;color:#b9b9b9}
  105. dot{display:inline-block;height:1em;line-height:1;text-align:left;vertical-align:-.25em;overflow:hidden}
  106. dot::before{display:block;content:'...\A..\A.';white-space:pre-wrap;animation:dot 2s infinite step-start both}
  107. @keyframes dot{33%{transform:translateY(-2em)}
  108. 66%{transform:translateY(-1em)}
  109. }@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  110. to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
  111. }@keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  112. to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
  113. }@-webkit-keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}
  114. to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}
  115. }@keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}
  116. to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}
  117. }@-webkit-keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}
  118. to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}
  119. }@keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}
  120. to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}
  121. }
  122. </style>
  123.  
  124. </body>
  125. </html>

猜你喜欢

转载自www.cnblogs.com/pz78978/p/11914281.html
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022