Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html CSS动画滚动文本在边缘浏览器中不起作用(translate3d)_Html_Css - Fatal编程技术网

Html CSS动画滚动文本在边缘浏览器中不起作用(translate3d)

Html CSS动画滚动文本在边缘浏览器中不起作用(translate3d),html,css,Html,Css,我尝试过滚动文本,它在chrome中运行良好。 但它在EDGE浏览器中不起作用。 下面是我的代码。我使用动画名称作为代码。我应用了动画 @keyframes-ticker{ 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(-100%,0,0);} } .t集装箱{ 宽度:100%; 溢出:隐藏; } .股票代码包{ 宽度:100%; 左:100%; 背景色:#eee; } .股票行情移动{ 显示:内联块; 空白:nowr

我尝试过滚动文本,它在chrome中运行良好。 但它在EDGE浏览器中不起作用。 下面是我的代码。我使用动画名称作为代码。我应用了动画

@keyframes-ticker{
0%{transform:translate3d(0,0,0);}
100%{transform:translate3d(-100%,0,0);}
}
.t集装箱{
宽度:100%;
溢出:隐藏;
}
.股票代码包{
宽度:100%;
左:100%;
背景色:#eee;
}
.股票行情移动{
显示:内联块;
空白:nowrap;
右:100%;
动画迭代次数:无限;
动画计时功能:线性;
动画名称:ticker;
动画持续时间:10秒;
}
.股票移动:悬停{
动画播放状态:暂停;
}
.股票代码项目{
显示:内联块;
填充:02rem;
}

Lorem ipsum dolor sit amet,是一位杰出的献身者。
阿利夸姆·康塞夸特·瓦里乌斯·康塞夸特。
马利苏阿达sollicitudin氏狸殖吸虫。
佩伦茨克拍卖人莫莱斯蒂·奥奇·乌特·布兰迪特。

您需要添加跨浏览器css,如下所示:

@keyframes-ticker{
0% { 
变换:translate3d(0,0,0);
-webkit转换:translate3d(0,0,0);
-moz变换:translate3d(0,0,0);
-o变换:translate3d(0,0,0);
}
100% { 
转换:translate3d(-100%,0,0);
-webkit转换:translate3d(-100%,0,0);
-moz变换:translate3d(-100%,0,0);
-o变换:translate3d(-100%,0,0);
}
}
@-webkit关键帧代码{
0% { 
变换:translate3d(0,0,0);
-webkit转换:translate3d(0,0,0);
-moz变换:translate3d(0,0,0);
-o变换:translate3d(0,0,0);
}
100% { 
转换:translate3d(-100%,0,0);
-webkit转换:translate3d(-100%,0,0);
-moz变换:translate3d(-100%,0,0);
-o变换:translate3d(-100%,0,0);
}
}
@-moz关键帧自动计数器{
0% { 
变换:translate3d(0,0,0);
-webkit转换:translate3d(0,0,0);
-moz变换:translate3d(0,0,0);
-o变换:translate3d(0,0,0);
}
100% { 
转换:translate3d(-100%,0,0);
-webkit转换:translate3d(-100%,0,0);
-moz变换:translate3d(-100%,0,0);
-o变换:translate3d(-100%,0,0);
}
}
@-ms关键帧计时器{
0% { 
变换:translate3d(0,0,0);
-webkit转换:translate3d(0,0,0);
-moz变换:translate3d(0,0,0);
-o变换:translate3d(0,0,0);
}
100% { 
转换:translate3d(-100%,0,0);
-webkit转换:translate3d(-100%,0,0);
-moz变换:translate3d(-100%,0,0);
-o变换:translate3d(-100%,0,0);
}
}
@-o-关键帧计数器{
0%{transform:translate3d(0,0,0);}
100%{transform:translate3d(-100%,0,0);}
}
.t集装箱{
宽度:100%;
溢出:隐藏;
}
.股票代码包{
宽度:100%;
左:100%;
背景色:#eee;
}
.股票行情移动{
显示:内联块;
空白:nowrap;
右:100%;
动画:ticker 10s线性无限;
-webkit动画:ticker 10s线性无限;
-moz动画:ticker 10s线性无限;
-ms动画:ticker 10s线性无限;
-o-动画:ticker 10s线性无限;
}
.股票移动:悬停{
动画播放状态:暂停;
}
.股票代码项目{
显示:内联块;
填充:02rem;
}

Lorem ipsum dolor sit amet,是一位杰出的献身者。
阿利夸姆·康塞夸特·瓦里乌斯·康塞夸特。
马利苏阿达sollicitudin氏狸殖吸虫。
佩伦茨克拍卖人莫莱斯蒂·奥奇·乌特·布兰迪特。

我使用的是Edge 44版,它不工作Edge没有滚动,文本显示如HTMLC中所述。你能用当前的问题代码重现错误吗?实际上,Edge中的translate3d不工作。我不知道我需要添加哪一个。我已经更新了代码。请尝试一下,让我知道它是否工作?不,代码在chrome中工作正常,在EDGE不工作。如果你在任何地方出错,请再次检查,因为相同的代码在我的EDGE浏览器中工作正常,但文本没有完全滚动,所有文本并不是完全滚动的,一旦滚动了一半文本,文本就会从右向左滚动。我需要滚动所有文本,然后它会从右向左滚动