动画是一帧帧的跳动,去除帧中间的过渡效果,
将animation动画animation-timing-function设置为steps函数
steps(<integer>[, [ start | end ] ]?)
第一个参数指定每两个关键帧之间分几步完成
第二个参数为可选参数start | end,默认值为end
step-start在变化过程中,是以下一帧的显示效果来填充间隔动画
step-end在变化过程中,是以上一帧的显示效果来填充间隔动画
css
.app {
width: 2rem; // 显示动画盒子的宽度,确保为一帧画面的宽度
height: 2rem; // 显示动画盒子的高度,确保为一帧画面的高度
background: url("./imgs/image.png") no-repeat;
background-position: 0 0;
background-size: 2rem; // 这里需要保证背景图片的宽度与盒子宽度一致
animation: myAnimation 5s steps(124) infinite; // steps(124) 124为雪碧图的动画帧数
}
@keyframes myAnimation {
to {
background-position: 0 -248rem; // 雪碧图动画结束位置
}
}
最近做了一个微信内访问的H5页面,长按分享图片发送朋友邀请的海报,网上搜索资...
轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种 下面是...
全球 域名 市场中,单字母.COM才开放三四个,2字母.COM加起来也才几百个,而且这...
前言 笔者最近写了本关于可视化搭建方向的掘进小册,直接放链接: https://jueji...
哪些 域名 需要实名认证?其实,只要是在我国注册的域名,无论是传统.com、 .net...
1.我不会挽留任何一个企图离开我的人,你是例外。 2.有些记忆,注定无法抹去,...
数字营销——另一个被小企业随意抛弃的花哨术语。每个人似乎都对它有自己的理解...
动态rem 1. 首先我们先介绍当下的长度单位 px 像素 em 一个M的宽度 / 一个汉字的...
1、使用css精灵。 好处是将css中使用的小图片可以合并为一张大图片减少了对服务...
做网站,麻烦在更新和改版,特别是大规模更新,如果不是用cms系统,手工工作量非...