使用CSS自动滚动

在我的网站[基于wordpress]中,我有一个项目滑块(技术上带有一些文字的图像).但是该滑块不是自动滚动,有一个左右滑动的按钮.

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

我想删除该按钮并使其自动滑动.我不想使用任何JavaScript.我想用CSS完成.有可能,如果是,那么如何？

如果不可能,最简单的解决方案是什么,
这是我的工作网站

http://aniyanetworks.net/Blog

解决方法

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

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

使用CSS自动滚动

解决方法

猜你在找的CSS相关文章