源码介绍
网站动态文字广告安全检测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秒后,会自动跳转至广告地址。
效果预览
© 版权声明
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:317608094@qq.com
THE END
暂无评论内容