Css3 анимация волн эффект - PullRequest
Новая
       92

Css3 анимация волн эффект

2 голосов
/ 27 апреля 2020

Я создал контейнер, который, если он заполняется, и я хочу применить к нему какой-то «анимированный эффект волн», и я немного застрял, потому что я не уверен, как это сделать: кто-нибудь может мне помочь с этими волнами эффективные анимации? 

body {
  background-color: #015871;
}

.container {
  position: relative;
  width: 700px;
  height: 300px;
  margin: 100px auto;
}

.shape {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-top-right-radius: 0;
  transform: rotate(-45deg);
  float: left;
  margin-top: 50px;
  margin-left: 20px;
  border: 5px solid #fff;
  overflow: hidden;
  position: relative;
}

.frame {
  position: absolute;
  transform: rotate(225deg);
  background-color: #00eaff;
  bottom: -80px;
  left: -80px;
  right: 0;
  height: 10px;
  width: 200%;
  animation: fill-up 1s ease infinite;
}

@keyframes fill-up {
  to {
    height: 300px;
  }
}
<div class="container">
  <div class="shape">
    <div class="frame" />
  </div>
</div>

рабочий пример: https://codesandbox.io/s/vigorous-keldysh-uw2po?file= / src / styles. css: 81-720

1 Ответ

6 голосов
/ 27 апреля 2020

Улучшен ваш код с внутренним элементом .wave с двумя вращающимися блоками. Нет JavaScript, нет SVG. Выключите переполнение, скрытое, чтобы увидеть, как это просто работает. 

    body {
      background-color: #015871;
    }
    
    .container {
      position: relative;
      width: 700px;
      height: 300px;
      margin: 100px auto;
    }
    
    .shape {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border-top-right-radius: 0;
      transform: rotate(-45deg);
      float: left;
      margin-top: 50px;
      margin-left: 20px;
      border: 5px solid #fff;
      overflow: hidden;
      position: relative;
    }
    
    .frame {
      position: absolute;
      transform: rotate(45deg);
      background-color: rgba(0, 234, 255, 0.5);
      bottom: -8px;
      left: 15px;
      right: 0;
      height: 245px;
      width: 200px;
    }
    
    .wave {
      position: absolute;
      top: 50%;
      left: 0;
      width: 200%; 
      height: 200%;
      transform: translate(-25%,0);
      background: #4973ff; 
      animation: fill-up 10s ease infinite;
    }
    
    @keyframes fill-up {
      to {
        top: -60%;
      }
    }
    
    
    
    .wave:before,
    .wave:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 50%;
      transform: translate(-50%,-75%);
      background: #000;
    }
    .wave:before {
      border-radius: 45%;
      background: rgba(1,88,113,1);
      animation: animate 3s linear infinite;
    }
    .wave:after {
      border-radius: 40%;
      background: rgba(1,88,113,0.5);
      animation: animate 3s linear infinite;
    }
    
    @keyframes animate {
      0% {transform: translate(-50%,-75%) rotate(0deg);}
      100% {transform: translate(-50%,-75%) rotate(360deg);}
    }
    <div class="container">
      <div class="shape">
        <div class="frame">
          <div class="wave">
        
          </div>
        </div>
      </div>
    </div>
...