Html 带有href css动画（横幅）的图像不工作（仅在FireFox中）
我正在使用CSS关键帧和动画制作一个自动滚动横幅（带有Html 带有href css动画（横幅）的图像不工作（仅在FireFox中）,html,css,firefox,href,css-animations,Html,Css,Firefox,Href,Css Animations,我正在使用CSS关键帧和动画制作一个自动滚动横幅（带有关键帧移出边距，例如@keyframes teammove{0%{margin left:0px；}100%{margin left:-1200px；}）。不幸的是，它在firefox中不起作用 我测试了不同大小的div和overflow设置，最终发现是标记的问题 下面是banner的工作（不带href）和非工作（带href）版本。任何解决方案都会有所帮助 工作版本： 非工作版本：您可以尝试将javascript onclick事件与imag
关键帧边距@keyframes teammove{0%{margin left:0px；}100%{margin left:-1200px；}非工作版本：您可以尝试将javascript onclick事件与image first和image second调用函数一起使用，如
<!DOCTYPE html>
<html>
<body>
<p>Click the button to set the href value to http://www.google.com.</p>
<button onclick="myFunction()">Take me to google.com</button>
<script>
function myFunction() {
location.href = "http://www.google.com";
}
</script>
</body>
单击按钮将href值设置为http://www.google.com.
带我去google.com
函数myFunction（）{
location.href=”http://www.google.com";
}
<img onclick="myFunction()" src="http://portfoliotheme.org/enigmatic/wp-content/uploads/sites/9/2012/07/placeholder1.jpg" width="300" height="200" class="firstimg">
<img onclick="myFunction()" src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" width="300" height="200">
您可以尝试将javascript onclick事件与image first和image second调用函数一起使用，如
<!DOCTYPE html>
<html>
<body>
<p>Click the button to set the href value to http://www.google.com.</p>
<button onclick="myFunction()">Take me to google.com</button>
<script>
function myFunction() {
location.href = "http://www.google.com";
}
</script>
</body>
单击按钮将href值设置为http://www.google.com.
带我去google.com
函数myFunction（）{
location.href=”http://www.google.com";
}
<img onclick="myFunction()" src="http://portfoliotheme.org/enigmatic/wp-content/uploads/sites/9/2012/07/placeholder1.jpg" width="300" height="200" class="firstimg">
<img onclick="myFunction()" src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" width="300" height="200">
动画最好在包装上设置，而不是在每张幻灯片上设置 我修改了你的画笔。删除了浏览器前缀（现在很少需要它们），将动画移动到包装器，并将所有图像包装在锚中。这里绝对不需要JavaScript
.bannerframe {
width: 3000px;
height: 200px;
animation: teammove 5s linear infinite;
}
最好在包装上设置动画，而不是在每张幻灯片上设置动画 我修改了你的画笔。删除了浏览器前缀（现在很少需要它们），将动画移动到包装器，并将所有图像包装在锚中。这里绝对不需要JavaScript
.bannerframe {
width: 3000px;
height: 200px;
animation: teammove 5s linear infinite;
}
Second在Firefox开发者版中也不起作用！@Vir是的，这就是问题所在。Firefox中的动画只有在没有href的情况下才能工作。有什么想法吗？你可以用onclick事件替换标记，我在下面发布了一个演示。因此，你可以将onclick事件与图像一起使用，我希望问题可以解决。Second在Firefox开发者版中也不起作用！@Vir是的，这就是问题所在。firefox中的动画只在没有href的情况下工作。有什么想法吗？你可以用onclick事件替换标记，我在下面发布了一个演示。所以，你可以用图像的onclick事件，我希望问题可以解决。我最终选择这个作为答案是因为它是一个更优化的解决方案。没有javascript，较少的css，而且我将实现same效果。备注：然而，这种方法需要你精确计算横幅的长度，所以它可能不适合所有人。我最终选择这个作为答案是因为它是一个更优化的解决方案。没有javascript、更少的css和SITL可以达到同样的效果。备注：但是这种方法需要你精确计算横幅的长度横幅的gth，所以它可能不适合所有人