使用 CSS3 过渡，可以对任何属性产生“平滑向上”和“平滑向下”效果。
我可以将其设置为仅具有“平滑”效果吗？我希望解决方案仅使用 CSS，尽可能避免使用 JavaScript。
逻辑流程：
- 用户点击元素
- 背景颜色从白色变为黑色需要 0.5 秒
- 用户松开鼠标左键
- 背景颜色从黑色变为白色需要 0.5 秒
我想要的是：
- 用户点击元素
- 转换需要 0s 来改变
- 用户松开鼠标按钮
- 转换需要 0.5 秒才能改变...
没有“过渡”时间，但有“过渡”时间。
我在 CSS3 Tryit 编辑器中尝试了以下内容，它在 Chrome (12.0.742.60 beta-m) 中工作。
/* transition out, on mouseup, to white, 0.5s */
input
{
background:white;
-webkit-transition:background 0.5s;
-moz-transition:background 0.5s;
-ms-transition:background 0.5s;
-o-transition:background 0.5s;
transition:background 0.5s;
}
/* transition in, on click, to black, 0s */
input:active
{
background:black;
-webkit-transition:background 0s;
-moz-transition:background 0s;
-ms-transition:background 0s;
-o-transition:background 0s;
transition:background 0s;
}
<input type="button" value="click me to see the transition effect!">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
