当前位置: 首页 > news >正文

两段序列帧动画播放,在ios机型上出现闪屏

使用场景:两段序列帧动画连接播放,先播放第一段播一次,再播放第二段,第二段循环播放,在ios机型上出现动画闪动,播放不正常。

错误的写法:把每一段序列帧动画单独写在了定义的动画里

.gacha-bg {width: 750rpx;height: 1000rpx;animation: gacha 1.6s steps(22), xing 2s steps(27);animation-delay: 0.8s, 2.4s;animation-iteration-count: 1, infinite;animation-fill-mode: forwards, forwards;
}@keyframes gacha {0% {background-image: url('1.jpg');background-size: 17250rpx;background-repeat: no-repeat;background-position: 0;}100% {background-image: url('1.jpg');background-size: 17250rpx;background-repeat: no-repeat;background-position: -16500rpx;}
}@keyframes xing {0% {background-image: url('bg.jpg');background-size: 21000rpx;background-repeat: no-repeat;background-position: 0;}100% {background-image: url('bg.jpg');background-size: 21000rpx;background-repeat:no-repeat;background-position: -20250rpx 0;}
}

修改后: 

背景图需要统一写一遍,由于第二段要循环播放,所以需要在定义的第二段动画里写上图片信息

.gacha-bg {width: 750rpx;height: 1000rpx;animation: gacha 1.6s steps(22), xing 2s steps(27);animation-delay: 0.8s, 2.4s;animation-iteration-count: 1, infinite;animation-fill-mode: forwards, forwards;background-image: url('1.jpg'),url('bg.jpg');background-size: 17250rpx,21000rpx;background-repeat: no-repeat,no-repeat;
}@keyframes gacha {0% {background-position: 0 0;}100% {background-position: -16500rpx 0;}
}@keyframes xing {0% {background-image: url('bg.jpg');background-size: 21000rpx;background-repeat: no-repeat;background-position: 0 0;}100% {background-image: url('bg.jpg');background-size: 21000rpx;background-repeat: no-repeat;background-position: -20250rpx 0;}
}

相关文章:

两段序列帧动画播放,在ios机型上出现闪屏

使用场景:两段序列帧动画连接播放,先播放第一段播一次,再播放第二段,第二段循环播放,在ios机型上出现动画闪动,播放不正常。 错误的写法:把每一段序列帧动画单独写在了定义的动画里 .gacha-bg…...

【C++深度探索】全面解析多态性机制(二)

🔥 个人主页:大耳朵土土垚 🔥 所属专栏:C从入门至进阶 这里将会不定期更新有关C/C的内容,欢迎大家点赞,收藏,评论🥳🥳🎉🎉🎉 前言 我…...

MySQL配置数据库的连接命令

MySQL配置数据库连接命令 在MySQL中,配置数据库连接的命令涉及创建用户、授予权限、配置主从复制等多个方面。以下是常用的命令及其用途: 创建用户 创建一个新的数据库用户并为其设置密码: CREATE USER usernamehost IDENTIFIED BY passwo…...

[PaddlePaddle飞桨] PaddleSpeech-自动语音识别-小模型部署

PaddleSpeech的GitHub项目地址 环境要求&#xff1a; gcc > 4.8.5 paddlepaddle < 2.5.1 python > 3.8 OS support: Linux(recommend), Windows, Mac OSXpip下载指令&#xff1a; python -m pip install paddlepaddle-gpu2.5.1 -i https://pypi.tuna.tsinghua.edu.c…...

redis查询慢,你们是如何排查优化的?(总结篇)

1&#xff0c;先进行基准测试&#xff0c;查看redis是否存在查询过慢情况&#xff0c;根据自己的情况而定 2、检查网络连接是否出现延迟&#xff0c;数据丢包问题&#xff08;可能性小 3、开启慢查询日志&#xff0c;通过日志可以清楚知道哪些命令比较耗时&#xff0c;同时避…...

Docker 容器出现 IP 冲突

Docker 容器出现 IP 冲突的情况可能由以下几个原因导致&#xff1a; 静态 IP 分配&#xff1a;如果你在 docker-compose.yml 文件中为多个容器手动设置了相同的静态 IP 地址&#xff0c;那么这些容器在启动时就会出现 IP 冲突。确保每个容器分配的静态 IP 地址是唯一的。桥接网…...

paddlepaddle2.6,paddleorc2.8,cuda12,cudnn,nccl,python10环境

1.安装英伟达显卡驱动 首先需要到NAVIDIA官网去查自己的电脑是不是支持GPU运算。 网址是&#xff1a;CUDA GPUs | NVIDIA Developer。打开后的界面大致如下&#xff0c;只要里边有对应的型号就可以用GPU运算&#xff0c;并且每一款设备都列出来相关的计算能力&#xff08;Compu…...

【D3.js in Action 3 精译】1.3 D3 视角下的数据可视化最佳实践(上)

当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知 1.2.1 HTML 与 DOM1.2.2 SVG - 可缩放矢量图形1.2.3 Canvas 与 WebGL1.2.4 CSS1.2.5 JavaScript1.2.6 Node 与 JavaScript 框架1.2.7 Observable 记事本 1…...

如何在Linux上如何配置虚拟主机

在Linux上配置虚拟主机可以通过使用Apache HTTP服务器来实现。Apache是一个开源的跨平台的Web服务器软件&#xff0c;可以在多种操作系统上运行并支持虚拟主机的配置。 以下是在Linux上配置虚拟主机的步骤&#xff1a; 安装Apache HTTP服务器 在终端中运行以下命令来安装Apache…...

c语言alpha-beta剪枝六子棋

c语言Alpha-Beta剪枝算法六子棋[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2i5w8kc1-1720756528545)(https://i-blog.csdnimg.cn/direct/464b9db7d6384a63ab8c3213efff0e99.png)] 1.介绍 Alpha-Beta剪枝算法是一种用于优化博弈树搜索的算法&…...

基于PyTorch深度学习实践技术应用

近年来&#xff0c;Python语言由于其开源、简单等特点&#xff0c;受到了广大程序开发者的偏爱&#xff0c;丰富的函数库使得其在各行各业中得到了广泛的应用。伴随着新一轮人工智能&#xff08;尤其是深度学习&#xff09;的快速发展&#xff0c;许多深度学习框架应运而生&…...

数据湖仓一体(五)安装spark

上传安装包到/opt/software目录并解压 [bigdatanode106 software]$ tar -zxvf spark-3.3.1-bin-hadoop3.tgz -C /opt/services/ 重命名文件 [bigdatanode106 services]$ mv spark-3.3.1-bin-hadoop3 spark-3.3.1 配置环境变量 [bigdatanode106 ~]$ sudo vim /etc/profile…...

项目收获总结--本地缓存方案选型及使用缓存的坑

本地缓存方案选型及使用缓存的坑 一、摘要二、本地缓存三、本地缓存实现方案3.1 自己编程实现一个缓存3.2 基于 Guava Cache 实现本地缓存3.3 基于 Caffeine 实现本地缓存3.4 基于 Encache 实现本地缓存3.5 小结 四、使用缓存的坑4.1 缓存穿透4.2 缓存击穿4.3 缓存雪崩4.4 数据…...

java使用poi-tl模版引擎导出word之if判断条件的使用

文章目录 模版中if语句条件的使用1.数据为False或空集合2.非False或非空集合 模版中if语句条件的使用 如果区块对的值是 null 、false 或者空的集合&#xff0c;位于区块中的所有文档元素将不会显示&#xff0c;这就等同于if语句的条件为 false。语法示例&#xff1a;{{?stat…...

扩散的魔法:如何打造未来生物打印?

生物打印技术正在快速发展&#xff0c;它允许我们将生物材料、细胞和生长因子等生物活性成分精确地打印成具有特定形状和功能的结构。而扩散现象在生物打印中扮演着至关重要的角色&#xff0c;它影响着打印结构的特性、机械性能、生物功能和形态。为了更好地利用扩散现象&#…...

Bag of mice(概率dp)

https://www.luogu.com.cn/problem/CF148D 思路&#xff1a; 概率dp&#xff0c;设f[a][b]为白鼠为a个&#xff0c;黑鼠为b个时&#xff0c;赢的期望。 f[i][0]1; 1.当先手取到白鼠时 a/(ab); 2.当先手未取到白鼠&#xff0c;先手要向赢&#xff0c;后手也不能取到白鼠&am…...

Python的基础语法——持续更新版

1、type查看数据类型 # 直接输出结果 print(type("Hello")) # 先用变量存储 string_type type("Hello") print(string_type) 2、 类型转化 任何类型可以转化为字符串&#xff0c;但字符串不可以随意转化&#xff0c;要求字符串类内容都是数字 # 类型…...

百度智能云将大模型引入网络故障定位的智能运维实践

物理网络中&#xff0c;某个设备发生故障&#xff0c;可能会引起一系列指标异常的告警。如何在短时间内从这些告警信息中找到真正的故障原因&#xff0c;犹如大海捞针&#xff0c;对于运维团队是一件很有挑战的事情。 在长期的物理网络运维工作建设中&#xff0c;百度智能云通…...

晚上定时编译android系统

1、问题 可能偶然想晚上定时编译android系统 2、解决 at.sh #!/bin/sh# at -f at.sh now1min # at -lset -e set -xecho $SHELLecho at build begin /bin/date >> at_build.log/bin/bash -c source build/envsetup.sh >> at_build.log 2>&1; lunch xxx-us…...

轻薄鼠标的硬核选购攻略,很多人都在“高性价比”鼠标上栽跟头了

轻薄款设计的鼠标是目前鼠标市场的出货大头&#xff0c; 也是价格最卷的一类鼠标。 比游戏鼠标或许更卷一些。 这和当前的移动办公趋势关系很大。 这类鼠标主要跟笔记本和iPad搭配。 核心的使用场景是办公。 因此轻薄和静音是这类鼠标的核心卖点。 同时用户并不愿意付出太…...

毕设「零焦虑」实测:paperzz 四步流水线,把本科毕业论文从 0 写到 12000 字

Paperzz-AI官网免费论文查重复率AIGC检测/开题报告/文献综述/论文初稿/期刊论文paperzz - 毕业论文-AIGC论文检测-AI智能降重-ai智能写作https://www.paperzz.cc/dissertation 谁本科毕设没陷入过「选题卡壳→文献凑数→框架乱套→格式崩溃」的死循环&#xff1f;对着万字要求…...

ACE协议实战:如何通过AxDOMAIN信号优化多核SoC的缓存一致性?

ACE协议实战&#xff1a;AxDOMAIN信号在多核SoC缓存一致性中的深度优化 1. 多核SoC缓存一致性的工程挑战 在现代嵌入式系统设计中&#xff0c;多核处理器架构已成为提升性能的主流方案。当我们把多个ARM Cortex-A系列核心集成到同一芯片时&#xff0c;缓存一致性管理立即成为系…...

在团队协作中直接 Clone 主仓库开发?别慌,这才是正确的 PR 提交流程

在团队协作中直接 Clone 主仓库开发&#xff1f;别慌&#xff0c;这才是正确的 PR 提交流程 很多人以为只有 Fork 了仓库才能提 Pull Request&#xff0c;其实在公司内部项目或有写权限的私有仓库中&#xff0c;直接 Clone 新建分支 推送到主仓 是更常见、更高效的协作方式。…...

GLM-OCR .NET平台集成指南:C#调用与桌面应用开发

GLM-OCR .NET平台集成指南&#xff1a;C#调用与桌面应用开发 如果你是一名.NET开发者&#xff0c;正在琢磨怎么给你的桌面应用或者Web项目加上一个“眼睛”&#xff0c;让它能看懂图片里的文字&#xff0c;那这篇文章就是为你准备的。OCR&#xff08;光学字符识别&#xff09;…...

别再只调PWM了!手把手教你优化STM32智能小车的红外循迹算法(五路传感器实战)

五路红外循迹算法进阶&#xff1a;从基础判断到PID控制的实战优化 当你看着自己组装的智能小车在赛道上磕磕绊绊地前行&#xff0c;时而冲出边界&#xff0c;时而左右摇摆&#xff0c;是否想过那些比赛场上流畅飞驰的小车究竟隐藏着什么秘密&#xff1f;本文将带你突破简单的i…...

Jupyter Notebook文件损坏?3种方法快速恢复.ipynb中的代码(附Python脚本)

Jupyter Notebook文件损坏&#xff1f;3种方法快速恢复.ipynb中的代码&#xff08;附Python脚本&#xff09; 当你在深夜赶数据分析报告时突然断电&#xff0c;重启后发现Jupyter Notebook文件无法打开——这种绝望感每个数据工作者都懂。.ipynb文件损坏并非世界末日&#xff0…...

深度解析Cursor试用重置工具:解决“You‘ve reached your trial request limit“的完整方案

深度解析Cursor试用重置工具&#xff1a;解决"Youve reached your trial request limit"的完整方案 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Youve reached your trial request limit. / Too many free trial accounts used on…...

告别重复造轮子:用快马AI一键生成esp8266连接阿里云IoT的高效代码模块

最近在做一个智能家居项目&#xff0c;需要用esp8266连接阿里云IoT平台。作为一个经常和物联网设备打交道的开发者&#xff0c;我发现每次新项目都要重复写类似的连接代码&#xff0c;既浪费时间又容易出错。这次尝试用InsCode(快马)平台的AI辅助生成代码模块&#xff0c;效率提…...

Python类与对象实战:从简历模板到动态方法绑定的完整指南

Python类与对象实战&#xff1a;从简历模板到动态方法绑定的完整指南 面向对象编程&#xff08;OOP&#xff09;是现代编程语言的核心范式之一&#xff0c;而Python作为一门多范式语言&#xff0c;其面向对象特性尤为强大且易于使用。本文将通过构建一个简历模板系统的完整案例…...

从Sketchfab下载的glTF模型怎么用?手把手教你用Assimp 5.3.1在Visual Studio 2022里解析《蔚蓝档案》角色数据

从Sketchfab下载的glTF模型实战解析&#xff1a;用Assimp 5.3.1提取《蔚蓝档案》角色数据 当你在Sketchfab上发现一个精美的《蔚蓝档案》角色模型&#xff0c;下载glTF格式文件后&#xff0c;接下来该怎么办&#xff1f;本文将带你从零开始&#xff0c;使用Assimp 5.3.1库在Vi…...