CSS3 steps逐帧动画 —— 仿人人网动画案例

程序员文章站 2022-03-27 17:11:32

...

打开人人网的网页，当鼠标放上图标上和离开的时候都会有波浪形的动画，如图所示：
CSS3 steps逐帧动画 —— 仿人人网动画案例

看了源码可以发现，是用一张长图，由许多张小图组成。每张小图就是这个动画的一帧。鼠标经过时，添加一个active类，样式里面使用animation，改变这张长图的 translate 位移。

先放上html 内容，重点讲的是css样式

<body>
    <div class="recommend clearfix">
        <div class="intro">
            <div class="item">
                <a class="qrcode content" href="#" target="_blank" hidefocus="true"></a>
            </div>
            <div class="item">
                <a class="phone content" href="#" target="_blank" hidefocus="true"></a>
            </div>
            <div class="item">
                <a class="pad content" href="#" target="_blank" hidefocus="true"></a>
            </div>
            <div class="item">
                <a class="other content" href="#" target="_blank" hidefocus="true"></a>
            </div>
            <div class="item">
                <a class="music content" href="#" target="_blank" hidefocus="true"></a>
            </div>
        </div>
    </div>
</body>
<script src="./js/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        $('.item').hover(function () {
            $('.item').addClass('active'); // 添加当前元素的样式
            $(this).siblings('.item').removeClass('active'); // 删除其他兄弟元素的样式
        }, function () {
            $('.item').removeClass('active').addClass('unactive');
        });
    });
</script>

css样式

.clearfix {
  display: block;
}
.recommend .intro {
  width: 750px;
  margin: 20px auto;
  height: 130px;
}
.recommend .intro .item {
  width: 150px;
  height: 150px;
  float: left;
}
.recommend .intro .item .content {
  width: 150px;
  height: 150px;
  cursor: pointer;
}
.recommend .intro .item .qrcode {
  background: url(http://a.xnimg.cn/nx/apps/login/cssimg/qrcode1-t0313.jpg) 0 0 no-repeat;
}
.recommend .intro .item .phone {
  background: url(http://a.xnimg.cn/nx/apps/login/cssimg/phone1-t.jpg) 0 0 no-repeat;
}
.recommend .intro .item .pad {
  background: url(http://a.xnimg.cn/nx/apps/login/cssimg/zbzs.png) 0 0 no-repeat;
}
.recommend .intro .item .other {
  background: url(http://a.xnimg.cn/nx/apps/login/cssimg/other1-t.jpg) 0 0 no-repeat;
}
.recommend .intro .item .music {
  background: url(http://a.xnimg.cn/nx/apps/login/cssimg/music.jpg) 0 0 no-repeat;
}
.recommend .intro .unactive .content {
  -moz-animation: moveup 0.3s steps(7) forwards;
  -webkit-animation: moveup 0.3s steps(7) forwards;
}
@-moz-keyframes moveup {
  0% {
    background-position: 0 -1800px;
  }
  100% {
    background-position: 0 -2850px;
  }
}
@-webkit-keyframes moveup {
  0% {
    background-position: 0 -1800px;
  }
  100% {
    background-position: 0 -2850px;
  }
}
.recommend .intro .active .content {
  background-position: 0 -1800px;
  -moz-animation: movedown 0.5s steps(12) forwards;
  -webkit-animation: movedown 0.5s steps(12) forwards;
}
@-moz-keyframes movedown {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1800px;
  }
}
@-webkit-keyframes movedown {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1800px;
  }
}

steps（）有两个参数：参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。参数二是表示分成几段后，他是start还是end去执行动画。参数二有两个可选值start和end，默认是end。

方向为”start”时，表示在动画开始时，动画的第一段就已经完成了。例如一个 steps(3, start) ，我们看到的第一步动画（初态）就为 1/3 的状态，因此在视觉上动画的过程为 1/3 → 2/3 → 1 。
方向为”end”时，表示动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模式来进行。steps(3, end) 因此在视觉上动画的过程为 0 → 1/3 → 2/3
设置 forwards 是使动画保持结束时的状态，意义就是在步数执行完毕后，动画会跳到最后一帧的状态并保持不变。

最后再推荐一本书，也是我最近看的，里面有很多案例还有优化示例 ----《高效前端-Web高效编程与优化实践》