当前位置: 首页 > 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搭配。 核心的使用场景是办公。 因此轻薄和静音是这类鼠标的核心卖点。 同时用户并不愿意付出太…...

Speech Seaco Paraformer问题解决:识别不准?试试热词功能提升准确率

Speech Seaco Paraformer问题解决&#xff1a;识别不准&#xff1f;试试热词功能提升准确率 1. 语音识别不准的常见困扰 语音识别技术在日常工作和生活中应用越来越广泛&#xff0c;但很多用户在使用过程中都会遇到一个共同问题&#xff1a;识别结果不准确。特别是当录音内容…...

3个高效解决Atlas OS中Xbox登录问题的终极技巧

3个高效解决Atlas OS中Xbox登录问题的终极技巧 【免费下载链接】Atlas &#x1f680; An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.com/GitHub_Trending/atlas1/Atlas Atlas…...

bge-large-zh-v1.5在RAG中的应用:提升问答系统准确率

bge-large-zh-v1.5在RAG中的应用&#xff1a;提升问答系统准确率 1. RAG系统与Embedding模型的关系 1.1 什么是RAG系统 RAG&#xff08;Retrieval-Augmented Generation&#xff09;系统是现代问答系统的核心技术架构&#xff0c;它通过两个关键步骤回答用户问题&#xff1a…...

基于LFM2.5-1.2B-Thinking-GGUF的Java面试题智能生成与解析系统

基于LFM2.5-1.2B-Thinking-GGUF的Java面试题智能生成与解析系统 1. 解决Java面试准备的痛点 对于Java开发者来说&#xff0c;面试准备往往是个耗时费力的过程。传统的刷题方式存在几个明显问题&#xff1a;一是题库更新慢&#xff0c;跟不上技术发展&#xff1b;二是题目质量…...

七牛云CDN加速+HTTPS配置全攻略(阿里云域名解析实战)

七牛云CDN加速HTTPS配置全攻略&#xff08;阿里云域名解析实战&#xff09; 当你的网站访问速度开始影响用户体验&#xff0c;或是浏览器频繁弹出"不安全"警告时&#xff0c;CDN加速和HTTPS配置就成了刚需。七牛云作为国内领先的云服务商&#xff0c;提供了从存储到…...

戴森球计划工厂蓝图终极指南:3000+精选设计让你的太空帝国建设效率翻倍

戴森球计划工厂蓝图终极指南&#xff1a;3000精选设计让你的太空帝国建设效率翻倍 【免费下载链接】FactoryBluePrints 游戏戴森球计划的**工厂**蓝图仓库 项目地址: https://gitcode.com/GitHub_Trending/fa/FactoryBluePrints FactoryBluePrints是一个专为戴森球计划玩…...

MT5中文改写工具实操:支持Markdown格式保留与结构化文本增强

MT5中文改写工具实操&#xff1a;支持Markdown格式保留与结构化文本增强 1. 工具概览与核心价值 MT5中文改写工具是一个基于Streamlit和阿里达摩院mT5模型构建的本地化NLP工具。它能对输入的中文文本进行语义改写和数据增强&#xff0c;在保持原意不变的前提下生成多种不同的…...

嘎嘎降AI使用教程:手把手教你用嘎嘎降AI降论文ai率,从97%降到7%实操

嘎嘎降AI使用教程&#xff1a;手把手教你用嘎嘎降AI降论文ai率&#xff0c;从97%降到7%实操 说实话&#xff0c;我当时论文被检测出AI率97%的时候&#xff0c;整个人是懵的。导师直接把报告甩给我说"你这论文是不是全让AI写的"&#xff0c;我那叫一个尴尬。后来折腾了…...

CnDataSeed 发布:中国城市公共服务空间匹配数据库(CUSMD)

一、数据简介透视城市公共服务供需格局&#xff0c;量化空间公平与发展质量&#xff01;在城市高质量发展与共同富裕持续推进的背景下&#xff0c;公共服务体系的评价标准正在从“资源供给规模”逐步转向“居民真实可达体验”。教育、医疗、文化体育、交通与公共安全等公共服务…...

文脉定序在Milvus向量库中的应用:Hybrid Search后重排序增强方案

文脉定序在Milvus向量库中的应用&#xff1a;Hybrid Search后重排序增强方案 在构建智能检索系统时&#xff0c;我们常常遇到一个尴尬的局面&#xff1a;系统能“搜得到”一堆结果&#xff0c;但最相关、最准确的答案却不一定排在最前面。这就像在图书馆里找到了正确的书架&am…...