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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...