css3 仿写阿里云水纹效果的示例代码

本文介绍了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)
     }
 }
    


    
 
北京
 
 
 
 
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。