用html写一个加载页面动画

作者：System 时间：2024年08月21日分类：所有,html 字数：1174

以下是一个简单的HTML页面加载动画示例。这个动画使用了一个简单的CSS动画和HTML元素来模拟加载过程。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面加载动画</title>
<style>
  .loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    transition: opacity 0.5s ease-out;
    opacity: 1;
  }
 
  .loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }
 
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
</head>
<body>
 
<div class="loader-container">
  <div class="loader"></div>
</div>
 
<script>
  window.onload = function() {
    setTimeout(function() {
      document.querySelector('.loader-container').style.opacity = 0;
    }, 3000); // 假设页面加载完成后3秒后隐藏加载动画
  };
</script>
 
</body>
</html>

这段代码创建了一个页面加载动画，并在3秒后自动隐藏。这个动画可以通过CSS调整大小和颜色，并可以添加到任何需要页面加载动画的HTML页面中。

用html写一个加载页面动画

评论已关闭

推荐阅读