汽车用CSS滚动(Auto scrolling with CSS)

在我的网站[基于WordPress的]，我有一个项目滑块（有一些文字技术上图像）。但是，滑不自动滚动，有滑动左边和右边的按钮。

http://i47.tinypic.com/97uxz4.jpg

我想删除的按钮，使滑动汽车。我不想用任何JavaScript。我想用CSS来实现。是否有可能如果是又如何？

如果这是不可能什么是最短的解决方案要做到这一点，这是我的工作现场

http://aniyanetworks.net/Blog

Answer 1:

1）您无法启动与CSS或纯HTML DOM操作。你总是需要一个操纵语言（如JavaScript）

2）您可以覆盖当前的CSS删除按钮和调整visibility或display标签来显示他们离开或（占位）不可见。

最后，你真正需要的JavaScript这个触发动态隐藏，并让自动滑动的发生是setInterval秒。

编辑：

这可能是东西给你用动画滑块工作：

 #container { height: 200px; width: 800px; border: 1px solid #333; overflow: hidden; margin: 25px auto; } #box { background: orange; height: 180px; width: 400px; margin: 10px -400px; -webkit-animation-name: move; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: right; -webkit-animation-timing-function: linear; } #box:hover { -webkit-animation-play-state: paused; } @-webkit-keyframes move { 0% { margin-left: -400px; } 100% { margin-left: 800px; } }

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML</title> <link rel="stylesheet" href="main2.css" type="text/css" /> </head> <body> <div id="container"> <div id="box">as</div> </div> </body> </html>

结果

这是唯一的WebKit版本。这些是其他的浏览器的等同物：

该@关键帧：

@-moz-keyframes move {
@-o-keyframes move {
@keyframes move {

内部#box （仅示出了一个属性作为例子）：

-moz-animation-name: move;
-o-animation-name: move;
animation-name: move;

Answer 2:

下面是一个例子（小提琴使用的） animations 。你可以将此到您.post-list ：

.post-list {
    animation: slide infinite 3s alternate;
}

@keyframes slide {
  0% {
    margin-left: 0px;
  }
  50% {
    margin-left: -100px;
  }
  100% {
    margin-left: -200px;
  }
}

要禁用悬停动画，使用：

.post-list:hover {
    animation-play-state: paused;
}

不要忘了供应商前缀（ -webkit-...在Allendars答案等）等。

当然，你得玩。这应该仅仅是它如何可以工作的提示。

Answer 3:

你可以不能够做很多动画与CSS。 JavaScript是要走的路。我也想获得它的窍门......古德勒克给你。

文章来源: Auto scrolling with CSS