CSS3实现loading效果

作者：System 时间：2024年08月10日分类：所有,css3 字数：1626

CSS3可以用来创建一个简单的loading效果，以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Loading Effect</title>
<style>
  .loading-container {
    position: relative;
    width: 100px;
    height: 100px;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    animation-name: spin;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin: 50px auto;
  }
 
  .loading-container:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: #3498db;
    border-radius: 50%;
  }
 
  .loading-container:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: #f3f3f3;
    border-radius: 50%;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
 
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
 
  @keyframes bounce {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
</head>
<body>
<div class="loading-container"></div>
</body>
</html>

这段代码创建了一个有旋转和弹跳效果的loading图标。.loading-container是一个圆形的载入指示器，它通过CSS动画无限期地旋转。内部的:before伪元素是主色，而:after伪元素是次要的弹跳动画，它使得载入指示器看起来更加生动。

CSS3实现loading效果

评论已关闭

推荐阅读