CSS3实现雪碧图动画
来源:互联网 发布:信捷plc xc编程线 编辑:程序博客网 时间:2024/05/09 01:35
CSS3实现雪碧图动画
注意几点:
steps(22) 是关键哦
关键帧只需设置0%( background-position:0 0;),100%( background-position:-2200px 0;)
动画均匀地分22段执行,每次都有固定相等的偏移量
雪碧图由22张图片拼成的
雪碧图的宽度是设置动画盒子的22倍
以下CSS:
.test{ width:100px; height:100%; background-image:url(text.png); background-repeat:no-repeat; background-position:0 0; background-size:2200px;-webkit-animation:test_anim 2.2s steps(22) both;animation:test_anim 2.2s steps(22) both;}@-webkit-keyframes test_anim{0%{ background-position:0 0;}100%{ background-position:-2200px 0;}}@keyframes test_anim{0%{ background-position:0 0;}100%{ background-position:-2200px 0;}}
0 0
- CSS3实现雪碧图动画
- CSS3动画——雪碧图的实现
- CSS3 帧动画(Sprite,直译叫雪碧图)
- CSS3雪碧图(sprite)应用实例
- CSS3实现动画相册
- css3实现时钟动画
- css3实现动画横幅
- css3实现帧动画
- CSS3 实现 Loading 动画
- CSS3 实现动画功能
- css3实现loading动画
- css3动画实现loading
- 雪碧图实现原理及应用
- 雪碧图
- 雪碧图
- javascript基础 图片雪碧动画
- 用CSS3实现动画进度条
- jQuery Animation实现CSS3动画
- 两个STM32之间进行SPI通信
- day04 面试题Schema约束与DTD约束的区别
- Android中的设计模式--适配器模式
- 查找两个有序数组的中位数和第K小的数
- View的事件分发机制
- CSS3实现雪碧图动画
- 判断手机联网状态
- Java第四次作业
- linux中fork()函数详解(原创!!实例讲解)
- 自定义Toolbar左侧空白
- 怎么用eclipse修改web工程的访问路径
- appium– Desired Capabilities详解
- 笔记
- 杂乱手札 - LINUX, Apache, Mysql, PHP, HTML-JS-CSS, Redis 2014 to 2016