javascript - 如何为 Dreamweaver 图像翻转制作缓动效果？

Answer 1

您是否正在寻找专门的（跨平台）Javascript 解决方案？

如果没有，您可以在纯 CSS3 中轻松完成。虽然 IE 对transitions. 丁：

您可以尝试像这样设置 CSS：

div.roller { width: 50px; height: 50px; border: solid 1px green;}

div.roller div { -webkit-transition: all 1s ease-in-out; width: 50px; height: 50px; }

div.off, div.roller:hover div.over { opacity: 1.0; }

div.roller:hover div.off, div.over { opacity: 0; }

.off { background-color: red; position: absolute;}

.over { background-color: yellow; }

添加浏览器特定的前缀transitions，我只是-webkit-为了方便使用。

您可以将图像设置为.off和.overdiv 的背景，将它们嵌入其中，甚至使用img标签代替div标签。

确保将元素设置为初始向上状态 ,.off以position: absolute使其堆叠在向下状态 , 之上.over。

像这样的html：

<div class="roller" >
    <div class="off">off</div>
    <div class="over">over</div>
</div>​

在这里摆弄它。