HTML+JS+CSS 实现随机跳转到一个网址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>即将奔赴</title>
<link rel="shortcut icon" href="链接">
<style type="text/css">
* {
color: #111827;
}
a {
text-decoration: none;
}
.blink {
position: fixed;
height: 100%;
width: 100%;
text-align: center;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
animation: blink 3s linear infinite;
-webkit-animation: blink 3s linear infinite;
-moz-animation: blink 3s linear infinite;
-ms-animation: blink 3s linear infinite;
-o-animation: blink 3s linear infinite;
}
.all_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 780px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(链接);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
@keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
@-webkit-keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
@-moz-keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
@-ms-keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
@-o-keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
.botCenter {
position: fixed;
width: 100%;
height: 50px;
bottom: 2px;
line-height: 20px;
font-size: 12px;
text-align: center;
animation: botCenter 3s linear;
-webkit-animation: botCenter 3s linear;
-moz-animation: botCenter 3s linear;
-ms-animation: botCenter 3s linear;
-o-animation: botCenter 3s linear;
}
@keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-ms-keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-o-keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="blink">
<a href="链接" target="_blank"
title="点击加入“奔赴”，分享网站流量 :-)">欢迎回来，即将奔赴<br />Welcome back, coming soon...</a>
</div>
<script>
function jumpUrl(){
var arr = new Array(
"随机链接1",
"随机链接2",
"随机链接3",
"随机链接4",
"随机链接5",
);
window.location.href = arr[Math.floor(Math.random() * arr.length)];
}
setTimeout(function () {
jumpUrl();},5000);//设定跳转时间，1s=1000
</script>
<div class="all_bg"></div>
</body>
</html>HTML+JS+CSS 实现随机跳转到一个网址的更多相关文章
- Yii2 负载均衡找不到JS,CSS
在部署项目的时候,用了2台服务器.请求的时候用了负载均衡,导致 YII2 的静态文件(js,css...)报 404 ,原因是: 请求一个页面时 A服务器 去处理,但是静态资源缺请求到了 B服务器 , ...
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
- 史上前端面试最全知识点（附答案）---html & js & css
史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度
使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...
- Vue项目零碎知识（全局js,css配置，element-UI,bs使用， img动态配置，js数组）
全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/ ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- JS打开新页面跳转
有时候使用js进行页面跳转,想使用 a 标签中 target="_blank" 形式,跳转打开一个新的页面. 可以使用以下脚本,创建一个 a标签,然后模拟点击操作. 代码如下: ...
- JS/CSS缓存杀手——VS插件
背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)! 一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...
随机推荐
- python求最大公约数和最小公倍数
1 def gcd(x,y): 2 while(y): 3 t=x%y 4 x=y 5 y=t 6 #print("最小公倍数是:",x*y/x)#最小公倍数是两数之积除以最大公约 ...
- python小题目练习（三）
题目:输出1!+2!+3!+--+10!的结果代码实现: # 定义一个函数来递归实现阶乘操作def cycle(num): if num == 1: return 1 else: return num ...
- 详解HashMap源码解析（上）
jdk版本:1.8 数据结构: HashMap的底层主要基于数组+链表/红黑树实现,数组优点就是查询块,HashMap通过计算hash码获取到数组的下标来查询数据.同样也可以通过hash码得到数组下标 ...
- Oracle数据库控制文件多路复用
Oracle数据库控制文件多路复用多路复用控制文件,指的是在系统不同的位置上同时存放多个控制文件的副本,此时如果某个路径对应的磁盘发送物理损坏导致该控制文件损坏,就可以通过另一个磁盘上的控制文件进行恢 ...
- PTA(BasicLevel)-1031 查验身份证
一.问题定义 一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下:首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,1 ...
- JDBC：获取自增长键值的序号
1.改变的地方 实践: package com.dgd.test; import java.io.FileInputStream; import java.io.FileNotFoundExcept ...
- HashMap源码深度剖析，手把手带你分析每一行代码，包会！！！
HashMap源码深度剖析,手把手带你分析每一行代码! 在前面的两篇文章哈希表的原理和200行代码带你写自己的HashMap(如果你阅读这篇文章感觉有点困难,可以先阅读这两篇文章)当中我们仔细谈到了哈 ...
- idea201903License
License name: https://zhile.io Activation code: 3AGXEJXFK9-eyJsaWNlbnNlSWQiOiIzQUdYRUpYRks5IiwibGljZ ...
- java.lang.ClassNotFoundException: oracle.jdbc.driver.OracleDriver
java.lang.ClassNotFoundException: oracle.jdbc.driver.OracleDriver at java.net.URLClassLoader.findCla ...
- centos7更改中文
这是在CentOS7中设置,CentOS6的是在 .etc/sysconfig/i18n 配置文件下.在root用户下操作,使用 locale 命令查看语言环境,看到 LANG=en_US.utf8 ...