我正在尝试创建一个滚动的照片横幅。它正在 IE、safari(移动)和 android 和 iphone 上的 chrome 上工作。它无法在我的桌面上运行,或者如果我在任何 Chrome 设备上请求桌面站点。我花了几个小时在谷歌上搜索试图解决这个问题,但根本无法解决。 这是我第一次提问,所以如果我的帖子有问题,请多多包涵。谢谢
#container {
width: 100%;
overflow: hidden;
margin: 5px;
background: white;
}
.photobanner {
height: 350px;
width: 3550px;
margin-bottom: 10px;
}
.photobanner img {
margin: 10px;
max-height: 300px;
margin-top: 30px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
/* Landscape phones and down */
@media (max-width: 750px) {#container {
width: 100%;
overflow: hidden;
margin: 5px 5px;
background: white;
}
.photobanner {
height: 160px;
width: 3550px;
margin-bottom: 5px;
}
.photobanner img {
margin: 5px;
max-height: 150px;
margin-top: 5px;
}
}
最佳答案
我希望这个答案不会来得太晚,但我刚刚解决了一个与您的问题类似的问题,所以我想分享我的解决方案。
- 将通用动画规则放在浏览器特定规则之后。请参阅此答案(css3 animation not working in chrome)。
- 您可能需要在“隐身”选项卡中打开您的网站!由于浏览器 cookie,样式表更改可能不会立即更新。
关于css - @keyframes 在 chrome 桌面上不工作(IE/Chrome 移动版都可以),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43018724/