html5 - css3单向转换

  显示原文与译文双语对照的内容
0 0

嘿,这里有一个棘手的问题:

我知道使用CSS3转换,可能会对任何属性有一个'向上平滑'和'向下平滑'效果。

我可以只设置使用css3( 如果可能,我想避免 js,因为没有有意义的原因), 只有'向下平滑'效应。

逻辑流:

  • 用户单击元素
  • 转换需要 0.5秒才能将背景颜色从白色改为黑色
  • 用户让鼠标离开鼠标左键
  • 转换需要 0.5秒才能将背景颜色从黑色改为白色

我想要的:

  • 用户单击元素
  • 转换需要 0秒才能更改
  • 用户松开鼠标按钮
  • 转换需要 0.5秒才能更改。

没有'转换中'时间,但有一个'转换出'时间。

编辑 #1: 已经将文本更改为类似列表的文本。 没有意识到它在默认情况下不会发生。

时间:原作者:1个回答

0 0

我在 CSS3 Tryit编辑器中尝试了以下内容,它在 Chrome ( 12.0.742.60 beta-m ) 中工作。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <style type="text/css"> 
/* 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;
 }
 </style>
 </head>
 <body>
 <input type="button" value="click me to see the transition effect!">
 </body>
</html>
原作者:
...