设为首页收藏本站

 找回密码
 注册论坛

QQ登录

只需一步,快速开始

用百度帐号登录

只需两步,快速登录

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 4002|回复: 2

kangle cc防护 html倒计时特效,duang duang duang 浏览器安全检查中… itzmx.com.

[复制链接]

签到天数: 2540 天

[LV.Master]伴坛终老

 成长值: 22440
发表于 2016/2/14 01:14 | 显示全部楼层 |阅读模式 |Google Chrome 48.0.2564.103|Windows 10
天涯海角搜一下: 百度 谷歌 360 搜狗 有道 雅虎 必应 即刻
1.jpg

测试防护效果比用302和JS方式好用的多。


  1. HTTP/1.1 200 OK
  2. Content-Type: text/html; charset=utf-8
  3. Connection: close
  4. Cache-Control: no-cache,no-store
  5. Recaptcha: sakura

  6. <html>
  7. <head>
  8. <meta charset="UTF-8">
  9. <!--[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]-->
  10. <title>浏览器安全检查中… itzmx.com.</title>
  11. <style>
  12. body {
  13.         margin: 0;
  14.         padding: 0;
  15.         background: #E6EAEB;
  16.         font-family: Arial, '微软雅黑', '宋体', sans-serif
  17. }
  18. .alert-box {
  19.         display: none;
  20.         position: relative;
  21.         margin: 96px auto 0;
  22.         padding: 180px 85px 22px;
  23.         border-radius: 10px 10px 0 0;
  24.         background: #FFF;
  25.         box-shadow: 5px 9px 17px rgba(102,102,102,0.75);
  26.         width: 286px;
  27.         color: #FFF;
  28.         text-align: center
  29. }
  30. .alert-box p {
  31.         margin: 0
  32. }
  33. .alert-circle {
  34.         position: absolute;
  35.         top: -50px;
  36.         left: 111px
  37. }
  38. .alert-sec-circle {
  39.         stroke-dashoffset: 0;
  40.         stroke-dasharray: 735;
  41.         transition: stroke-dashoffset 1s linear
  42. }
  43. .alert-sec-text {
  44.         position: absolute;
  45.         top: 11px;
  46.         left: 190px;
  47.         width: 76px;
  48.         color: #000;
  49.         font-size: 68px
  50. }
  51. .alert-sec-unit {
  52.         font-size: 34px
  53. }
  54. .alert-body {
  55.         margin: 35px 0
  56. }
  57. .alert-head {
  58.         color: #242424;
  59.         font-size: 28px
  60. }
  61. .alert-concent {
  62.         margin: 25px 0 14px;
  63.         color: #7B7B7B;
  64.         font-size: 18px
  65. }
  66. .alert-concent p {
  67.         line-height: 27px
  68. }
  69. .alert-btn {
  70.         display: block;
  71.         border-radius: 10px;
  72.         background-color: #4AB0F7;
  73.         height: 55px;
  74.         line-height: 55px;
  75.         width: 286px;
  76.         color: #FFF;
  77.         font-size: 20px;
  78.         text-decoration: none;
  79.         letter-spacing: 2px
  80. }
  81. .alert-btn:hover {
  82.         background-color: #6BC2FF
  83. }
  84. .alert-footer {
  85.         margin: 0 auto;
  86.         height: 42px;
  87.         width: 120px
  88. }
  89. .alert-footer-icon {
  90.         float: left
  91. }
  92. .alert-footer-text {
  93.         float: left;
  94.         border-left: 2px solid #EEE;
  95.         padding: 3px 0 0 5px;
  96.         height: 40px;
  97.         color: #0B85CC;
  98.         font-size: 12px;
  99.         text-align: left
  100. }
  101. .alert-footer-text p {
  102.         color: #7A7A7A;
  103.         font-size: 22px;
  104.         line-height: 18px
  105. }
  106. </style>
  107. </head>
  108. <body class="ie8">
  109. <div id="js-alert-box" class="alert-box">
  110.         <svg class="alert-circle" width="234" height="234">
  111.                 <circle cx="117" cy="117" r="108" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle>
  112.                 <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)"></circle>
  113.                 <text class="alert-sec-unit" x="82" y="172" fill="#BDBDBD">秒</text>
  114.         </svg>
  115.         <div id="js-sec-text" class="alert-sec-text"></div>
  116.         <div class="alert-body">
  117.                 <div id="js-alert-head" class="alert-head"></div>
  118.                 <div class="alert-concent">
  119.                         <p>花个3分钟创建属于您的个人帐号</p>
  120.                         <p>您将在我们的网站享受更多</p>
  121.                 </div>
  122.                 <a href="javascript:;" target="_blank" class="alert-btn" id="js-alert-btn" style="display:none">立即前往注册</a>
  123.         </div>
  124.         <div class="alert-footer clearfix">
  125.                 <svg width="46px" height="42px" class="alert-footer-icon">
  126.                         <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"/>
  127.                         <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"/>
  128.                         <circle fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" cx="35.417" cy="10.75" r="6.5"/>
  129.                         <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 "/>
  130.                 </svg>
  131.                 <div class="alert-footer-text"><p>secure</p>安全加密 </div>
  132.         </div>
  133. </div>
  134. <script type="text/javascript">
  135. function alertSet(e) {
  136.     document.getElementById("js-alert-box").style.display = "block",
  137.     document.getElementById("js-alert-head").innerHTML = e;
  138.     var t = 5,
  139.     n = document.getElementById("js-sec-circle");
  140.     document.getElementById("js-sec-text").innerHTML = t,
  141.     setInterval(function() {
  142.         if (1 > t){
  143.                         location.href="{{murl}}";
  144.                 }else {
  145.             t -= 1,
  146.             document.getElementById("js-sec-text").innerHTML = t;
  147.             var e = Math.round(t / 5 * 735);
  148.             n.style.strokeDashoffset = e - 735
  149.         }
  150.                 if (2 == t){
  151.                         document.getElementById("js-alert-btn").setAttribute("href","{{murl}}");
  152.                         document.getElementById("js-alert-btn").setAttribute("style","font-weight:bold");
  153.                 }
  154.     },
  155.     970);
  156. }
  157. </script>
  158. <script>alertSet('前往会员注册');</script>
  159. </body>
  160. </html>
复制代码



3月18日,根据繁星建议改写成拼凑URL模式。

[发帖际遇]: 小樱 发帖时在路边捡到 2 樱币,偷偷放进了口袋. 幸运榜 / 衰神榜
欢迎光临IT技术交流论坛:http://bbs.itzmx.com/
回复

使用道具 举报

签到天数: 6 天

[LV.2]偶尔看看I

发表于 2016/10/13 03:41 | 显示全部楼层 |Google Chrome 50.0.2661.102|Windows 7
怎么用啊?求简单教程
欢迎光临IT技术交流论坛:http://bbs.itzmx.com/
回复 支持 反对

使用道具 举报

签到天数: 2540 天

[LV.Master]伴坛终老

 成长值: 22440
发表于 2016/10/13 12:45 | 显示全部楼层 |Google Chrome 45.0.2454.101|Windows 7
冷曦 发表于 2016/10/13 03:41
怎么用啊?求简单教程

kangle 请求控制 标记模块 acc那个 复制填入就行了
欢迎光临IT技术交流论坛:http://bbs.itzmx.com/
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册论坛 用百度帐号登录新浪微博账号登陆

本版积分规则

手机版|Archiver|Mail me|网站地图|IT技术交流论坛 ( 闽ICP备13013206号-7 )

GMT+8, 2018/12/17 09:03 , Processed in 0.233258 second(s), 44 queries , Gzip On, Memcache On.

Powered by itzmx!

© 2011-2018 sakura

快速回复 返回顶部 返回列表