svg+css3做一个动感的波浪效果实现

一根矢量的波浪

完整代码：

    
    



    
 
     
  
      
      
  
     
 
    


    
 .circle-countdown {
     width: 441px;
     height: 441px;
     position: relative;
     top: 0;
     left: 0;
     padding: 2.5rem;
     border: 1px solid #fb64b6;
     border-radius: 50%;
     overflow: hidden;
 }

 .wave-animation {
     overflow: hidden;
 }


 .wave-animation__percent {
     position: absolute;
     left: 0;
     top: 0;
     z-index: 3;
     width: 100%;
     height: 100%;
     display: flex;
     display: -webkit-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 64px;
 }

 .wave-animation__water {
     position: absolute;
     left: 0;
     top: 0;
     z-index: -1;
     width: 100%;
     height: 100%;
     
     transform: translate(0, calc(100% - 60%));
     background: #f852d6;
     transition: all 2s;
 }

 .wave-animation__water-wave {
     width: 200%;
     position: absolute;
     bottom: 100%;


 }

 .wave-animation__water-wave--back {
     right: 0;
     fill: #1d1d1d;
     animation: wave-back 1.4s infinite linear;
 }

 .wave-animation__water-wave--front {
     left: 0;
     fill: #f852d6;
     margin-bottom: -1px;
     animation: wave-front 0.7s infinite linear;
 }

 @keyframes wave-front {
     100% {
  transform: translate(-50%, 0);
     }
 }

 @keyframes wave-back {
     100% {
  transform: translate(50%, 0);
     }
 }
    

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