文档章节

CSS逐帧动画(二)

博为峰教研组
 博为峰教研组
发布于 2017/04/05 19:02
字数 256
阅读 5
收藏 0

在很多时候,我们需要一个很难(或不可能)只通过某些 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>

 

 

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田
2015/12/08
0
0
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
6.8K
1
Android实用视图动画及工具系列之一:简单的载入视图和载入动画

实现效果 功能说明 简单的载入视图和载入动画,相信大家一听名字就知道是些什么功能了,本Demo主要实现了安卓逐帧动画的开始播放,暂停和停止功能,适用于新手及新学习Android的码友们,老玩...

jaikydota163
2016/08/02
0
0
Android实用视图动画及工具系列之二:Toast对话框和加载载入对话框

实现效果 功能说明 类似Toast底色的弹出对话框和加载对话框,主要实现弹出和提示消息的功能,对话框可以实现不被取消,主要功能原理利用了安卓逐帧动画和继承对话框接口来实现,适用于新手及...

jaikydota163
2016/08/02
0
0
Android实用视图动画及工具系列之三:表情加载动画和失败加载动画,人物加载动画

实现效果 功能说明 网速慢时,加载网络数据时,界面怎么处理才美观?载入失败或网络丢包时,如何让界面显得更和谐?这一直是开发人员和美工人员不绝于耳的问题,为了达到功能和UI的完美交互,...

jaikydota163
2016/08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
23分钟前
5
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
5
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
6
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
12
0
JavaEE——Junit

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Junit Junit又名单元测试,Junit是用来测试Jav...

凯哥学堂
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部