前端动画小记---bilibili ( ゜-゜)つロ客户下载小动画

逛哔哩哔哩 ( ゜-゜)つロPC版的时候看到一个蛮有意思的动画，指导用户去下载客户端，示意图如下。

看起来蛮复杂的样子，还有线条的幻化成各种形状。debug一下得出真相，此乃动画雪碧图实现的。

雪碧图概念：雪碧图也叫css精灵，一种网页图片应用处理方式，将页面涉及到的图片零星图片集中到一张图上使用，主要利用css background-position 定位要显示的图片位置。

雪碧图文件：

html代码：很简单的一句，引入一个div空间用于展示图片。

<div id="elevator-mobile-app" class="app-icon" style="background-position-x: 0px;"></div>

css代码：动画的实现几乎全在这里了。

  /*设置一下div框的大小等属性*/.app-icon {
            position: absolute;
            left: 100px;
            width: 80px;
            height: 80px;
            background-image: url(../img/app-download.png);
        }

/*定义鼠标进入元素模块时的动画*/
.easy-in {
            animation-timing-function: steps(15);
            animation-name: phone-in;
            animation-duration: 1.5s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            background-position: left;
        }

        @keyframes phone-in {
             0% {
                 background-position: left;
             }

             100% {
                 background-position: right;
             }
         }
        /* opera */
        @-o-keyframes  phone-in {
            0% {
                background-position: left;
            }

            100% {
                background-position: right;
            }
        }
        /* firefox */
        @-moz-keyframes  phone-in {
            0% {
                background-position: left;
            }

            100% {
                background-position: right;
            }
        }
        /* safari 和 chrome */
        @-webkit-keyframes  phone-in {
            0% {
                background-position: left;
            }

            100% {
                background-position: right;
            }
        }

　　定义鼠标移出元素块时的动画

.easy-out {
            /*
            * 检索或设置动画过渡类型，两个参数。
            * 当设置为step函数时，第一个参数必须是正整数，指定函数的步数；
            * 第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
            */
            animation-timing-function: steps(15,start);
            /*动画名称*/
            animation-name: phone-out;
            /*动画持续时间*/
            animation-duration: 1.5s;
            /*动画循环次数，取值一infinite：无限循环  取值二具体数字*/
            animation-iteration-count: 1;
            /*检索或设置对象动画时间之外的状态
            * none：默认值。不设置对象动画之外的状态
            * forwards：设置对象状态为动画结束时的状态
            * backwards：设置对象状态为动画开始时的状态
            * both：设置对象状态为动画结束或开始的状态
            */
            animation-fill-mode: forwards;
            background-position: right;
        }

        @keyframes phone-out {
            0% {
                background-position: right;
            }

            100% {
                background-position: left;
            }
        }

        @-o-keyframes phone-out {
            0% {
                background-position: right;
            }

            100% {
                background-position: left;
            }
        }

        @-moz-keyframes phone-out {
            0% {
                background-position: right;
            }

            100% {
                background-position: left;
            }
        }

        @-webkit-keyframes phone-out {
            0% {
                background-position: right;
            }

            100% {
                background-position: left;
            }
        }

　　javascript 鼠标事件：

//鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
    $(‘#elevator-mobile-app‘).mouseenter(function () {
        $(‘#elevator-mobile-app‘).removeClass(‘easy-out‘);
        $(‘#elevator-mobile-app‘).addClass(‘easy-in‘);
    })

    //在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
    $(‘#elevator-mobile-app‘).mouseleave(function () {
        $(‘#elevator-mobile-app‘).removeClass(‘easy-in‘)；
        $(‘#elevator-mobile-app‘).addClass(‘easy-out‘);
    })

　　最终效果：

原文地址：https://www.cnblogs.com/hongdiandian/p/8514709.html