css3实现loading动画

最新推荐文章于 2025-05-13 16:05:56 发布

H.zq

最新推荐文章于 2025-05-13 16:05:56 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

文章标签： css3 html animation

本文链接：https://blog.youkuaiyun.com/weixin_44968219/article/details/109325906

本文介绍了一个简单的网页加载动画实现方案，通过HTML和CSS创建一个居中显示的动态加载效果。该方案利用了CSS动画特性，使得加载过程更加平滑且具有良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述
·code

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
    .loading {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.5);
  display: block;
}

.loading .pic {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /*设置每个竖线的延长时间，第一个不用延长时间，第二个依次延长0.1s*/
}

.loading .pic i {
  display: block;
  float: left;
  width: 6px;
  height: 50px;
  background: #05A4FF;
  margin: 0 2px;
  /*各个竖线的高度缩小到40%的长度*/
  -webkit-transform: scaleY(0.4);
  transform: scaleY(0.4);
  /*调用动画load，动画完成总时间为1.2s，连续做动画*/
  -webkit-animation: load 1.2s infinite;
  animation: load 1.2s infinite;
}

.loading .pic i:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.loading .pic i:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.loading .pic i:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.loading .pic i:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

/*定义加载动画load*/
@-webkit-keyframes load {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes load {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
</style>
<body>
    <!-- 遮挡页面 -->
    <div class="loading">
        <div class="pic">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</body>

</html>