html css 自动滚动代码,使用CSS自动滚动

1.)您无法使用CSS或纯HTML启动DOM操作.你总是需要一种操纵语言(比如JavaScript)

2.)您可以通过覆盖当前CSS来删除按钮,并调整可见性或显示标记以使其脱离或(占位)不可见.

最后,你真的需要JavaScript才能触发动态隐藏,并使用setIntervals进行自动滑动.

编辑：

这可能适合您使用滑块动画：

#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;

}

}

HTML

as

结果

这是仅限WebKit的版本.这些是其他浏览器的等价物：

@关键帧：

@-moz-keyframes move {

@-o-keyframes move {

@keyframes move {

在#box内部(只有一个属性显示为示例)：

-moz-animation-name: move;

-o-animation-name: move;

animation-name: move;