Html 涟漪效应不适用于非铬浏览器

我试图在点击按钮时设置连锁反应

我已经成功地做到了这一点，但它只在谷歌浏览器中工作，我不知道为什么。这种效果在Safari或FireFox（尚未测试IE）中没有出现

演示：

HTML:

---

您需要为safari和chrome添加

-webkit-

，为mozila添加

-moz-

，为opera浏览器添加

-o-

按钮{
边界：无；
光标：指针；
颜色：黑色；
宽度：130px；
填充：10px；
边界半径：2px；
字号：19px；
背景：绿色；
位置：相对位置；
溢出：隐藏；
}
按钮：之后{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
宽度：5px；
高度：5px；
背景：rgba（255,255,255,5）；
不透明度：0；
边界半径：100%；
转换：比例（1，1）转换（-50%）；
变换原点：50%50%；
}
@关键帧波纹{
0% {
变换：缩放（0,0）；
不透明度：1；
}
20% {
变换：比例（25,25）；
不透明度：1；
}
100% {
不透明度：0；
变换：比例（40,40）；
}
}
@-webkit关键帧纹波{
0% {
变换：缩放（0,0）；
不透明度：1；
}
20% {
变换：比例（25,25）；
不透明度：1；
}
100% {
不透明度：0；
变换：比例（40,40）；
}
}
@-moz关键帧纹波{
0% {
变换：缩放（0,0）；
不透明度：1；
}
20% {
变换：比例（25,25）；
不透明度：1；
}
100% {
不透明度：0；
变换：比例（40,40）；
}
}
@-o关键帧纹波{
0% {
变换：缩放（0,0）；
不透明度：1；
}
20% {
变换：比例（25,25）；
不透明度：1；
}
100% {
不透明度：0；
变换：比例（40,40）；
}
}
按钮：焦点：不（：活动）：：之后{
动画：ripple 1s放松；
}
按钮：焦点{
大纲：无；
}
*{框大小：边框框；}

注意：这种涟漪效应只适用于Chrome浏览器

单击我

在CSS代码中，有些属性没有工作标准，可能永远不会成为标准（变换，@关键帧）。为了克服这个问题，我们使用供应商前缀（-webkit，-moz）

了解更多

带有供应商前缀代码

*{框大小：边框框；}
钮扣{
边界：无；
光标：指针；
颜色：黑色；
宽度：130px；
填充：10px；
边界半径：2px；
字号：19px；
背景：绿色；
位置：相对位置；
溢出：隐藏；
}
按钮：之后{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
宽度：5px；
高度：5px；
背景：rgba（255,255,255,5）；
不透明度：0；
边界半径：100%；
-webkit转换：比例（1,1）转换（-50%）；
-moz变换：缩放（1，1）平移（-50%）；
-ms转换：比例（1，1）转换（-50%）；
-o变换：比例（1，1）平移（-50%）；
转换：比例（1，1）转换（-50%）；
-webkit转换来源：50%50%；
-moz变换原点：50%50%；
-ms转换来源：50%50%；
-o-变换原点：50%50%；
变换原点：50%50%；
}
@关键帧波纹{
0% {
-webkit变换：缩放（0,0）；
-moz变换：缩放（0,0）；
-ms变换：比例（0,0）；
-o变换：比例（0,0）；
变换：缩放（0,0）；
不透明度：1；
}
20% {
-webkit变换：比例（25,25）；
-moz变换：比例（25,25）；
-ms变换：标度（25,25）；
-o变换：标度（25,25）；
变换：比例（25,25）；
不透明度：1；
}
100% {
不透明度：0；
-webkit变换：比例（40,40）；
-moz变换：比例（40,40）；
-ms变换：标度（40,40）；
-o变换：标度（40,40）；
变换：比例（40,40）；
}
}
按钮：焦点：不（：活动）：：之后{
-webkit动画：ripple 1s放松；
-moz动画：ripple 1s放松；
-o型动画：ripple 1s放松；
动画：ripple 1s放松；
}
按钮：焦点{
大纲：无；
}

注意：这种涟漪效应只适用于Chrome浏览器

Click Me

适用于IE 11和Firefox-58.0.2您的FF版本是什么？它适用于FF，但我有相同的问题。您能解决吗？此解决方案在我的Firefox或Safari浏览器上不起作用。@2523454您的FF版本是什么？？

<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>

button {
    border: none;
    cursor: pointer;
    color: black;
    width: 130px;
    padding: 10px;
    border-radius: 2px;
    font-size: 19px;
    background: green;
    position: relative;
    overflow: hidden;
}

button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, .5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 1;
    }
    20% {
        transform: scale(25, 25);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

button:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

button:focus{
    outline: none;
}

* { box-sizing:border-box; }