创建动画热点图标
了解如何为点热点创建动画图标。这个特殊的动画图标将由铰接在中心上的旋转条组成。
本教程改编自我们关于使用 CSS 的网络研讨会 。这是创建旋转矩形的简单方法。
-
画一个矩形。 -
将以下 CSS 添加到 Skin 属性中的 Embedded 样式表。@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } -
将此添加到矩形的 CSS 样式中：animation: rotation 2s infinite linear;。矩形将开始旋转。 -
复制矩形并为新矩形指定唯一 ID。 -
在“嵌入式样式表”中，复制并粘贴之前添加的代码块。 -
Chanage 旋转到旋转 CCW。然后，变换：旋转（-360 度）;确保第二个矩形沿相反方向旋转。@keyframes rotationCCW { from { transform: rotate(0deg); } to { transform: rotate(-359deg); } } -
选择其中一个矩形，并将 CSS 样式更改为animation: rotationCCW 2s infinite linear;
现在矩形沿相反方向旋转。您可以探索更改速度甚至添加 easing：animation： rotationCCW 2s infinite ease-in-out; 。