有趣的css - 列表块加载动效

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

以下是一个简化的代码实例，展示了如何使用CSS创建一个有趣的自定义列表块加载动效：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Block Loading Animation</title>
<style>
  .loading-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
 
  .loading-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
  }
 
  .loading-list li::before {
    content: '';
    position: absolute;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: #333;
    border-radius: 50%;
    -webkit-animation: grow 1.2s infinite ease-in-out;
            animation: grow 1.2s infinite ease-in-out;
  }
 
  @-webkit-keyframes grow {
    0% {
      -webkit-transform: scale(0.4);
              transform: scale(0.4);
      opacity: 0.6;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0;
    }
  }
 
  @keyframes grow {
    0% {
      -webkit-transform: scale(0.4);
              transform: scale(0.4);
      opacity: 0.6;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0;
    }
  }
</style>
</head>
<body>
 
<ul class="loading-list">
  <li>Loading...</li>
  <li>Loading...</li>
  <li>Loading...</li>
  <li>Loading...</li>
</ul>
 
</body>
</html>

这段代码创建了一个简单的无序列表，其中每个列表项前都有一个小圆点占位符，这个小圆点通过CSS动画逐渐放大并淡出，从而模拟加载动效。这是一个很好的教学示例，展示了如何使用CSS动画创建生动的用户界面效果。

有趣的css - 列表块加载动效

评论已关闭

推荐阅读