animation: sonarEffect 1.3s ease-out infinite没有效果
0
[已关闭问题]
关闭于 2017-06-07 16:20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
padding: 0;
border-radius: 50%;
}
button{
font-size: 15px;
padding: 0;
display: inline-block;
cursor: pointer;
width: 55px;
height: 55px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #000;
border: 1px solid #999;
background: transparent;
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}
p{
margin: 0;
}
button:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content:'';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
top: 0;
left: 0;
padding: 0;
z-index: -1;
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-webkit-animation: sonarEffect 1.3s ease-out infinite;
-moz-animation: sonarEffect 1.3s ease-out infinite;
animation: sonarEffect 1.3s ease-out infinite;
}
</style>
</head>
<body>
<div>
<button>
<p>预览</p>
<p>按钮</p>
</button>
</div>
</body>
</html>
