<!DOCTYPEhtml>
<html>
<head>
<title>css3水纹效果</title>
<styletype="text/css">
.point_area{
text-align:center;
position:relative;
width:150px;
height:150px;
transition:opacity.5sease-out;
}
.point_area.point{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:10px;
height:10px;
margin:auto;
-webkit-border-radius:50%;
-webkit-background-clip:padding-box;
-moz-border-radius:50%;
-moz-background-clip:padding;
border-radius:50%;
background-clip:padding-box;
background:transparent;
}
.point_area.point_dot{
z-index:1;
background-color:#ff903d;
border:1pxsolidrgba(255,144,61,.37);
}
.point_area.point_10{
width:100%;
height:100%;
}
.point_area.point_10:after{
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border-radius:50%;
border:2pxsolid#ff903d;
opacity:0;
-webkit-animation:ripple4.5sease-out225msinfinite;
animation:ripple4.5sease-out225msinfinite;
}
.point_area.point_40{
width:100%;
height:100%;
}
.point_area.point_40:after{
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border-radius:50%;
border:2pxsolid#ff903d;
opacity:0;
-webkit-animation:ripple4.5sease-out.9sinfinite;
animation:ripple4.5sease-out.9sinfinite;
}
.point_area.point_80{
width:100%;
height:100%;
}
.point_area.point_80:after{
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border-radius:50%;
border:2pxsolid#ff903d;
opacity:0;
-webkit-animation:ripple4.5sease-out1.8sinfinite;
animation:ripple4.5sease-out1.8sinfinite;
}
@-webkit-keyframesripple{
0%{
opacity:0;
-webkit-transform:scale(.1)
}
5%{
opacity:1
}
to{
opacity:0;
-webkit-transform:scale(1)
}
}
@keyframesripple{
0%{
opacity:0;
-webkit-transform:scale(.1);
transform:scale(.1)
}
5%{
opacity:1
}
to{
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
</style>
</head>
<bodystyle="position:relative;">
<divclass="point_area"style="top:158px;left:661px;position:absolute;width:110px;height:110px;visibility:visible;opacity:1;">
<pclass="point_name"style="position:absolute;top:45px;left:65px;">北京</p>
<ahref="#"target="_blank"class="pointpoint_dot"></a>
<divclass="pointpoint_10"></div>
<divclass="pointpoint_40"></div>
<divclass="pointpoint_shadowpoint_80"></div>
</div>
</body>
</html>
