账号注册找回密码
  微信登录

奇瑰网

[前端] 一个漂亮的跳转加载HTML代码

[复制链接]

685

主题

903

帖子

2万

积分

网站民审组

Rank: 7Rank: 7Rank: 7

G币
269
信用
25
体力
10156
发表于 5 天前 | 显示全部楼层 |阅读模式
免费G币领取活动中
[HTML] 纯文本查看 复制代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="3;url='https://www.cnblogs.com/';">
<title>页面加载中,请稍候...</title>
<style type="text/css">
body {
     background: #555
}
.loading {
     -webkit-animation: fadein 2s;
     -moz-animation: fadein 2s;
     -o-animation: fadein 2s;
     animation: fadein 2s
}
@-moz-keyframes fadein {
     from {
          opacity: 0
     }
     to {
          opacity: 1
     }
}
@-webkit-keyframes fadein {
     from {
          opacity: 0
     }
     to {
          opacity: 1
     }
}
@-o-keyframes fadein {
     from {
          opacity: 0
     }
     to {
          opacity: 1
     }
}
@keyframes fadein {
     from {
          opacity: 0
     }
     to {
          opacity: 1
     }
}
.spinner-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 300;
     height: 100%;
     min-width: 100%;
     min-height: 100%;
     background: rgba(255,255,255,0.93)
}
.spinner-text {
     position: absolute;
     top: 45%;
     left: 50%;
     margin-left: -100px;
     margin-top: 2px;
     color: #000;
     letter-spacing: 1px;
     font-size: 20px;
     font-family: Arial
}
.spinner {
     position: absolute;
     top: 45%;
     left: 50%;
     display: block;
     margin-left: -160px;
     width: 1px;
     height: 1px;
     border: 20px solid rgba(255,0,0,1);
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     border-radius: 50px;
     border-left-color: transparent;
     border-right-color: transparent;
     -webkit-animation: spin 1.5s infinite;
     -moz-animation: spin 1.5s infinite;
     animation: spin 1.5s infinite
}
@-webkit-keyframes spin {
     0%,100% {
          -webkit-transform: rotate(0deg) scale(1)
     }
     50% {
          -webkit-transform: rotate(720deg) scale(0.6)
     }
}
@-moz-keyframes spin {
     0%,100% {
          -moz-transform: rotate(0deg) scale(1)
     }
     50% {
          -moz-transform: rotate(720deg) scale(0.6)
     }
}
@-o-keyframes spin {
     0%,100% {
          -o-transform: rotate(0deg) scale(1)
     }
     50% {
          -o-transform: rotate(720deg) scale(0.6)
     }
}
@keyframes spin {
     0%,100% {
          transform: rotate(0deg) scale(1)
     }
     50% {
          transform: rotate(720deg) scale(0.6)
     }
}
</style>
</head>
<body>
<div class="loading">
  <div class="spinner-wrapper">
    <span class="spinner-text">页面加载中,请稍候...</span>
    <span class="spinner"></span>
  </div>
</div>
</body>
</html>

[HTML] 纯文本查看 复制代码
<b> 正在完成....</b>
<script>window.location.href="https://www.cnblogs.com/"</script>


[HTML] 纯文本查看 复制代码
<html> 
<head> 
<meta http-equiv="Content-Language" content="zh-CN"> 
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset="utf-8"> 
<title>myblog</title> 
</head> 
<frameset framespacing="0" border="0" rows="0" frameborder="0"> 
<frame name="main" src="https://csnd.cnblogs.com" scrolling="auto" noresize> 
</frameset> 
</html>






上一篇:几种常见的网页跳转代码和加载代码
下一篇:Discuz 主题列表页左侧板块导航栏美化
使用高级回帖 (可批量传图、插入视频等)

发表回复

您需要登录后才可以回帖 登录 | 账号注册   微信登录

本版积分规则   Ctrl + Enter 快速发布  

发帖时请遵守我国法律,网站会将有关你发帖内容、时间以及发帖IP地址等记录保留,只要接到合法请求,即会将信息提供给有关政府机构。
Powered by Discuz! X3.4 ( 粤ICP备20013252号-1
Copyright © 2014-2021 奇瑰网 粤公网安备44130302100219号
快速回复 返回顶部 返回列表