使用 CSS 自动滚动 [英] Auto scrolling with CSS

查看：18 发布时间：2021/11/10 5:53:23 css animation scroll

本文介绍了使用 CSS 自动滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我想删除那个按钮并让它滑动 auto .我不想使用任何 javascript .我想用 CSS 来完成.如果是，那有可能吗?

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

http://aniyanetworks.net/Blog

解决方案

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

2.) 您可以通过覆盖当前 CSS 并调整 visibility 或 display 标签来移除按钮以将它们呈现出来或(占位)不可见.

最后，你真的需要 JavaScript 来触发动态隐藏并使用 setIntervals 使自动滑动发生.

这可能是您为滑块设置动画的工作:

#container {高度:200px；宽度:800px；边框:1px 实心 #333；溢出:隐藏；边距:25px 自动；}#盒子 {背景:橙色；高度:180px；宽度:400px；边距:10px -400px；-webkit-animation-name:移动；-webkit-animation-duration: 4s;-webkit-animation-iteration-count:无限；-webkit-animation-direction:对；-webkit-animation-timing-function:线性；}#box:悬停{-webkit-animation-play-state:暂停；}@-webkit-keyframes 移动 {0% {左边距:-400px；}100% {左边距:800px；}}

<html lang="zh-cn"><头><meta charset="utf-8"><title>HTML</title><link rel="stylesheet" href="main2.css" type="text/css"/><身体><div id="容器"><div id="box">as</div>

</html>

结果

这是仅限 WebKit 的版本.这些是其他浏览器的等效项:

@ 关键帧:

@-moz-keyframes 移动 {@-o-keyframes 移动 {@关键帧移动{

#box 内部(仅显示一个属性作为示例):

-moz-animation-name:移动；-o-animation-name:移动；动画名称:移动；

In my website [based on wordpress] , I have a project slider (technically image with some text) . But that slider is not auto scrolling , there is a button for sliding left and right .

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

I want to remove that button and make it sliding auto . I don't want use any javascript . I want to accomplish with CSS . Is it possible if yes then how ?

If it is not possible what is the shortest possible solution to do this , Here is my working site

http://aniyanetworks.net/Blog

解决方案

1.) You can't initiate DOM actions with CSS or pure HTML. You always need a manipulating language (like JavaScript)

2.) You can remove the buttons by overwriting the current CSS and adjust the visibility or display tag to render them away or (placeholding) invisible.

In the end you really need JavaScript for this to trigger dynamic hiding and to make the automatic slide happen with setIntervals.

Edit:

This might be something for you to work with animating the slider:

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

Result

This is the WebKit-only version. These are the equivalents for other browsers:

The @ keyframes:

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

Inside #box (only one property shown as example):

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

这篇关于使用 CSS 自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用 CSS 自动滚动 [英] Auto scrolling with CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用 CSS 自动滚动 [英] Auto scrolling with CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭