4

我想创建一个带有一些很酷的 3d 效果的图像滑块，例如这个：http ://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

问题是，虽然我知道如何使用 CSS3 3D 变换来旋转某些东西，但我不知道如何为图像的“部分”设置动画。在上面的链接中，脚本似乎以某种方式将图像“切片”成几部分，然后分别为它们设置动画。然而，图像没有被预先分割——它是一个完整的图像。

任何人都可以推荐任何有关如何实现此效果的教程，或者只是给出用于执行此操作的任何技术的名称？先感谢您！

4

4 回答 4

3

好吧，这个插件的功能很简单：

您的图像在无序列表中。一旦触发更改，就会发生以下情况。

div正在创建一个叠加层，其中包含 5 个其他 div - 切片。

+----+----+----+----+----+
|    |    |    |    |    |
|    |    |    |    |    |
| 1  | 2  | 3  | 4  | 5  |
|    |    |    |    |    |
|    |    |    |    |    |
+----+----+----+----+----+

这些切片包含几个 div，这些 div 与您想要转换的图像设置为背景图像（仅显示它的相应部分）。

            +---+\
  Slice 1:  |\  | \
  Image     | \_|__\
  currently | | |  |
  shown   ->| |_|__|
            | / |  /
            |/  | /<- Image to transition to
            +---+/

现在为每个隔间设置一个超时（长度略有不同），使用实际的 CSS-Transition（180° 旋转）旋转到新图像。

于 2012-10-27T17:06:50.493 回答
1

CSS3 动画就是随着时间的推移改变单个 DOM 节点的 CSS 属性。因此，从技术上讲，您可以不为图像的某些部分设置动画 - 或者就此更改 DOM 元素的特定区域区域的属性。所以你要做的实际上是拥有多个 DOM 元素，每个元素代表一个切片。

一种方法是为每个切片设置一个 div，并将图像设置为背景。每个预先指定大小的 div 并排放置的背景图像将以这样的方式定位，即它们可以组合形成整个图像。

现在您可以使用 css 动画为每个这样的 div 设置动画。如果您打算使用 javascript，则不必让服务器呈现所有这些 div 元素。实际上，可以通过 javascript 创建每个切片的 div-s 和设置背景位置。

于 2012-10-27T16:57:15.280 回答
1

查看插件源代码，我可以看到它确实将图像切片并分别旋转每个部分。它在制作动画之前创建切片并隐藏原始切片，并在制作动画后显示新的原始切片并销毁切片。

这是分割图像的一种方法：

for each slice:
  create a new copy of the image
  place the image in a new div
  set the image `position` to `absolute` and `top` to minus the slice beginning
  set the div height to the slice height and `overflow` to `hidden`
  place the div to the correct position
于 2012-10-27T16:43:39.667 回答
0

我正在制作一个微调器，而不是在 Photoshop 中制作单个图像，或者在我使用:before选择器在图像上设置径向背景渐变的任何地方

-webkit-radial-gradient(center, ellipse cover, #fff 23%,transparent 27%,transparent 100%)

允许下面副本的中心显示（非动画），通过复制 img 元素并使用 Javascript 将其位置设置为与现有元素相同来定位

function spinBadge() {
    hovered = document.querySelector('a:hover img')
    spinner = document.createElement('img');
    spinner.src = hovered.src;
    spinner.className = 'spinner';
    spinner.setAttribute('width','120px');
    spinner.setAttribute('height','120px');
    spinner.setAttribute('style','border:0; margin:0; max-width: none; position: absolute; pointer-events: none; left: '+hovered.offsetLeft+'px; top: '+hovered.offsetTop+'px;');
    hovered.parentNode.appendChild(spinner);
    setTimeout(function(){document.querySelector('.spinner').className = 'spinner wheee'})
    setTimeout(function(){document.querySelector('.wheee').remove();},3000);
}

有很多方法可以通过改变边距等来“分割”整个图像，并让部分有选择地显示出来。

SVG 图像也非常适合动画，并且可以为各个部分指定类，从而使用 CSS 过渡进行动画处理。如果你给它一个谷歌，这个网站和 CSS 技巧之类的东西很多（这会浮现在脑海中）。

于 2014-05-03T01:40:37.003 回答