注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

CSS3 实现GIF效果  

2015-01-13 21:33:44|  分类: CSS3属性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

CSS3 实现GIF效果

效果如图:
CSS3 实现GIF效果 - 梦幻雪冰 - 梦幻雪冰
素材如下:
CSS3 实现GIF效果 - 梦幻雪冰 - 梦幻雪冰
欢迎学习交流------梦幻雪冰

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梦幻雪冰、独行冰海</title>
<link rel="stylesheet" href="reset.css">
<style>
.wrap {
width: 180px;
height: 300px;
background: url("images/bg.png");
-webkit-animation: dynamic 2s step-start infinite;
}
@-webkit-keyframes dynamic {
0% {
background-position: 0 0;
}
14.3% {
background-position: -180px 0;
}
28.6% {
background-position: -360px 0;
}
42.9% {
background-position: -540px 0;
}
57.2% {
background-position: -720px 0;
}
71.5% {
background-position: -900px 0;
}
85.8% {
background-position: -1080px 0;
}
100% {background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

欢迎学习交流------梦幻雪冰
说明:step-start:马上跳转到动画结束状态。如果没有设置该属性,GIF就会成图片移动的效果而不是切换的效果。

补充:
animation-timing-function: 指定对象动画的持续时间 。
ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。
linear:线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
ease-in:渐显效果,等同于cubic-bezier(0.42,0,1.0,1.0)函数。
ease-out:渐隐效果,等同于cubic-bezier(0,0,0.58,1.0)函数。
ease-in-out:渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数。
step-start:马上转跳到动画结束状态。
step-end:保持动画开始状态,直到动画执行时间结束,马上转跳到动画结束状态。
steps(<number>[, [ start | end ] ]?):第一个参数number为指定的间隔数,即把动画分为n步阶段性展示,第二个参数默认为end,设置最后一步的状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,而以animation-fill-mode的设置为动画结束的状态。
cubic-bezier(<number>, <number>, <number>, <number>):特殊的立方贝塞尔曲线效果。

材料来源:白色橡树网站

欢迎学习交流------梦幻雪冰
  评论这张
 
阅读(175)| 评论(7)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017