CSS加载动画效果

作者：System 时间：2024年08月14日分类：所有,css 字数：924

以下是一个简单的CSS加载动画示例，用于模拟页面加载时的进度条效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Loading Animation</title>
<style>
  .loading-container {
    width: 100%;
    height: 4px;
    background: #ddd;
    position: relative;
    overflow: hidden;
  }
 
  .loading-container:before {
    content: '';
    position: absolute;
    left: 0;
    height: 100%;
    background: #2980b9;
    animation: loading-animation 2s linear infinite;
  }
 
  @keyframes loading-animation {
    0% {
      width: 0;
      opacity: 1;
    }
    50% {
      width: 100%;
      opacity: 1;
    }
    100% {
      width: 100%;
      opacity: 0;
    }
  }
</style>
</head>
<body>
 
<div class="loading-container"></div>
 
</body>
</html>

这段代码创建了一个宽度为100%，高度为4px的加载条容器，使用CSS动画制作了加载动画效果。动画从宽度为0到宽度为100%，同时透明度从1逐渐减至0，模拟了加载过程。

CSS加载动画效果

评论已关闭

推荐阅读