在W3schools的点击示例中添加“涟漪”效果

Question

我最近在w3schools学习Css，我不能完全弄清楚这个example是如何工作的。

我不知道这个例子中以下3个转换代码的区别或用法是什么

.button:after {
 transition-duration: 0.4s;
   }

.button:after {
transition: all 0.8s;
  }

.button:active:after {
transition: 0s
}

如果有人可以帮助我，那将是非常棒的。

Answer 1

更好地向developer.mozilla

学习

transition: <property> <duration> <timing-function> <delay>;

在你的情况下

.button:after {
    transition-duration: 0.4s;
 }

这里你需要添加

transition-property: font-size;
transition-duration: 0.4s;
transition-delay: 2s;/*if you want a delay*/

所有表示适用于元素的所有属性

   .button:after {
      transition: all 0.8s;
   }

Answer 2

.button:active:after {
transition: 0s
}

这样可以在0秒内点击白框。

.button:after {
transition: all 0.8s;
  }

这使得白盒在0.8秒后不可见。

.button:after {
 transition-duration: 0.4s;
   }

在您给出的示例中，这并不能用于任何实际目的，但可以与（例如）:hover效果结合使用。