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

29

源码介绍

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

使用方法

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

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ沐编程(www.qqmu.com)提醒您-广告正在加载中...</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.qqmu.com/ad.html + ?tpurl= + 广告地址

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

效果预览

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

 

© 版权声明
本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！
THE END
html模块
# JS+CSS+HTML5
喜欢就支持一下吧
点赞9赞赏 分享
沐编程的头像-QQ沐编程
计算机专业相关的毕业设计论文合集免费下载-QQ沐编程
计算机专业相关的毕业设计论文合集免费下载
计算机专业相关的毕业设计论文合集免费下载
3个月前 3717
161套javaWeb项目源码免费分享-QQ沐编程
161套javaWeb项目源码免费分享
161套javaWeb项目源码免费分享
1年前 3519
javaweb+C+asp毕业设计项目合集免费下载-QQ沐编程
javaweb+C+asp毕业设计项目合集免费下载
javaweb+C+asp毕业设计项目合集免费下载
3个月前 2967
javaWeb毕业设计项目完整源码附带论文合集免费下载-QQ沐编程
javaWeb毕业设计项目完整源码附带论文合集免费下载
javaWeb毕业设计项目完整源码附带论文合集免费下载
2年前 2323
Live2d资源模型包合集免费下载-QQ沐编程
Live2d资源模型包合集免费下载
Live2d资源模型包合集免费下载
5个月前 1539
本站第一篇：QQ沐编程启航-QQ沐编程
本站第一篇：QQ沐编程启航
本站第一篇：QQ沐编程启航
2年前 1281
相关推荐
在线QQ价值评估网站HTML源码-QQ沐编程
在线QQ价值评估网站HTML源码
在线QQ价值评估网站HTML源码
2个月前 55
WordPress插件介绍页源码单页Html源码-QQ沐编程
WordPress插件介绍页源码单页Html源码
WordPress插件介绍页源码单页Html源码
3小时前 39
精品软件下载介绍页HTML源码-QQ沐编程
精品软件下载介绍页HTML源码
精品软件下载介绍页HTML源码
3个月前 20
2024生日快乐祝福HTML源码修复版-QQ沐编程
2024生日快乐祝福HTML源码修复版
2024生日快乐祝福HTML源码修复版
1个月前 14
王者英雄最低战力在线一键查询HTML源码-QQ沐编程
王者英雄最低战力在线一键查询HTML源码
王者英雄最低战力在线一键查询HTML源码
25天前 13
六款超好看的登录页面HTML源码-QQ沐编程
六款超好看的登录页面HTML源码
六款超好看的登录页面HTML源码
3个月前 13
用户封面
沐编程的头像-QQ沐编程
WordPress插件介绍页源码单页Html源码
二次元风格网站维护页HTML源码
好看的个人导航网HTML源码
搜索
开启精彩搜索
热门文章
计算机专业相关的毕业设计论文合集免费下载-QQ沐编程

计算机专业相关的毕业设计论文合集免费下载

随心随笔# php# javaweb
沐编程的头像-QQ沐编程3个月前
3717300
161套javaWeb项目源码免费分享-QQ沐编程

161套javaWeb项目源码免费分享

java项目项目专区# java# 毕业设计# 课程设计
沐编程的头像-QQ沐编程1年前
351917
javaweb+C+asp毕业设计项目合集免费下载-QQ沐编程

javaweb+C+asp毕业设计项目合集免费下载

java项目# C语言# javaweb
沐编程的头像-QQ沐编程3个月前
2967452
javaWeb毕业设计项目完整源码附带论文合集免费下载-QQ沐编程

javaWeb毕业设计项目完整源码附带论文合集免费下载

java项目项目专区# 毕业设计# javaweb
沐编程的头像-QQ沐编程2年前
2323215
Live2d资源模型包合集免费下载-QQ沐编程

Live2d资源模型包合集免费下载

随心随笔# live2d
沐编程的头像-QQ沐编程5个月前
153966
本站第一篇：QQ沐编程启航-QQ沐编程

本站第一篇：QQ沐编程启航

随心随笔
沐编程的头像-QQ沐编程2年前
128196
标签云
麻雀搜索算法饿了么领取红包面试防骗宣传链表配置镜像选课系统迷宫求解远程链接服务器远程仓库软考中级软件下载页源码跳转源码赏帮赚负载均衡课程设计订单报销表白源码若依