css - 在 W3schools 的点击示例中添加 "ripple"效果

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

all 表示应用到元素的所有属性

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