使用CSS动画div滑块-Java 学习之路

我正在设计一个HTML CSS滑块，幻灯片和无限持续时间之间自动转换 . 我在不同的页面上有这个滑块，内容不同（和div的数量），所以我需要为所有内容编写相同的代码 .

<div class="slide-container">
    <div class="slide">div 1 goes here!</div>
    <div class="slide">div 2 goes here!</div>
    <div class="slide">div 3 goes here!</div>
</div>

我已经开始使用这个CSS代码并尝试使用不同的动画，但我不知道如何做到这一点

.slide-container {   
    -webkit-animation: transition 2s infinite linear;
    -moz-animation: transition 2s infinite linear;
    -o-animation: transition 2s infinite linear;
}

编辑：这是我用来解决问题的最后一次转换：

@-webkit-keyframes animation {
    20%,30% {-webkit-transform: translate(100%);}
    70%,100% {-webkit-transform: translate(-100%);}
}

我希望在屏幕上获得一个div为5-10秒，并且div之间的转换为2秒（在括号div中，此时必须在屏幕上，宽度= 100％，高度= 50px）：

（-start-DIV1 5s） - 2s - >（DIV2 5s） - 2s - > ...... - >（DIVN 5s） - 2s - >（DIV1 5s） - > ...

我用CSS做滑块的原因是因为我试图避免使用JavaScript和JQuery函数 .

2 回答

定义 12s 的位置是总滑动时间 . 这除以幻灯片的数量（在此演示中为3）给出了本例中的幻灯片 4s . 这是一种可以切换幻灯片时间的方法 . 但就像提到的另一张海报一样，你仍然需要定制一下 . 我的方法演示了一种水平滑动方法，具有平滑过渡和快速加载时间 . 无论如何，纯CSS3就是你的追求 .

JS Poodle .

CSS3电源：

body {
    padding: 1em;
    background: #999
}
.scrollable {
    width: 333px;
    margin: 0 auto;
    padding: 0;
    border:10px solid #fff;
    background: #000;
    position: relative;
    overflow: hidden;
    text-align: center;
}
img {
    max-width: 333px;
    margin: 0;
    float:left;
}
.items {
    width:999px;
    -webkit-animation: hscroll 12s infinite;
    -moz-animation: hscroll 12s infinite;
    -ms-animation: hscroll 12s infinite;
}

@-webkit-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-moz-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-ms-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

<div class="scrollable">
    <div class="items">
        <img src="http://placehold.it/333x500/E8117F/FFFFFF&text=Horizontal"/>
        <img src="http://placehold.it/333x500/FFFFFF/E8117F&text=css3"/>
        <img src="http://placehold.it/333x500/3D668F/FFFFFF&text=slide show"/>
    </div>
</div>

回复于 2024-04-27T02:26:14+08:00

2
这是一个快速演示，演示了您需要使用的一些技术 . 我使用了您提供的相同HTML标记 . 这不是一个随时可用的“复制和粘贴”解决方案 - 您需要花些时间来理解代码并将该概念应用于您的特定用例 .

该技术基本上涉及并排排列所有滑块，然后每隔几秒移动它们的整行 . 边缘将被裁剪，以便一次只显示一张幻灯片 .

首先，您需要通过对 .slide-container 元素应用宽度和高度来定义"viewing area"的大小 . 然后将 overflow: hidden 应用于容器，以便显示未显示的幻灯片 .

每张幻灯片都应填充"viewing area"，因此对每个 .slide 元素应用100％的宽度和高度 . 您还需要将它们显示为 inline-block 元素，以便它们并排排列，但仍然填充其容器 .

最后，困难的部分：定义动画 . 关键帧动画是基于百分比的 . 基本上，由于有三张幻灯片，我们想要在经过33％的动画后再次切换，再次在66％之后切换，并在100％之后返回到开头 . 我们想要一个平滑的“幻灯片”，所以我们将实际转换总共持续5％ - 所以第一个实际开始时为28％，结束时为33％ . 关键帧代码如下所示：
```
@keyframes slide {
  /* modify percentages to match how many items you have */
  0% { margin-left: 0; } /* initial position */
  /* (stays in first position ) */
  28.333% { margin-left: 0; } /* start sliding */
  33.333% { margin-left: -100%; } /* done sliding */
  /* (stays in second position ) */
  61.667% { margin-left: -100%; } /* start sliding */
  66.667% { margin-left: -200%; } /* done sliding */
  /* (stays in third position ) */
  95% { margin-left: -200%; } /* start sliding */
  100% { margin-left: 0; } /* done sliding - back to initial position */
}
```
它可以像这样应用于第一张幻灯片（根据需要调整过渡时间）：
```
.slide:first-of-type {
  animation: slide 10s ease;
  animation-iteration-count: infinite;
}
```
在您've done this, you' ll之后只需要根据您的喜好进行调整 . 试用幻灯片持续时间和过渡类型 . 也许改变动画最后重复的方式 . 当您将鼠标悬停在"viewing window"上时，甚至可以使用 animation-play-state 属性暂停动画 . 我没有100％清楚它是如何工作的，尝试从 .slide-container 元素中删除 overflow: hidden 属性 .
```
@keyframes slide {
  0% { margin-left: 0; }
  28.333% { margin-left: 0; }
  33.333% { margin-left: -100%; }
  61.667% { margin-left: -100%; }
  66.667% { margin-left: -200%; }
  95% { margin-left: -200%; }
  100% { margin-left: 0; }
}
.slide-container {
  overflow: hidden; /* try commenting this line out! */
  width: 150px;
  height: 100px;
  border: 1px solid #000000;
}
.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.slide:first-of-type {
  animation: slide 10s ease;
  animation-iteration-count: infinite;
}
.slide-container:hover .slide:first-of-type {
  animation-play-state: paused;
}
```
```
<div class="slide-container">
  <div class="slide" style="background: #ff0000">div 1 goes here!</div><div class="slide" style="background: #00ff00">div 2 goes here!</div><div class="slide" style="background: #0000ff">div 3 goes here!</div>
</div>
```
这是jsFiddle上的相同演示 .
回复于 2024-04-27T02:26:14+08:00

使用CSS动画div滑块

2 回答

相关问题