源码介绍
网站动态文字广告安全检测html源码，适合做网址跳转提示页，简约美观，喜欢的朋友可以拿去使用
效果预览
使用方法
1.创建一个空白文件，命名ad.html或者go.html
2.将下面代码拷贝到创建的html文件里面
3.将创建的html文件上传到服务器或者虚拟主机里面，然后根据域名或者ip访问，如 网址/ad.html?tpurl=
tpurl= 后跟需要跳转的地址，
http://www.xxx.com/ad.html + ?tpurl= + 广告地址
访问后，会先到警告页面，等待3秒后，会自动跳转至广告地址。
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告正在加载中...</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)