2024网站动态文字广告安全检测跳转源码

源码介绍

网站动态文字广告安全检测html源码,适合做网址跳转提示页,简约美观,喜欢的朋友可以拿去使用

使用方法

1.创建一个空白文件,命名ad.html或者go.html

2.将下面代码拷贝到创建的html文件里面,代码如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>大叔奶茶源码(www.naicha2024.cn)提醒您-广告正在加载中...</title>  
  <style>
    body {
      font-family:Fredoka One,cursive;
      font-size:1pc;
      margin:0;
      background: linear-gradient(to right, #bb313e25, #bb313e25, #d7222925, #dd4a1625, #e4761525, #f5c50025, #f0e92725, #b1ce2425, #48a93525, #03944525, #157c4f25, #176a5825, #1b556325, #1d386f25, #1d386f25, #20277825, #52266325, #8a244b25);
    }
    #app {
      display:-ms-flexbox;
      display:flex;
      -ms-flex-pack:center;
      justify-content:center;
      -ms-flex-align:center;
      align-items:center;
      min-height:100vh;
      overflow:hidden
    }
    .text-wrapper {
      padding:0 1rem;
      max-width:50rem;
      width:100%;
      text-align:center
    }
    .text {
      font-size:5em;
      text-transform:uppercase;
      letter-spacing:2px;
      font-family:"Microsoft YaHei";
    }
    .text .letter {
      position:relative;
      display:inline-block;
      transition:all .4s
    }
    .text .letter .character {
      opacity:.65;
      transition:color .4s;
      cursor:pointer
    }
    .text .letter span {
      position:absolute;
      bottom:-1rem;
      left:.4rem;
      display:block;
      width:100%;
      height:15px
    }
    .text .letter span:before {
      content:'';
      position:absolute;
      top:50%;
      left:50%;
      width:0;
      height:0;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:rgba(0,0,0,.25)
    }
    .text .letter:hover .character {
      color:#fff!important
    }
    .text.part1 .letter:nth-child(1).poofed {
      transform-origin:50% 50%;
      animation:poofing1 1.4s ease-in-out infinite alternate
    }
    @keyframes poofing1 {
      0% {
      transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part1 .letter:nth-child(1) .character {
      color:#f44336;
      animation:wave 1.2s linear infinite;
      animation-delay:.33333s
    }
    .text.part1 .letter:nth-child(1) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:.33333s
    }
    .text.part1 .letter:nth-child(2).poofed {
      transform-origin:50% 50%;
      animation:poofing2 1.4s ease-in-out infinite alternate
    }
    @keyframes poofing2 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part1 .letter:nth-child(2) .character {
      color:#9c27b0;
      animation:wave 1.2s linear infinite;
      animation-delay:.66667s
    }
    .text.part1 .letter:nth-child(2) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:.66667s
    }
    .text.part1 .letter:nth-child(3).poofed {
      transform-origin:50% 50%;
      animation:poofing3 1.4s ease-in-out infinite alternate
    }
    @keyframes poofing3 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part1 .letter:nth-child(3) .character {
      color:#f99b0c;
      animation:wave 1.2s linear infinite;
      animation-delay:1s
    }
    .text.part1 .letter:nth-child(3) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:1s
    }
    .text.part1 .letter:nth-child(4).poofed {
      transform-origin:50% 50%;
      animation:poofing4 1.4s ease-in-out infinite alternate
    }
    @keyframes poofing4 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(42deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(42deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part1 .letter:nth-child(4) .character {
      color:#cee007;
      animation:wave 1.2s linear infinite;
      animation-delay:1.33333s
    }
    .text.part1 .letter:nth-child(4) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:1.33333s
    }
    .text.part1 .letter:nth-child(5).poofed {
      transform-origin:50% 50%;
      animation:poofing5 1.4s ease-in-out infinite alternate
    }
    @keyframes poofing5 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(384deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(384deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part1 .letter:nth-child(5) .character {
      color:#00c6b2;
      animation:wave 1.2s linear infinite;
      animation-delay:1.66667s
    }
    .text.part1 .letter:nth-child(5) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:1.66667s
    }
    .text.part1 .letter:nth-child(6).poofed {
      transform-origin:50% 50%;
      animation:poofing6 1.4s ease-in-out infinite alternate
    }
    @keyframes poofing6 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part1 .letter:nth-child(6) .character {
      color:#f44336;
      animation:wave 1.2s linear infinite;
      animation-delay:2s
    }
    .text.part1 .letter:nth-child(6) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:2s
    }
    .text.part1 .letter:nth-child(7).poofed {
      transform-origin:50% 50%;
      animation:poofing7 1.4s ease-in-out infinite alternate
    }
    @keyframes poofing7 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part1 .letter:nth-child(7) .character {
      color:#4caf50;
      animation:wave 1.2s linear infinite;
      animation-delay:2.5s
    }
    .text.part1 .letter:nth-child(7) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:3s
    }
    .text.part2 span:nth-child(1).poofed {
      animation:sec_poofing1 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing1 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(268deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(268deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part2 span:nth-child(1) .character {
      color:#ff5a5f;
      animation:wave 1.2s linear infinite;
      animation-delay:2.33333s
    }
    .text.part2 span:nth-child(1) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:2.33333s
    }
    .text.part2 span:nth-child(2).poofed {
      animation:sec_poofing2 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing2 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(135deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(135deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part2 span:nth-child(2) .character {
      color:#f99b0c;
      animation:wave 1.2s linear infinite;
      animation-delay:2.66667s
    }
    .text.part2 span:nth-child(2) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:2.66667s
    }
    .text.part2 span:nth-child(3).poofed {
      animation:sec_poofing3 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing3 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(442deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(442deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part2 span:nth-child(3) .character {
      color:#cee007;
      animation:wave 1.2s linear infinite;
      animation-delay:3s
    }
    .text.part2 span:nth-child(3) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:3s
    }
    .text.part2 span:nth-child(4).poofed {
      animation:sec_poofing4 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing4 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(525deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(525deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part2 span:nth-child(4) .character {
      color:#00c6b2;
      animation:wave 1.2s linear infinite;
      animation-delay:3.33333s
    }
    .text.part2 span:nth-child(4) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:3.33333s
    }
    .text.part2 span:nth-child(5).poofed {
      animation:sec_poofing5 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing5 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(419deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(419deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part2 span:nth-child(5) .character {
      color:#4e2a84;
      animation:wave 1.2s linear infinite;
      animation-delay:3.66667s
    }
    .text.part2 span:nth-child(5) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:3.66667s
    }
    .text.part2 span:nth-child(6).poofed {
      animation:sec_poofing6 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing6 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(246deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(246deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part2 span:nth-child(6) .character {
      color:#9c27b0;
      animation:wave 1.2s linear infinite;
      animation-delay:4s
    }
    .text.part2 span:nth-child(6) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:4s
    }
    .text.part2 span:nth-child(7).poofed {
      animation:sec_poofing7 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing7 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(206deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(206deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part2 span:nth-child(7) .character {
      color:#f99b0c;
      animation:wave 1.2s linear infinite;
      animation-delay:4.33333s
    }
    .text.part2 span:nth-child(7) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:4.33333s
    }
    .text.part2 span:nth-child(8).poofed {
      animation:sec_poofing8 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing8 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(60deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(60deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }.text.part2 span:nth-child(8) .character {
      color:#cee007;
      animation:wave 1.2s linear infinite;
      animation-delay:4.66667s
    }
    .text.part2 span:nth-child(8) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:4.66667s
    }
    .text.part2 span:nth-child(9).poofed {
      animation:sec_poofing9 1.4s ease-in-out infinite alternate
    }
    @keyframes sec_poofing9 {
      0% {
        transform:rotateZ(0deg) rotateY(0) translateY(0px) scale(1)
      }
      50% {
        transform:rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1)
      }
      56% {
        transform:rotateZ(496deg) rotateY(360deg) translateY(0px) scale(1)
      }
      to {
        transform:rotateZ(496deg) rotateY(360deg) translateY(-700px) scale(0.01)
      }
    }
    .text.part2 span:nth-child(9) .character {
      color:#00c6b2;
      animation:wave 1.2s linear infinite;
      animation-delay:5s
    }
    .text.part2 span:nth-child(9) span:before {
      animation:shadow 1.2s linear infinite;
      animation-delay:5s
    }
    @keyframes wave {
      0% {
        transform:translateY(0)
      }
      50% {
        transform:translateY(-10px)
      }
      to {
        transform:translateY(0)
      }
    }@keyframes shadow {
      0% {
        width:0;
        height:0
      }
      50% {
        width:100%;
        height:100%
      }
      to {
        width:0;
        height:0
      }
    }
    .how-to {
      margin:2rem 0 2rem 1rem;
      font-family:Opens Sans,sans-serif;
      font-weight:300;
      font-size:.85em;
      letter-spacing:4px;
      color:rgba(0,0,0,.8)
    }
    @keyframes rotate {
      0% {
        transform:rotateZ(0) scale(0.7)
      }
      to {
        transform:rotateZ(360deg) scale(0.7)
      }
    }
    @media only screen and (max-width:767px) {
      .text {
        font-size:6em
      }
      .text .letter span {
        bottom:.5rem
      }
    }
    @media only screen and (max-width:480px) {
      .text {
        font-size:4em
      }
      .text .letter span {
        bottom:0
      }
    }
  </style> 
</head>
<body>  
<div id="app">
  <div class="text-wrapper">
    <div class="text part1">
      <div>
        <span class="letter"><div class="character">广</div> <span></span></span>
        <span class="letter"><div class="character">告</div> <span></span></span>
        <span class="letter"><div class="character">加</div> <span></span></span>
        <span class="letter"><div class="character">载</div> <span></span></span>
        <span class="letter"><div class="character">中</div> <span></span></span>
      </div>
    </div>
    <div class="how-to"><span><strong id="seconds" style="color: red;font-size: 20px;">3</strong>秒后跳转到第三方网站</span></div>
    <div class="how-to"><span>第三方网站与本站无关,请自行判断,谨慎交易。</span></div>
  </div>
</div>
</body>
</html>
<script>
  // 获取当前url地址
  var url = window.location.href;
  // 截取传递的url参数
  url = url.match(/tpurl=(\S*)/)[1];
  // 获取秒数显示id
  var seconds = document.getElementById("seconds");
  // 设置秒数
    var num = 3;
    var timer = setInterval(function () {
        num--;
        seconds.innerText = num;
        if(num == 0){
            window.location.href = url;
        }
    },1000)
</script>

3.将创建的html文件上传到服务器或者虚拟主机里面,然后根据域名或者ip访问,如 网址/ad.html?tpurl=

tpurl= 后跟需要跳转的地址,

http://www.naicha2024.cn/ad.html + ?tpurl= + 广告地址

访问后,会先到警告页面,等待3秒后,会自动跳转至广告地址。

效果预览

图片[1]-2024网站动态文字广告安全检测跳转源码-QQ沐编程

© 版权声明
THE END
喜欢大叔奶茶源码就支持一下吧
点赞2 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容