Css 如何制作消失的辉光效果

假设我有一个按钮类

.mat-cancel-color {
    width: 160px;
    border: 1px solid #dddddd;
    color: #dddddd;
    background-color: white;
    border-radius: 25px;
}

每当我点击某个东西（不是“mat cancel color”按钮）时，我想让这个类获得一种发光效果，这种效果会随着时间的推移逐渐消失

我是否应该创建一个新类，然后为该类指定长方体阴影（发光）属性，然后再指定“低于过渡持续时间”属性，然后再次指定长方体阴影（无发光）属性？因此：

click-class {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
transition-duration: .4s;
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
}

或者转换持续时间仅在切换类时有效，还是在切换类内的属性时也有效？如果是这样的话，我该怎么做呢

---

编辑：将转换延迟误认为是转换持续时间。

您正在寻找的是CSS动画。主要是因为您不希望辉光处于默认状态，这就是为什么

transition

在这里不起作用的原因

.mat取消颜色{
宽度：160px；
边框：1px实心#dddddd；
颜色：#dddddd；
背景色：白色；
边界半径：25px；
}
.mat取消颜色：悬停{
动画名称：辉光；
动画持续时间：.4s；
}
.mat取消颜色转换{
宽度：160px；
边框：1px实心#dddddd；
颜色：#dddddd；
背景色：白色；
边界半径：25px；
过渡：全部。4s轻松；
盒子阴影：0px 0px 15px 10px rgba（255,255,0,0）；
}
.mat取消颜色转换：悬停{
框阴影：0px 0px 0px 0px rgba（255，255，0，1）；
}
/*标准语法*/
@关键帧发光{
0% {
盒子阴影：0px 0px 15px 10px rgba（255,255,0,1）；
}
100% {
框阴影：0px 0px 0px 0px rgba（255，255，0，1）；
}
}

按钮
按钮

您要查找的是CSS动画。主要是因为您不希望辉光处于默认状态，这就是为什么

transition

在这里不起作用的原因

.mat取消颜色{
宽度：160px；
边框：1px实心#dddddd；
颜色：#dddddd；
背景色：白色；
边界半径：25px；
}
.mat取消颜色：悬停{
动画名称：辉光；
动画持续时间：.4s；
}
.mat取消颜色转换{
宽度：160px；
边框：1px实心#dddddd；
颜色：#dddddd；
背景色：白色；
边界半径：25px；
过渡：全部。4s轻松；
盒子阴影：0px 0px 15px 10px rgba（255,255,0,0）；
}
.mat取消颜色转换：悬停{
框阴影：0px 0px 0px 0px rgba（255，255，0，1）；
}
/*标准语法*/
@关键帧发光{
0% {
盒子阴影：0px 0px 15px 10px rgba（255,255,0,1）；
}
100% {
框阴影：0px 0px 0px 0px rgba（255，255，0，1）；
}
}

按钮
按钮

您可以使用如下一些psudo类：

:active:not(*element/class*) {...}

然后将所需的光晕动画放在括号内<代码>：active是仅在单击名为的元素时应用的psudo类<代码>：not（）排除括号中列出的类。只要辉光动画工作正常，那么这应该可以工作。
这是我的测试代码片段：

a:active:not(.mat-cancel-color) {...}

---

您可以使用以下一些psudo类：

:active:not(*element/class*) {...}

然后将所需的光晕动画放在括号内<代码>：active是仅在单击名为的元素时应用的psudo类<代码>：not（）排除括号中列出的类。只要辉光动画工作正常，那么这应该可以工作。
这是我的测试代码片段：

a:active:not(.mat-cancel-color) {...}

---

为什么不在此处显示代码段中的示例？++设置相同的属性将不起作用。CSS将从上到下读取类选择器，这意味着

转换延迟

上方的所有

框阴影

属性将被否定，并且在添加类时仅应用以下属性。你想要的是一个CSS动画。@是的，我想问一下，找到一个答案，我会把它标记为正确的。你为什么不想在这里的代码片段中显示一个示例？++设置相同的属性将不起作用。CSS将从上到下读取类选择器，这意味着

转换延迟

上方的所有

框阴影

属性将被否定，并且在添加类时仅应用以下属性。你想要的是CSS动画。@是的，我想问一下，找到一个答案，我会把它标记为正确的谢谢你，我总是觉得动画有问题，所以我尽量避免。这就是为什么我想我可以用过渡时间或类似的东西来解决：）没问题。我还为第二个按钮添加了一个

transition

版本，以显示为什么

transition

在这种情况下不起作用-当鼠标移出时，transition会反转，我假设这不是预期的效果。哦，现在我明白了你的意思，这澄清了很多，再次感谢你。谢谢你，我总是在动画方面遇到麻烦，所以我尽量避免这样做。这就是为什么我想我可以用一个过渡期或者类似的东西来解决这个问题：）没问题。我还为第二个按钮添加了一个

transition

版本，以显示

transition

在这种情况下不起作用的原因-当鼠标移出时，转换会反转，我假设这不是预期的效果。哦，现在我明白你的意思了，这澄清了很多，再次感谢你。