我正在尝试在单击按钮时设置涟漪效果。
我已经成功完成了,但它只能在Google Chrome浏览器中使用,我不知道为什么。效果不会出现在Safari或FireFox中(尚未测试IE)。
但是:ぁzxswい
HTML:
https://jsfiddle.net/uwa67xff/5/
CSS:
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
你需要添加qazxsw poi用于safari和chrome,qazxsw poi用于mozilla和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; }
用于opera浏览器
-webkit-
-moz-
在您的CSS代码中,有一些属性没有工作标准,可能永远不会成为标准(transform,@ keyframes)。为了克服这个问题,我们使用Vendor Prefixes(-webkit,-moz)。
要了解更多-o-
使用供应商前缀代码
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);
}
}
@-webkit-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
@-moz-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
@-o-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; }
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
新的CSS属性需要什么前缀。 go here