相关疑难解决方法(0)

使用 css3 动画关键帧继续滑块

我正在使用 css3 构建一个滑块。现在滑块连续运行，但流程不正确。在幻灯片 4 之后，滑块从左到右返回到第一张幻灯片。

在最后一张幻灯片之后我想要的是第一张幻灯片应该从右到左出现，因为它以其他幻灯片的方式出现。

只能通过 css 实现吗？

@keyframes slide{
  0%{ transform:translateX(0px) }
  25%{ transform:translateX(-200px) }
  50%{ transform:translateX(-400px) }
  75%{ transform:translateX(-600px) }
  100%{ transform:translateX(0px) }
}

Run Code Online (Sandbox Code Playgroud)

小提琴

html css css-animations

Car*_*los

2016 10-25

3
推荐指数

1
解决办法

8122
查看次数

如何创建无限滚动图库

我正在尝试找出一种方法，使同一行上的多个图像延伸超过 div 继续向左滚动，直到它超出视图，此时它将移动到图像库的末尾并继续再次滚动即使它在视野之外。

这是我到目前为止的代码。我在课堂上对图像进行游戏，因为我觉得这会有所帮助，但我还不确定如何。

html, body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
  height: 150px;
  bottom: 0;
  background: blue;
  position: absolute;
  overflow:hidden;
  overflow-y: hidden;
  white-space:nowrap;
}
#permas img {
  height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
<title>Test site
</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="permas">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg"> …

Run Code Online (Sandbox Code Playgroud)

html javascript css infinite

Rag*_*dey

lucky-day

2
推荐指数

1
解决办法

1万
查看次数