脚步加载效果-CSS3

最新推荐文章于 2025-05-18 15:46:50 发布

置顶南有嘉念

最新推荐文章于 2025-05-18 15:46:50 发布

阅读量316

点赞数

分类专栏： css 文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/qq_41994014/article/details/107409552

版权

css 专栏收录该内容

3 篇文章

订阅专栏

最近项目上有这样一个需求，该项目的加载页需要有像踩雪一样的动作，像这样子。
在这里插入图片描述
嗯哼，它到底是怎么踩得？首先将这4个脚印的图片以及动作分解，它的动作其实就是我踩、我收、我再踩、我再收…

步骤1：

首先我们需要绘制一个盒子来装该4四张图片（这里有一个小技巧就是4张图片的大小和该盒子的大小一样大，空白区域背景透明，再通过定位实现四张图片错位重叠）
初步样子:
在这里插入图片描述

步骤2：

动画效果可以用CSS3中的透明度切换(opacity的0和1)、dispaly的none和block、或者利用缩放(scale中的0和1), 每一个脚印再设置响应的动画延迟就实现啦!
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"  href="./footer.css" />
   
</head>
<body>
    <div class="box">
        <div class="step1"></div>
        <div class="step2"></div>
        <div class="step3"></div>
        <div class="step4"></div>
    </div>
</body>
</html>

css代码

.box {
   width: 118px;
   height: 113px;
   margin: 0 auto;
   background-color: #000;
   position: absolute;
   top: 50%;
   left: 50%;
   transform:translate(-50%,-50%) ;
   -webkit-transform:translate(-50%,-50%) ;
   -moz-transform:translate(-50%,-50%) ;
   -ms-transform:translate(-50%,-50%) ;
   -o-transform:translate(-50%,-50%) ;
}
.box div {
    width: 118px;
    height: 113px;
    position: absolute;
    transform: scale(0); 
     animation: 1600ms loading infinite;
    -webkit-animation: 1600ms loading infinite;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    background-color: red;
     
}

.box div:nth-child(1) {
    background: url("./image/step1.png");
 }

.box div:nth-child(2) {
    background: url("./image/step2.png"); 
    animation-delay: 200ms;
}

.box div:nth-child(3) {
    background: url("./image/step3.png");
    animation-delay: 400ms;
}

.box div:nth-child(4) {
    background: url("./image/step4.png"); 
    animation-delay: 600ms;
}

@keyframes loading {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
  
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    50.5% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
    }
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
    }
}