Fatal编程技术网
  • html/
  • Html CSS translate属性在Chrome上中断，但在Firefox中显示完美

Html CSS translate属性在Chrome上中断，但在Firefox中显示完美

html css google-chrome

Html CSS translate属性在Chrome上中断，但在Firefox中显示完美,html,css,google-chrome,css-grid,Html,Css,Google Chrome,Css Grid,我正在制作一个个人网站，用于在GitHub中进行演示。 我用CSS制作了一些简单的动画。流量在Firefox中显示得非常完美，但在Chrome（和Brave）中却停止了。我认为问题不在于网格显示。你知道问题出在哪里吗 正文{ 溢出x：隐藏； 高度：100vh； } 潘塔拉先生{ 高度：100vh； 宽度：100vw； 显示：网格； 溢出：隐藏； 网格模板列：最小最大值（35%，45%）自动； } .出席{ 背景：#1c1ff； z指数：5； 显示：网格； 网格模板列：最小最大值（0%，45%）

我正在制作一个个人网站，用于在GitHub中进行演示。 我用CSS制作了一些简单的动画。流量在Firefox中显示得非常完美，但在Chrome（和Brave）中却停止了。我认为问题不在于网格显示。你知道问题出在哪里吗

正文{
溢出x：隐藏；
高度：100vh；
}
潘塔拉先生{
高度：100vh；
宽度：100vw；
显示：网格；
溢出：隐藏；
网格模板列：最小最大值（35%，45%）自动；
}
.出席{
背景：#1c1ff；
z指数：5；
显示：网格；
网格模板列：最小最大值（0%，45%）自动；
}
.texto{
比例：0.8；
翻译：0vw 10vh；
网格柱：2/3；
z指数：4；
}
.动物{
显示：网格；
背景：线性梯度（到顶部，rgb（124179189），rgb（1993100））；
证明项目：中心；
}
露娜先生{
位置：绝对位置；
高度：9.5vw；
不透明度：0.9；
翻译：0 22vh；
z指数：3；
}
卢纳卢兹先生{
位置：绝对位置；
翻译：-0.7vw 20.6vh；
高度：15vw；
过滤器：模糊（2px）；
不透明度：0.8；
旋转：8度；
z指数：2；
}
卢纳卢兹先生{
不透明度：0.065；
}
努贝先生{
高度：6.5vw；
不透明度：0.65；
动画名称：nube；
动画持续时间：70秒；
动画迭代次数：无限；
动画计时功能：线性；
过滤器：模糊（0.5px）；
z指数：4；
}
@关键帧nube{
0% {
翻译：30vw 21vh；
}
85% {
翻译：-40vw 21vh；
}
100% {
翻译：-40vw 21.5vh；
}
}
梅萨先生{
位置：绝对位置；
翻译：3vw 60vh；
高度：18vw；
}
潘扎先生{
动画名称：潘扎；
动画持续时间：10秒；
动画迭代次数：无限；
动画延迟：3s；
z指数：7；
}
@关键帧panza{
0% {
规模：1；
}
22% {
比例：1.06；
}
30% {
比例：1.06；
}
52% {
规模：1；
}
}
卡德拉多先生{
位置：绝对位置；
翻译：41.5vw 0；
高度：100.2vh；
z指数：3；
}
.mesa.humo{
动画名称：humo；
动画持续时间：5.5s；
动画迭代次数：无限；
不透明度：0；
}
@关键帧休谟{
0% {
不透明度：0；
}
13% {
不透明度：1；
}
26% {
不透明度：0；
}
}
胡莫先生{
动画延迟：-0.5s；
}
休谟{
动画延迟：-0.25秒；
}
路径：第n个子（3）{
填充物：#4b87be；
}
estrella_1{
高度：1.1vmin；
边界半径：65%；
背景：rgba（255,180,218,0.445）；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
翻译：-20vw 18vh；
旋转：70度；
}
@布里洛关键帧{
0% {
盒影：0.37vmin0.37vminRGBA（255、180、218、0.555）；
背景：rgba（255,180,218,0.479）；
不透明度：1；
规模：1；
}
40% {
盒影：0.15vmin 0.15vmin rgba（255、180、218、0.5）；
背景：rgba（255,180,218,0.384）；
不透明度：0.70；
比例：0.8；
}
80% {
盒影：0.37vmin0.37vminRGBA（255、180、218、0.555）；
背景：rgba（255,180,218,0.479）；
不透明度：1；
规模：1；
}
100% {
盒影：0.37vmin0.37vminRGBA（255、180、218、0.555）；
背景：rgba（255,180,218,0.479）；
不透明度：1；
规模：1；
}
}
estrella_2{
翻译：16vw 5vh；
高度：1V分钟；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-1.11s；
旋转：105度；
动画延迟：-8.88秒；
边界半径：65%；
}
estrella_3{
高度：1.1vmin；
翻译：10vw-10vh；
旋转：35度；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-6.66s；
旋转：250度；
边界半径：65%；
}
estrella_4{
翻译：-3.7vw 3vh；
高度：0.8vmin；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-6.66s；
旋转：200度；
边界半径：65%；
}
estrella_5{
翻译：-20vw-23vh；
高度：0.9vmin；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-5.55s；
旋转：200度；
边界半径：65%；
}
estrella_6{
翻译：15vw-17vh；
高度：1V分钟；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-4.44s；
旋转：200度；
边界半径：65%；
}
estrella_7{
翻译：-15vw-28vh；
高度：0.8vmin；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-4.44s；
旋转：200度；
边界半径：65%；
}
estrella_8{
翻译：-13vw-45vh；
高度：1V分钟；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-7.77秒；
旋转：170度；
边界半径：65%；
}
estrella_9{
翻译：-5vw-75vh；
高度：0.8vmin；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-3.33秒；
旋转：200度；
}
estrella_10{
翻译：13.5vw-82vh；
高度：0.8vmin；
动画名称：布里洛；
动画持续时间：7秒；
动画迭代次数：无限；
动画延迟：-3.33秒；
旋转：250度；
边界半径：65%；
}
@仅介质屏幕和（最小宽度：768px）{
.texto{
比例：1.15；
翻译：0vw 12vh；
}
卢纳卢兹先生{
位置：绝对位置；
翻译：-0.7vw 19vh；
高度：15vw；
过滤器：模糊（2px）；
不透明度：0.8；
旋转：8度；
z指数：2；
}
}
Chrome不支持translate属性。相反，请使用以下公式：

transform: translate(x, y)
比如说,

translate: 41.5vw 0
变成

transform: translate(41.5vw, 0)
您还需要使用旋转标记：
transform:rotate（x）
和缩放标记：
transform:scale（x）

这是跨浏览器css支持问题。建议您使用一些polyfill-like进行跨浏览器支持。

图像标签应写为：