文档章节

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>

 

 

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
34分钟前
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
45分钟前
0
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
0
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部