如何使用css3仿写水纹效果-创新互联
这篇文章给大家分享的是有关如何使用css3仿写水纹效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联建站从2013年开始，是专业互联网技术服务公司，拥有项目成都做网站、成都网站建设、
成都外贸网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元龙游做网站,已为上家服务,为龙游各地企业和个人服务,联系电话:18980820575
效果图
什么也不说了，上代码。
css3 水纹效果
.point_area {
text-align: center;
position: relative;
width: 150px;
height: 150px;
transition: opacity .5s ease-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: 1px solid rgba(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: 2px solid #ff903d;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out 225ms infinite;
animation: ripple 4.5s ease-out 225ms infinite;
}
.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: 2px solid #ff903d;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out .9s infinite;
animation: ripple 4.5s ease-out .9s infinite;
}
.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: 2px solid #ff903d;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out 1.8s infinite;
animation: ripple 4.5s ease-out 1.8s infinite;
}
@-webkit-keyframes ripple{
0%{
opacity:0;-webkit-transform:scale(.1)
}
5%{
opacity:1
}
to{
opacity:0;
-webkit-transform:scale(1)
}
}
@keyframes ripple{
0%{
opacity:0;
-webkit-transform:scale(.1);
transform:scale(.1)
}
5%{
opacity:1
}
to{
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
北京
