在很多时候,我们需要一个很难(或不可能)只通过某些 CSS 属性的 过渡来实现的动画。比如一段卡通影片,或是一个复杂的进度指示框。在这 种场景下,基于图片的逐帧动画才是完美的选择 ，下面我们就来实现如下图所示的指示条，学习一下如何通过css实现逐帧动画。
先来看一下思路：
我们可以假设把动画中的所有帧全部拼合到一张png图片上，然后用一个元素来容纳这个加载提示 (别忘了在里面写一些文字,来确 保可访问性)
，并把它的宽高设置为单帧的尺寸。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@keyframes loader {
to { background-position: -800px 0; }
}
.loader {
width: 100px; height: 100px;
text-indent: 999px; overflow: hidden; /* Hide text */
background: url(http://dabblet.com/img/loader.png) 0 0;
animation: loader 1s infinite steps(8);
}
</style>
</head>
<body>
<div class="loader">Loading...</div>
</body>
</html>
扫一扫
2103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
