一個漂亮的跳轉加載HTML代碼

本文轉載自查看原文 2019-09-19 20:00 840

<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>

<b> 正在完成....</b>
<script>window.location.href="https://www.cnblogs.com/"</script>

<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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用 SVG 實現一個漂亮的頁面預加載效果 html跳轉到同一個頁面的不同位置 HTML+JS+CSS 實現隨機跳轉到一個網址 React 實現一個漂亮的 Table 如何實現一個既簡單又漂亮的列表 a標簽實現跳轉本地頁面(html的a鏈接的href怎樣才另起一個頁面，一個頁面調到另一個html頁面) 純HTML和CSS編寫的漂亮的個人簡歷 jQuery加載一個html頁面到指定的div里如何寫出漂亮的代碼——臃腫的service 如何寫出漂亮的代碼——巧妙的接口擴展