css精灵动画
精灵动画的实现
CSS Sprites在国内很多人叫CSS精灵，其实这个技术不新鲜，原理就是：靠不断的切换图片让人感觉视觉上不断在变化，例如gif动画之类的效果
那么前端如何实现精灵效果？
传统的就是靠定时器不断去改变一个元素的background-image属性了，简单的来说就是靠不断的替换图片，但是值得注意的问题就是图片如果很多，加载会比较慢，会占用大量网络资源
大多数的做法就是把图片都合成一张大图再利用CSS的以下属性
background-image
background-repeat
background-position
组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置
这里我将采用最新的CSS3的动画实现。通过 CSS3我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
新增一个class类slowWalk，在这个类中定义一个animation，通过关键帧keyframes定义一些规则，就是如何取图片坐标
- slowWalk样式，用于定义一些动画参数，比如执行的时间、方式、算法、次数等等
- @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
右边代码区域所示，为方便理解，解读一下样式的slowWalk类定义规则：
定义一个名为person-slow的@keyframes规则，@keyframes用百分比来规定变化发生的时间， 0% 是动画的开始，100% 是动画的完成，规则中有4个百分比值的变化，每个比值分别通过position获取一张图片，分别是0%,25%,50%,75%,100%。在950毫米内从0%-100%发生4次变化，采用的算法是steps(1, start)一帧一帧的切换，通过设置infinite参数每950毫秒不断循环
通过点击开始动画按钮，我们可以看到最终效果，完全靠CSS实现，非常nice!!!!
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>mukeqixizhuti</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="pageA.css">
</head>
<style type="text/css">
.charector{
width: 151px;
height: 291px;
background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
position: absolute;
/*设置一个元素的坐标*/
left: 6%;
top: 55%;
}
.slowWalk {
/* 填入动画样式规则 */
/*规定 @keyframes 动画的名称。*/
-webkit-animation-name: person-slow;
/*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
-webkit-animation-duration: 950ms;
/*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
-webkit-animation-iteration-count: infinite;
/*动画切换的方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start)
} /* 普通慢走 */ @-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
} @-moz-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
</style>
<body>
<div id="content">
<ul class="content-wrap">
<!-- 第一副画面 -->
<li>
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_button"></div>
</li>
<!-- 第二个页面 -->
<li>页面二</li>
<!-- 第三个页面 -->
<li>页面三</li>
</ul>
<div id="boy" class="charector slowWalk"></div> </div>
<div class="button">
<button>点击开始动画</button>
</div>
<script type="text/javascript">
var swipe=Swipe($("#content"));
//获取数据
var getValue =function(className){
var $elem=$(''+className+'');
//走路的坐标
return {
height:$elem.height(),
top:$elem.position().top
}
};
//路的y轴
var pathY=function(){
var data=getValue('.a_background_middle');
return data.top+data.height/2;
}(); var $boy=$("#boy");
var boyHeight = $boy.height();
console.log(pathY-boyHeight+25);
console.log
$boy.css({
top:pathY-boyHeight+25
}); // ==========================
// 增加精灵动画
// ========================== $('button').click(function(){
// 增加走路的CSS3关键帧规则
$boy.addClass('slowWalk');
});
</script> </body>
</html>
这里只是学习的一个记录，不给出完整代码。完整教程见：http://www.imooc.com/code/8898
给出精灵动画的实现代码：
.slowWalk {
/* 填入动画样式规则 */
/*规定 @keyframes 动画的名称。*/
-webkit-animation-name: person-slow;
/*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
-webkit-animation-duration: 950ms;
/*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
-webkit-animation-iteration-count: infinite;
/*动画切换的方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start)
}
/* 普通慢走 */
@-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
@-moz-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
通过对background-position的改变，实现图片的更换，这样只加载一张图片，会提高页面缓存的效率。
css精灵动画的更多相关文章
- 利用pixi.js制作精灵动画
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- 网页小实验——用canvas生成精灵动画图片
实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现. 初始图片如下: 一.图片分割 将初始图片分割为六 ...
- 原创：CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
- css精灵
○ css 精灵(Sprites)技术利用photoshop将图片整合,然后用background-images,background-position,background-repeat技术,对图片 ...
- SpriteSheet精灵动画引擎
SpriteSheet精灵动画引擎 本文介绍Flash中SpriteSheet精灵序列图与其它渲染方式的性能对比.SpriteSheet的原理及注意实现,最后实现了一个精灵序列图的渲染引擎.本文的 ...
- 第四十二课：基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- 精灵动画Animation对话框组成Idle动画的各精灵
精灵动画Animation对话框组成Idle动画的各精灵 1.3 精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...
- [Unity2D]精灵动画
通常我们在游戏里面创建的精灵比如玩家主角,它在移动的过程中一般会带有一些动画的效果,比如两只脚前后地移动,那么这种动画效果的实现和控制就可以通过Unity2D的动画系统来实现. 要添加这样的动画,首先 ...
随机推荐
- Match:DNA repair(POJ 3691)
基因修复 题目大意:给定一些坏串,再给你一个字符串,要你修复这个字符串(AGTC随便换),使之不含任何坏串,求修复所需要的最小步数. 这一题也是和之前的那个1625的思想是一样的,通过特殊的trie树 ...
- Linux系统安装时分区的选择（推荐）
Linux系统安装时分区的选择(推荐) 出处:http://www.cnblogs.com/gylei/archive/2011/12/04/2275987.html 前言: 以前初识Linux时, ...
- 9.22 window对象、document对象
一.window对象: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口 dialogArgume ...
- Jquery网站下雪花的效果
代码如下: <script type="text/javascript" src="jquery.min.js"></script> & ...
- AI调色板
AI新建图层时,要选择CMYK模式,才能出现如下图所示调色板,如果选RGB模式,那么调整颜色的时候只能通过输入RGB.
- 赛车比赛（洛谷U4566）
题目背景 kkk在赛车~ 题目描述 现在有N辆赛车行驶在一条直线跑道(你可以认为跑道无限长)上.它们各自以某种速度匀速前进,如果有两辆车A车和B车,A车在B车的后面,且A车的速度大于B车的速度,那么经 ...
- python基础——枚举类
python基础——枚举类 当我们需要定义常量时,一个办法是用大写变量通过整数来定义,例如月份: JAN = 1 FEB = 2 MAR = 3 ... NOV = 11 DEC = 12 好处是简单 ...
- ios添加百度地图方法
Hello BaiduMapiOS SDK 引入头文件 引入静态库文件 引入系统framework 引入mapapi.bundle资源文件 初始化BMKMapManager 创建BMKMapView ...
- java.util.ConcurrentModificationException
遍历 List 的时候将 item remove 掉会抛出此异常
- NYOJ之素数求和问题
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAKCCAIAAABH/2gWAAAgAElEQVR4nO3dPVLjStsG4G8T5CyEdF