CSS逐帧动画(二)
CSS逐帧动画(二)
博为峰教研组 发表于11个月前
CSS逐帧动画(二)
  • 发表于 11个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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

 

 

 

标签: css 逐帧 动画
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 46
博文 1224
码字总数 479077
×
博为峰教研组
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: