文档章节

CSS逐帧动画(二)

博为峰教研组
 博为峰教研组
发布于 2017/04/05 19:02
字数 256
阅读 6
收藏 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
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
逐帧动画和补间动画的使用场景(二)

逐帧动画和补间动画的使用场景(二) 上一节我们详细的介绍了补间动画和逐帧动画的基本使用,如果你对这还不熟悉的请看这篇文章: https://my.oschina.net/quguangle/blog/798242 下面我们基于...

android-key
2016/12/01
61
0

没有更多内容

加载失败,请刷新页面

加载更多

CDH5动静态资源池配置与回滚

关于动态 静态资源池的配置以前都有提过,可以从以下几篇了解: YARN动态资源池配置案例 https://yq.aliyun.com/ziliao/346856# Hadoop YARN配置参数剖析(4)—Fair Scheduler相关参数 Hadoop...

hblt-j
9分钟前
0
0
WordPress仿站实战教程

有一个月没有写blog了,一直在学习wordpress的知识,现在能够进行简单的政府企业门户网站的仿制,wordpress的主题订制,一般是对前端要求比较高,wordpress学会了,建站还是非常的快的。下面...

临江仙卜算子
12分钟前
0
0
图像库stb_image

https://github.com/nothings/stb 目前一般主流的图像格式也就是bmp,jpg,png,tga,dds,除了DDS一般是给DX用的,虽然一堆OpenGL程序也有用的,但是我一般只用png和tga, png不用说了,带a...

robslove
38分钟前
1
0
Spring 事务提交回滚源码解析

前言 在上篇文章 Spring 事务初始化源码分析 中分析了 Spring 事务初始化的一个过程,当初始化完成后,Spring 是如何去获取事务,当目标方法异常后,又是如何进行回滚的,又或是目标方法执行...

TSMYK
57分钟前
2
0
百度黄埔学院将培养一批首席AI架构师,为“国之重器”赋能

深度学习高端人才不仅是AI发展的重要养分,也是企业转型AI巨大推动力。2019年1月19日,百度黄埔学院——深度学习架构师培养计划在百度科技园举行开学典礼,深度学习技术及应用国家工程实验室...

深度学习之桨
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部