CSS3单向过渡

/* 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!">

Css相关问答推荐

如何在CSS中使用nextJs来指定基色？

CSS媒体查询不显示所需的输出

如果父元素是弹性元素，则不会显示带有纵横比的空div

如果一个类紧挨着另一个具有特定类的元素，请使用特殊的CSS，只使用不带JS的CSS

在 CSS 中跨列对齐文本基线

使用普通 CSS 的视口对角线长度

解释 "document.styleSheets[0].cssRules[0].style;"

排除特定元素的目标元素

如何更改 JqGrid 中的pager 背景 colored颜色 ？

Blazor 组件未链接 css

如何将数据从样式化组件发送到函数？

Rails 7引擎如何使未编译的样式表可用于托管应用程序？

仅对父容器应用模糊效果

使用 HTML 和 CSS 滚动表格

使用 CSS 在悬停时转换 SVG 路径的填充属性

如何制作一个div来包装两个浮动div？

Bootstrap 3 - 在每个网格列之后打印布局和中断

位置元素垂直固定，绝对水平

如何使 window.scrollTo() 效果平滑

height： 100% 或 min-height： 100% 用于 html 和 body 元素？