2

是否可以使用 CSS 显示锁定图标（处于锁定状态），然后在悬停时将其动画到解锁状态（如下所示）？

在此处输入图像描述

4

3 回答 3

1

你当然可以。我尝试利用 CSS3 旋转和变换原点。在下面的示例中，我只是在我们想要在悬停时设置动画的部分上设置以下值。

transform: rotateY(-180deg);
transform-origin: 25px 0;

这只是一个例子（远非完美，但绝对有效）。如果您喜欢使用相同的逻辑，您可以使用两个图像，或者甚至尝试像我一样只使用 CSS 来制作它，但可能只在一个元素中。

这是我的工作演示（仅限 webkit，但适用于具有适当前缀的所有主要浏览器）。

于 2013-07-25T01:20:35.677 回答
1

绝对有可能，您可以尝试结合 CSS 关键帧的 SVG sprite-sheets；

为动画的所有帧创建一个 SVG 文件，并将其作为所需元素的背景（在我们的例子中是锚元素，让我们用svg类名对其进行注释）：

a.svg {
    background-image: url(lock.svg);
}

您还必须考虑 SVG 图像的纵横比，因此也要设置它，例如：

a.svg {
    width: 1200%;
    height: 100%;
}

现在你必须把它包装在一个裁剪容器中以隐藏所有额外的宽度，所以把它放在另一个元素中，用绝对尺寸咕噜咕噜地把它的overflow属性设置为hidden，比如说，像这样：

<div class="clip">
    <a class="svg" href="#"></a>
</div>

.clip {
    overflow: hidden;
    width: 50px;
    height: 50px;
}

现在我们要声明要使用的关键帧转换，我们只是在这里沿着 X 轴移动，所以：

@-webkit-keyframes lock {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(-100%, 0, 0); }
}

并根据我们的 SVG sprite-sheet 中的帧数逐步使用它：

a.svg {
    -webkit-animation: lock 1s steps(12, end);
}

等待！让我们退后一步（不是双关语），因为我们需要在悬停时激活动画。我们通过:hover状态上的 CSS 转换来做到这一点。好吧，删除最后一条规则并执行以下操作：

a.svg {
    -webkit-transition: -webkit-animation;
}
a.svg:hover {
    -webkit-animation: lock 1s steps(12, end);
}

笔记

  • 这一切都是从Veljko Sekelj 的精彩帖子中无耻地借用，介绍了这种技术。
  • 属性都是面向 Webkit 的，通过 Webkit 驱动的浏览器进行测试。这也可能在 Gecko 中实现。
  • 这适用于任何容器大小，因为我们正在处理矢量图形，并且我们的背景载体是弹性布局的，并且适合其容器的尺寸。
  • 还有一些工作要做，因为我们还需要在locked和unlocked之间切换状态，这里（还）没有介绍。我想我们可以反向运行动画。

我将很快更新这篇文章，以包含一个实时工作演示，但这应该让你在你正在寻找的东西上抢占先机。继续阅读 Veljko Sekelj 的帖子，玩弄代码，扭曲它，转动它，发疯，伙计。

于 2013-07-25T00:57:45.930 回答
0

女巫 css 动画，你不能，但看看我的把戏：

例如，:hover您可以更改背景图像：

a {
    background: url(lock.png) no-repeat center center;
}
a:hover {
    background-image: url(unlock.gif);
}

unlock.gif 是动画 gif 文件，从锁定开始到解锁图像动画

于 2013-07-25T00:25:20.660 回答