逛哔哩哔哩 ( ゜-゜)つロ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‘); })
最终效果：
