文档章节

CSS逐帧动画(二)

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

精选30+云产品,助力企业轻松上云!>>>

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

 

 

 

博为峰教研组
粉丝 52
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
加载中
请先登录后再评论。
[练习]利用CSS steps 实现逐帧动画

网页逐帧动画的实现方式 网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂。 CS...

囧囧
2019/09/29
0
0
CSS动画小结

CSS动画 原理:1.画面之间变化 2.视觉暂留作用 常见问题 1.CSS 动画的实现方式有几种 1.transition 2. keyframes(animation) 2.过渡动画和关键帧动画的区别 1.过渡动画需要状态变化 2.关键帧...

姜白告
2018/05/21
0
0
干货分享!HTML5 动效的常见制作手法

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

腾讯ISUX - 田田
2015/12/08
0
0
干货分享!HTML5 动效的常见制作手法

众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造。 近两年,小到loa...

ibnShawari
2016/02/22
49
0
帧动画的多种实现方式与性能对比

作者: 前端向朔 from 迅雷前端 原文地址:帧动画的多种实现方式与性能对比 本文目录 Web动画形式 首先我们来了解一下Web有哪些动画形式 以上各种动画形式都可以制作出一种类型的动画,那就是...

迅雷前端
2019/03/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

App Builder 2020中文版

教程: 1、断开网络连接,下载解压,运行对应操作系统App Builder 2020安装包; 2、在弹出的窗口中勾选同意条款协议,点击【Next】; 3、创建桌面快捷方式,点击【Next】; 4、一切准备就绪,...

osc_62a7f5bj
55分钟前
19
0
蚂蚁金服轻量级类隔离框架 Maven 打包插件解析 | SOFAArk 源码解析

SOFAStack(Scalable Open Financial Architecture Stack)是蚂蚁金服自主研发的金融级云原生架构,包含了构建金融级云原生架构所需的各个组件,是在金融场景里锤炼出来的最佳实践。 本文为《...

SOFAStack
03/19
11
0
Java 高级 面试题 及 参考答案

一、面试题基础总结 1、 JVM结构原理、GC工作机制详解 答:具体参照:JVM结构、GC工作机制详解 ,说到GC,记住两点:1、GC是负责回收所有无任何引用对象的内存空间。 注意:垃圾回收回收的是无...

osc_np3y0rbq
56分钟前
22
0
面试准备季——MyBatis 面试专题(含答案)

写在前面:2020年面试必备的Java后端进阶面试题总结了一份复习指南在Github上,内容详细,图文并茂,有需要学习的朋友可以Star一下! GitHub地址:https://github.com/abel-max/Java-Study-...

osc_1ipdqsf2
58分钟前
8
0
Redis 高频面试题:10w+QPS 的 Redis 真的只是因为单线程和基于内存?

你以为 Redis 这么快仅仅因为单线程和基于内存? 那么你想得太少了,我个人认为 Redis 的快是基于多方面的:不但是单线程和内存,还有底层的数据结构设计,网络通信的设计,主从、哨兵和集群...

osc_qgfjs4a5
58分钟前
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部