网站首页 > 技术文章 正文
近来在看前端,前端越看越有意思。
做一个动态动起来的图,使用的是背景图移动坐标的方式,帧显示的原理。
先设计了背景图片,右手挥动。
背景图的尺寸为1241px*266px,7幅帧。
// 动画1:人的挥手运行
//显示为帧运行方式,仅定义起止即可。
@keyframes person{
0%{
background: url(img/1.png) no-repeat 0px;
}
100%{
background: url(img/1.png) no-repeat -1241px;
}
}
//动画2,整体向右移动
@keyframes move2{
from {
/* transform: translate(0,0); */
}
to {
transform: translate(500px,0);
}
}
.person {
width: 177px;
height: 266px;
background-color: #0000FF;
//使用动画,两个动画使用逗号分隔
animation: person 0.2s steps(7,end) infinite alternate,
move2 5s linear infinite alternate;
}
结果显示:
这里有一个问题:
7幅帧,steps()中的数是7,会自动将0%和100%间隔7等份的移动,在第一帧的时候,坐标为(0,0),第7帧的时候坐标为(-1241px,0),这里有一个疑问:第7帧的时候实际上是空白了,图片已经完全左移出去了,理论上应该会卡一帧的空白,但是为什么显示正常呢?
这里要说到steps函数中还有一个参数:steps(n,start/end)。
第二个参数start或end,表示阶跃点,start表示一开始就先进行阶跃,end表示每阶段完成后再进行阶跃,默认值为end。
阶越曲线如下:
默认end,因此在第7次阶越时,实际显示的是上一帧,因此也就是说,实际将100%处的帧丢掉了。同理start丢掉的是第一帧。
@keyframes demo2 {
0% {
background-color: yellow;
}
100% {
background-color: red;
}
}
.demo2 {
width: 100px;
height: 100px;
border: 1px solid red;
animation: demo2 1s steps(1,end) infinite;
}
以上实际显示的背景色是黄色,上一帧。
.demo2 {
width: 100px;
height: 100px;
border: 1px solid red;
animation: demo2 1s steps(1,start) infinite;
}
以上改为start后实际显示的是红色,下一帧。
另外steps中的n,代表的是阶越点,关键帧之间的变化,比如stps(5)代表0%-100%之间变化5次,如果关键帧定义为0%,50%,100%,则代表0-50,50-100之间各变化5次。
阶越点是一个变化的时刻,而非一个时间段
猜你喜欢
- 2024-10-24 初探animation中steps()属性(animation steps属性)
- 2024-10-24 HTML5(九)——超强的 SVG 动画(htmlsvg动画代码)
- 2024-10-24 自定义日历(二)(自定义日历控件)
- 2024-10-24 Flutter简单动画Animation运用(flutter 视频教程)
- 2024-10-24 移动端渲染原理浅析(移动端渲染原理浅析设计)
- 2024-10-24 iOS 事件处理机制与图像渲染过程(简述ios中的事件响应机制)
- 2024-10-24 Android 开机问题分析(android无法开机)
- 2024-10-24 GoogleCTF + zer0ptsCTF + ImaginaryCTF 2023 笔记
- 2024-10-24 决战“金三银四”,中高级Web前端大厂面试秘籍:CSS篇
- 2024-10-24 必须知道的 JavaScript API — Performance API
- 1507℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 513℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 488℃MySQL service启动脚本浅析(r12笔记第59天)
- 467℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 465℃启用MySQL查询缓存(mysql8.0查询缓存)
- 445℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 425℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 422℃MySQL server PID file could not be found!失败
- 最近发表
- 标签列表
-
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)